Move SnackBars to top to avoid blocking bottom navigation (#413)

* Move SnackBars to top to avoid blocking bottom navigation
- Display SnackBars at the top of the screen using floating behavior
- Prevent SnackBars from overlapping the bottom navigation bar
- Allow uninterrupted navigation while notifications are visible
- Centralize SnackBar configuration via a shared helper
- Ensure consistent notification behavior across the app

* fix test

* replace hardcoded margins with adaptive layout
- Remove hardcoded pixel values flagged in code review
- Use system-provided metrics for layout calculations
- Prevent multiple SnackBars from stacking

* centralize SnackBar logic with async-safe method

* Clamp bottom margin to prevent negative EdgeInsets values

Author: Catrya

lib/core/deep_link_handler.dart

@@ -6,6 +6,7 @@ import 'package:logger/logger.dart';
 import 'package:mostro_mobile/generated/l10n.dart';
 import 'package:mostro_mobile/services/deep_link_service.dart';
 import 'package:mostro_mobile/shared/providers/nostr_service_provider.dart';
+import 'package:mostro_mobile/shared/utils/snack_bar_helper.dart';
 
 class DeepLinkHandler {
   final Ref _ref;
@@ -149,12 +150,11 @@ class DeepLinkHandler {
   void _showErrorSnackBar(BuildContext? context, String message) {
     if (context == null) return;
 
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(
-        content: Text(message),
-        backgroundColor: Colors.red,
-        duration: const Duration(seconds: 3),
-      ),
+    SnackBarHelper.showTopSnackBar(
+      context,
+      message,
+      duration: const Duration(seconds: 3),
+      backgroundColor: Colors.red,
     );
   }
 

lib/features/auth/screens/login_screen.dart

@@ -7,6 +7,7 @@ import 'package:mostro_mobile/features/auth/notifiers/auth_state.dart';
 import 'package:mostro_mobile/features/auth/providers/auth_notifier_provider.dart';
 import 'package:mostro_mobile/shared/widgets/custom_button.dart';
 import 'package:mostro_mobile/generated/l10n.dart';
+import 'package:mostro_mobile/shared/utils/snack_bar_helper.dart';
 
 class LoginScreen extends HookConsumerWidget {
   const LoginScreen({super.key});
@@ -20,8 +21,9 @@ class LoginScreen extends HookConsumerWidget {
       if (state is AuthAuthenticated) {
         context.go('/');
       } else if (state is AuthFailure) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(content: Text(state.error)),
+        SnackBarHelper.showTopSnackBar(
+          context,
+          state.error,
         );
       }
     });

lib/features/auth/screens/register_screen.dart

@@ -9,6 +9,7 @@ import 'package:mostro_mobile/features/notifications/providers/backup_reminder_p
 import 'package:mostro_mobile/shared/widgets/custom_button.dart';
 import 'package:mostro_mobile/shared/utils/nostr_utils.dart';
 import 'package:mostro_mobile/generated/l10n.dart';
+import 'package:mostro_mobile/shared/utils/snack_bar_helper.dart';
 
 class RegisterScreen extends HookConsumerWidget {
   const RegisterScreen({super.key});
@@ -39,8 +40,9 @@ class RegisterScreen extends HookConsumerWidget {
         // Navigate to home after successful registration
         context.go('/');
       } else if (state is AuthFailure) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(content: Text(state.error)),
+        SnackBarHelper.showTopSnackBar(
+          context,
+          state.error,
         );
       }
     });

lib/features/chat/widgets/encrypted_file_message.dart

@@ -11,6 +11,7 @@ import 'package:mostro_mobile/features/chat/providers/chat_room_providers.dart';
 import 'package:mostro_mobile/services/encrypted_file_upload_service.dart';
 import 'package:mostro_mobile/services/file_validation_service.dart';
 import 'package:mostro_mobile/generated/l10n.dart';
