fix: toast click behavior

tuihub · Jun 17, 2024 · 808bb04 · 808bb04
1 parent fcf933a
commit 808bb04
Show file tree

Hide file tree

Showing 2 changed files with 148 additions and 57 deletions.
diff --git a/lib/view/components/toast.dart b/lib/view/components/toast.dart
@@ -1,27 +1,33 @@
 import 'package:flutter/material.dart';
 
-import '../../l10n/l10n.dart';
-import '../layout/bootstrap_container.dart';
+import '../layout/bootstrap_breakpoints.dart';
 
 class Toast {
   const Toast({
     required this.title,
     required this.message,
     this.action,
-    this.showCloseIcon = false,
   });
 
   final String title;
   final String message;
   final SnackBarAction? action;
-  final bool showCloseIcon;
 
   ScaffoldFeatureController<SnackBar, SnackBarClosedReason> show(
       BuildContext context) {
+    final left = calculateColumnWidth(
+      xxs: 0,
+      sm: 6,
+      md: 8,
+      xl: 10,
+      containerWidth: MediaQuery.of(context).size.width,
+    );
     return ScaffoldMessenger.of(context).showSnackBar(
       SnackBar(
         elevation: 0,
+        margin: EdgeInsets.only(left: left),
         behavior: SnackBarBehavior.floating,
+        hitTestBehavior: HitTestBehavior.deferToChild,
         backgroundColor: Colors.transparent,
         content: _content(context),
       ),
@@ -43,65 +49,47 @@ class Toast {
             child: action!,
           ),
         ),
-      if (showCloseIcon)
-        Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 8),
-          child: TextButtonTheme(
-            data: TextButtonThemeData(
-              style: TextButton.styleFrom(
-                foregroundColor: Theme.of(context).colorScheme.onPrimary,
-                padding: const EdgeInsets.symmetric(horizontal: 8),
-              ),
-            ),
-            child: TextButton(
-              onPressed: () => ScaffoldMessenger.of(context)
-                  .hideCurrentSnackBar(reason: SnackBarClosedReason.dismiss),
-              child: Text(S.of(context).close),
-            ),
-          ),
-        ),
     ];
 
