1

There are many times where we would have had separation of concerns when it comes to UI code and business logic. This is reflected in most of the state management solutions that we use in Flutter.

In many of the state management solutions where the business logic is outside the view file ( widget file) , there are cases where we want to show the snackbar based on the logic in flutter.

But to show a Snackbar we first need a context object. I have used a NavigatorState to navigate without context. But I don't know if there is a way to show SnackBar without context.

Can someone provide a solution for this ?

Also it would be very helpful if you could provide a Utility method that manages the state internally and whenever user wants to show snackbar would just call that utility method from his logical part of code.

Natesh bhat
  • 12,274
  • 10
  • 84
  • 125

2 Answers2

2

You can specify scaffoldMessengerKey as a property of MaterialApp and then ScaffoldMessenger can be directly used without BuildContext.

I think you can do the same way as navigatorKey.

ref: https://api.flutter.dev/flutter/material/MaterialApp/scaffoldMessengerKey.html

Check this answer for more details on how to implement this into your application, with some code examples.

Matthew Rideout
  • 7,330
  • 2
  • 42
  • 61
hayashi-ay
  • 239
  • 4
  • 8
0

You definitelly can show a piece of information without a context, something similar to a snackbar, however, it is not a snackbar.

If you use the package Get, you can navigate without context, open dialogs, snackbars or bottomsheets from anywhere in your code. However, the snackbars in particular have some issues.

As it doesn't check for a Scaffold, the snackbar is shown directly in the bottom of your screen. This means that if you have a BottomNavigationBar, it will be covered or partially covered by it.

It also means that if you have a FloatingActionButton, it won't be responsive to the snackbar position, as opossed to the normal snackbar.

So to sum up, with Get, you can have snackbars without context but you will have to make some sacrifices in your UI.

Example

final bottomSnackBar = GetBar(
  isDismissible: false,
  showProgressIndicator: true,
  message: 'Processing...',
);

bottomSnackBar.show();

somethingAsync().then((_) => bottomSnackBar.hide());
Francisco Javier Snchez
  • 973
  • 4
  • 10
  • 1
    The mentioned package "Get" is not advisable to use as it encourages poor architecture. Unknown how it got so many likes. Please see [this answer](https://stackoverflow.com/a/68847551/8177355) for instructions on how to implement without the get package. – Matthew Rideout Aug 28 '21 at 22:02
  • @MatthewRideout I understood the question differently. I understood it as showing the snackbar independently of the screen behind it (maybe when receiving a notification). Anyway, Get might not be the answer I would use right now as Navigator 2.0 is out and context is not necessary anymore, so maybe Flushbar would be the package I would use now. – Francisco Javier Snchez Sep 03 '21 at 10:29