Add various informative alert-boxes

flutter/lib/components/badge_display/badge_display.dart

@@ -2,50 +2,104 @@ import 'package:flutter/material.dart';
 
 enum BadgeMode { error, warn, info }
 
-class BadgeDisplay extends StatelessWidget {
+class BadgeDisplay extends StatefulWidget {
   final String text;
   final BadgeMode mode;
   final IconData? icon;
+  final TextAlign textAlign;
+  final bool closable;
+  final EdgeInsets extraPadding;
+  final bool hidden;
 
   const BadgeDisplay({
     Key? key,
     required this.text,
     required this.mode,
     required this.icon,
+    this.textAlign = TextAlign.center,
+    this.closable = false,
+    this.extraPadding = EdgeInsets.zero,
+    this.hidden = false,
   }) : super(key: key);
 
+  @override
+  State<BadgeDisplay> createState() => _BadgeDisplayState();
+}
+
+class _BadgeDisplayState extends State<BadgeDisplay> {
+  bool _isVisible = true;
+
   @override
   Widget build(BuildContext context) {
+    if (!_isVisible || widget.hidden) return const SizedBox.shrink();
+
     var col = Colors.grey;
     var colFG = Colors.black;
 
-    if (mode == BadgeMode.error) col = Colors.red;
-    if (mode == BadgeMode.warn) col = Colors.orange;
-    if (mode == BadgeMode.info) col = Colors.blue;
+    if (widget.mode == BadgeMode.error) col = Colors.red;
+    if (widget.mode == BadgeMode.warn) col = Colors.orange;
+    if (widget.mode == BadgeMode.info) col = Colors.blue;
 
-    if (mode == BadgeMode.error) colFG = Colors.red[900]!;
-    if (mode == BadgeMode.warn) colFG = Colors.black;
-    if (mode == BadgeMode.info) colFG = Colors.black;
+    if (widget.mode == BadgeMode.error) colFG = Colors.red[900]!;
+    if (widget.mode == BadgeMode.warn) colFG = Colors.black;
+    if (widget.mode == BadgeMode.info) colFG = Colors.black;
 
     return Container(
-      padding: const EdgeInsets.fromLTRB(8, 2, 8, 2),
-      decoration: BoxDecoration(
-        color: col[100],
-        border: Border.all(color: col[300]!),
-        borderRadius: BorderRadius.circular(4.0),
-      ),
-      child: Row(
+      margin: widget.extraPadding,
+      child: Stack(
+        clipBehavior: Clip.none,
         children: [
-          if (icon != null) Icon(icon!, color: colFG, size: 16.0),
-          Expanded(
-            child: Text(
-              text,
-              textAlign: TextAlign.center,
-              style: TextStyle(color: colFG, fontSize: 14.0),
+          // The badge itself
+          Container(
+            padding: EdgeInsets.fromLTRB(8, 2, widget.closable ? 16 : 8, 2),
+            decoration: BoxDecoration(
+              color: col[100],
+              border: Border.all(color: col[300]!),
+              borderRadius: BorderRadius.circular(4.0),
+            ),
+            child: Row(
+              children: [
+                if (widget.icon != null) Icon(widget.icon!, color: colFG, size: 16.0),
+                Expanded(
+                  child: Text(
+                    widget.text,
+                    textAlign: widget.textAlign,
+                    style: TextStyle(color: colFG, fontSize: 14.0),
+                  ),
+                ),
+              ],
             ),
           ),
+
+          if (widget.closable) _buildCloseButton(context, colFG),
         ],
       ),
     );
   }
+
+  Positioned _buildCloseButton(BuildContext context, Color colFG) {
+    return Positioned(
+      top: 1,
+      right: 1,
+      child: Material(
+        color: Colors.transparent,
+        child: InkWell(
+          onTap: () {
+            setState(() {
+              _isVisible = false;
+            });
+          },
+          borderRadius: BorderRadius.circular(12),
+          child: Container(
+            padding: const EdgeInsets.all(2),
+            child: Icon(
+              Icons.close,
+              size: 14,
+              color: colFG,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
 }