-    return BootstrapContainer(
-      alignment: Alignment.centerRight,
-      children: [
-        const BootstrapColumn(xxs: 0, sm: 6, md: 8, child: SizedBox()),
-        Expanded(
-          child: BootstrapColumn(
-            xxs: 12,
-            sm: 6,
-            md: 4,
-            child: Container(
-              decoration: BoxDecoration(
-                color: Theme.of(context).colorScheme.surfaceTint,
-                borderRadius: BorderRadius.circular(12),
-              ),
-              padding: const EdgeInsets.all(16),
-              child: Column(
-                children: [
-                  if (title.isNotEmpty)
-                    Padding(
-                      padding: const EdgeInsets.fromLTRB(0, 8, 0, 8),
-                      child: Text(
-                        title,
-                        style: const TextStyle(
-                          fontSize: 17,
-                          fontWeight: FontWeight.bold,
-                        ),
+    return Container(
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.primary,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      padding: const EdgeInsets.all(8),
+      child: Row(
+        children: [
+          Expanded(
+            child: Column(
+              children: [
+                if (title.isNotEmpty)
+                  Padding(
+                    padding: const EdgeInsets.fromLTRB(0, 8, 0, 8),
+                    child: Text(
+                      title,
+                      style: const TextStyle(
+                        fontSize: 17,
+                        fontWeight: FontWeight.bold,
                       ),
                     ),
-                  Text(message),
-                  if (maybeActionAndIcon.isNotEmpty)
-                    Row(
-                      mainAxisAlignment: MainAxisAlignment.end,
-                      children: [...maybeActionAndIcon],
-                    ),
-                ],
-              ),
+                  ),
+                Text(message),
+                if (maybeActionAndIcon.isNotEmpty)
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.end,
+                    children: [...maybeActionAndIcon],
+                  ),
+              ],
             ),
           ),
-        ),
-      ],
+          IconButton(
+            icon: const Icon(Icons.close),
+            color: Theme.of(context).colorScheme.onPrimary,
+            onPressed: () => ScaffoldMessenger.of(context)
+                .hideCurrentSnackBar(reason: SnackBarClosedReason.dismiss),
+          ),
+        ],
+      ),
     );
   }
 }
diff --git a/lib/view/layout/bootstrap_breakpoints.dart b/lib/view/layout/bootstrap_breakpoints.dart
@@ -31,3 +31,106 @@ enum BootstrapSteps {
   const BootstrapSteps._(this.value);
   final int value;
 }
+
+double calculateColumnWidth({
+  required double containerWidth,
+  required int xxs,
+  int xs = -1,
+  int sm = -1,
+  int md = -1,
+  int lg = -1,
+  int xl = -1,
+  int xxl = -1,
+  BootstrapSteps fill = BootstrapSteps.undefined,
+}) {
+  int xxs_ = 0;
+  int xs_ = 0;
+  int sm_ = 0;
+  int md_ = 0;
+  int lg_ = 0;
+  int xl_ = 0;
+  int xxl_ = 0;
+  double columnWidth;
+
+  if (0 <= xxs && xxs <= 12) {
+    xxs_ = xxs;
+  } else {
+    xxs_ = 0;
+  }
+  if (0 <= xs && xs <= 12) {
+    xs_ = xs;
+  } else {
+    xs_ = xxs_;
+  }
+  if (0 <= sm && sm <= 12) {
+    sm_ = sm;
+  } else {
+    sm_ = xs_;
+  }
+  if (0 <= md && md <= 12) {
+    md_ = md;
+  } else {
+    md_ = sm_;
+  }
+  if (0 <= lg && lg <= 12) {
+    lg_ = lg;
+  } else {
+    lg_ = md_;
+  }
+  if (0 <= xl && xl <= 12) {
+    xl_ = xl;
+  } else {
+    xl_ = lg_;
+  }
+  if (0 <= xxl && xxl <= 12) {
+    xxl_ = xxl;
+  } else {
+    xxl_ = xl_;
+  }
+
+  if (containerWidth == BootstrapContainerMaxWidth.xxs ||
+      containerWidth < BootstrapContainerMaxWidth.xs) {
+    if (fill.value >= BootstrapSteps.xxs.value) {
+      columnWidth = containerWidth;
+    } else {
+      columnWidth = containerWidth * xxs_ / 12;
+    }
+  } else if (containerWidth < BootstrapContainerMaxWidth.sm) {
+    if (fill.value >= BootstrapSteps.xs.value) {
+      columnWidth = containerWidth;
+    } else {
+      columnWidth = BootstrapContainerMaxWidth.xs * xs_ / 12;
+    }
+  } else if (containerWidth < BootstrapContainerMaxWidth.md) {
+    if (fill.value >= BootstrapSteps.sm.value) {
+      columnWidth = containerWidth;
+    } else {
+      columnWidth = BootstrapContainerMaxWidth.sm * sm_ / 12;
+    }
+  } else if (containerWidth < BootstrapContainerMaxWidth.lg) {
+    if (fill.value >= BootstrapSteps.md.value) {
+      columnWidth = containerWidth;
+    } else {
+      columnWidth = BootstrapContainerMaxWidth.md * md_ / 12;
+    }
+  } else if (containerWidth < BootstrapContainerMaxWidth.xl) {
+    if (fill.value >= BootstrapSteps.lg.value) {
+      columnWidth = containerWidth;
+    } else {
+      columnWidth = BootstrapContainerMaxWidth.lg * lg_ / 12;
+    }
+  } else if (containerWidth < BootstrapContainerMaxWidth.xxl) {
+    if (fill.value >= BootstrapSteps.xl.value) {
+      columnWidth = containerWidth;
+    } else {
+      columnWidth = BootstrapContainerMaxWidth.xl * xl_ / 12;
+    }
+  } else {
+    if (fill.value >= BootstrapSteps.xxl.value) {
+      columnWidth = containerWidth;
+    } else {
+      columnWidth = BootstrapContainerMaxWidth.xxl * xxl_ / 12;
+    }
+  }
+  return columnWidth;
+}