+import 'package:mostro_mobile/shared/utils/snack_bar_helper.dart';
 
 class EncryptedFileMessage extends ConsumerStatefulWidget {
   final NostrEvent message;
@@ -494,22 +495,20 @@ class _EncryptedFileMessageState extends ConsumerState<EncryptedFileMessage> {
 
       if (mounted) {
         if (result.type != ResultType.done) {
-          ScaffoldMessenger.of(context).showSnackBar(
-            SnackBar(
-              content: Text('Could not open file: ${result.message}'),
-              backgroundColor: Colors.orange,
-              duration: const Duration(seconds: 3),
-            ),
+          SnackBarHelper.showTopSnackBar(
+            context,
+            'Could not open file: ${result.message}',
+            duration: const Duration(seconds: 3),
+            backgroundColor: Colors.orange,
           );
         }
       }
     } catch (e) {
       if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(
-            content: Text('Error opening file: $e'),
-            backgroundColor: Colors.red,
-          ),
+        SnackBarHelper.showTopSnackBar(
+          context,
+          'Error opening file: $e',
+          backgroundColor: Colors.red,
         );
       }
     }

lib/features/chat/widgets/encrypted_image_message.dart

@@ -11,6 +11,7 @@ import 'package:mostro_mobile/core/app_theme.dart';
 import 'package:mostro_mobile/features/chat/providers/chat_room_providers.dart';
 import 'package:mostro_mobile/services/encrypted_image_upload_service.dart';
 import 'package:mostro_mobile/generated/l10n.dart';
+import 'package:mostro_mobile/shared/utils/snack_bar_helper.dart';
 
 class EncryptedImageMessage extends ConsumerStatefulWidget {
   final NostrEvent message;
@@ -373,22 +374,20 @@ class _EncryptedImageMessageState extends ConsumerState<EncryptedImageMessage> {
 
       if (mounted) {
         if (result.type != ResultType.done) {
-          ScaffoldMessenger.of(context).showSnackBar(
-            SnackBar(
-              content: Text('$couldNotOpenMsg: ${result.message}'),
-              backgroundColor: Colors.orange,
-              duration: const Duration(seconds: 3),
-            ),
+          SnackBarHelper.showTopSnackBar(
+            context,
+            '$couldNotOpenMsg: ${result.message}',
+            duration: const Duration(seconds: 3),
+            backgroundColor: Colors.orange,
           );
         }
       }
     } catch (e) {
       if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(
-            content: Text('$errorOpeningMsg: $e'),
-            backgroundColor: Colors.red,
-          ),
+        SnackBarHelper.showTopSnackBar(
+          context,
+          '$errorOpeningMsg: $e',
+          backgroundColor: Colors.red,
         );
       }
     }

lib/features/chat/widgets/message_bubble.dart

@@ -8,6 +8,7 @@ import 'package:mostro_mobile/shared/providers/avatar_provider.dart';
 import 'package:mostro_mobile/features/chat/widgets/encrypted_image_message.dart';
 import 'package:mostro_mobile/features/chat/widgets/encrypted_file_message.dart';
 import 'package:mostro_mobile/features/chat/utils/message_type_helpers.dart';
+import 'package:mostro_mobile/shared/utils/snack_bar_helper.dart';
 
 class MessageBubble extends ConsumerWidget {
   final NostrEvent message;
@@ -154,17 +155,11 @@ class MessageBubble extends ConsumerWidget {
     // Only copy if text is not empty
     if (text.isNotEmpty) {
       Clipboard.setData(ClipboardData(text: text));
-      ScaffoldMessenger.of(context).showSnackBar(
-        SnackBar(
-          content: Text(S.of(context)!.messageCopiedToClipboard),
-          duration: const Duration(seconds: 2),
-          backgroundColor: AppTheme.backgroundCard,
-          behavior: SnackBarBehavior.floating,
-          margin: const EdgeInsets.all(16),
-          shape: RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(8),
-          ),
-        ),
+      SnackBarHelper.showTopSnackBar(
+        context,
+        S.of(context)!.messageCopiedToClipboard,
+        duration: const Duration(seconds: 2),
+        backgroundColor: AppTheme.backgroundCard,
       );
     }
   }

lib/features/chat/widgets/message_input.dart

@@ -12,6 +12,7 @@ import 'package:mostro_mobile/services/encrypted_file_upload_service.dart';
 import 'package:mostro_mobile/services/encrypted_image_upload_service.dart';
 import 'package:mostro_mobile/services/file_validation_service.dart';
 import 'package:mostro_mobile/services/media_validation_service.dart';
+import 'package:mostro_mobile/shared/utils/snack_bar_helper.dart';
 
 class MessageInput extends ConsumerStatefulWidget {
   final String orderId;
@@ -127,11 +128,10 @@ class _MessageInputState extends ConsumerState<MessageInput> {
     } catch (e) {
       // Show error to user
       if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(
-            content: Text('Error uploading file: $e'),
-            backgroundColor: Colors.red,
-          ),
+        SnackBarHelper.showTopSnackBar(
+          context,
+          'Error uploading file: $e',
+          backgroundColor: Colors.red,
         );
       }
     } finally {

lib/features/disputes/widgets/dispute_input_section.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:mostro_mobile/core/app_theme.dart';
 import 'package:mostro_mobile/generated/l10n.dart';
+import 'package:mostro_mobile/shared/utils/snack_bar_helper.dart';
 
 class DisputeInputSection extends StatefulWidget {
   final String disputeId;
@@ -127,20 +128,18 @@ class _DisputeInputSectionState extends State<DisputeInputSection> {
       await Future.delayed(const Duration(milliseconds: 500));
 
       if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(
-            content: Text('Message sent: $message'),
-            backgroundColor: Colors.green,
-          ),
+        SnackBarHelper.showTopSnackBar(
+          context,
+          'Message sent: $message',
+          backgroundColor: Colors.green,
         );
       }
     } catch (error) {
       if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(
-            content: Text('Failed to send message: $error'),
-            backgroundColor: Colors.red,
-          ),
+        SnackBarHelper.showTopSnackBar(
+          context,
+          'Failed to send message: $error',
+          backgroundColor: Colors.red,
         );
       }
     } finally {

lib/features/disputes/widgets/dispute_message_bubble.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:mostro_mobile/core/app_theme.dart';
 import 'package:mostro_mobile/generated/l10n.dart';
+import 'package:mostro_mobile/shared/utils/snack_bar_helper.dart';
 
 class DisputeMessageBubble extends StatelessWidget {
   final String message;
@@ -88,12 +89,11 @@ class DisputeMessageBubble extends StatelessWidget {
 
   void _copyToClipboard(BuildContext context, String text) {
     Clipboard.setData(ClipboardData(text: text));
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(
-        content: Text(S.of(context)?.messageCopiedToClipboard ?? 'Message copied to clipboard'),
-        duration: const Duration(seconds: 1),
-        backgroundColor: Colors.green,
-      ),
+    SnackBarHelper.showTopSnackBar(
+      context,
+      S.of(context)?.messageCopiedToClipboard ?? 'Message copied to clipboard',
+      duration: const Duration(seconds: 1),
+      backgroundColor: Colors.green,
     );
   }
 

lib/features/key_manager/key_management_screen.dart

@@ -13,6 +13,7 @@ import 'package:mostro_mobile/features/notifications/providers/backup_reminder_p
 import 'package:mostro_mobile/shared/providers.dart';
 import 'package:mostro_mobile/generated/l10n.dart';
 import 'package:mostro_mobile/shared/providers/notifications_history_repository_provider.dart';
+import 'package:mostro_mobile/shared/utils/snack_bar_helper.dart';
 
 class KeyManagementScreen extends ConsumerStatefulWidget {
   const KeyManagementScreen({super.key});
@@ -90,14 +91,16 @@ class _KeyManagementScreenState extends ConsumerState<KeyManagementScreen> {
         await keyManager.importMnemonic(importValue);
         await _loadKeys();
         if (mounted) {
-          ScaffoldMessenger.of(context).showSnackBar(
-            SnackBar(content: Text(S.of(context)!.keyImportedSuccessfully)),
+          SnackBarHelper.showTopSnackBar(
+            context,
+            S.of(context)!.keyImportedSuccessfully,
           );
         }
       } catch (e) {
         if (mounted) {
-          ScaffoldMessenger.of(context).showSnackBar(
-            SnackBar(content: Text(S.of(context)!.importFailed(e.toString()))),
+          SnackBarHelper.showTopSnackBar(
+            context,
+            S.of(context)!.importFailed(e.toString()),
           );
         }
       }