Unable to display SnackBar

Question

I am new to Flutter and just playing around to understand the working of this framework. So the code below doesn't make much sense.

I am trying to display a snack bar as soon as the app loads by calling a child widget.

Here's the code :

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Demo')),
        body: GetSnackBarWidget(),
      ),
    );
  }
}

class GetSnackBarWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final snackBar = SnackBar(content: Text("SnackBar"));
    Scaffold.of(context).showSnackBar(snackBar);
    return Text("returned");
  }
}

But I am getting the following Exception :

I/flutter ( 3781): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ I/flutter ( 3781): The following assertion was thrown building GetSnackBarWidget(dirty): I/flutter ( 3781): setState() or markNeedsBuild() called during build. I/flutter ( 3781): This Scaffold widget cannot be marked as needing to build because the framework is already in the I/flutter ( 3781): process of building widgets. A widget can be marked as needing to be built during the build phase I/flutter ( 3781): only if one of its ancestors is currently building. This exception is allowed because the framework I/flutter ( 3781): builds parent widgets before children, which means a dirty descendant will always be built. I/flutter ( 3781): Otherwise, the framework might not visit this widget during this build phase. I/flutter ( 3781): The widget on which setState() or markNeedsBuild() was called was: I/flutter ( 3781): Scaffold(dependencies: [_LocalizationsScope-[GlobalKey#33728], Directionality, _InheritedTheme, I/flutter ( 3781): MediaQuery], state: ScaffoldState#dbc9e(tickers: tracking 2 tickers)) I/flutter ( 3781): The widget which was currently being built when the offending call was made was: I/flutter ( 3781): GetSnackBarWidget(dirty)

Can someone explain in detail what's happening?

score 6 · Accepted Answer · answered Apr 06 '19 at 17:59

Essentially, you can't call Scaffold.of(context).showSnackBar(snackBar) directly while you are building the widget. If you have a button, you could use that for the onPressed method, because it wouldn't be called immediately as the widget is being built, but rather after some other asynchronous event.

The solution, if you have a snackbar to show right off the bat, is instead to tell the app to show the snackbar as soon as it is done building all the widgets. You can do this by using WidgetsBinding.instance.addPostFrameCallback() to add a callback method that will show the snackbar, like so:

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

...

    return Scaffold(
      key: _scaffoldKey,

...
         //when you want to display the snackbar during a build method, 
         //use addPostFrameCallback

         WidgetsBinding.instance.addPostFrameCallback((_) => _showMessage('snackbar message'));

...

void _showMessage(String message) {
  _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text(message),));
}

It worked. If I understood it correctly, The problem was that I was calling a widget (Scaffold) which was still in a building state? Also, Can you please provide me some link that can explain in detail `WidgetsBinding.instance.addPostFrameCallback` and `_scaffoldKey.currentState`. I tried to search alot but no luck. Thanks. — jatin, Apr 06 '19 at 19:16
here is a similar example - https://stackoverflow.com/questions/51458885/how-to-show-a-snackbar-or-bottom-sheet-when-the-app-opens-in-flutter - this may be where I got the answer originally — Kris, Apr 06 '19 at 20:52

score 0 · Answer 2 · answered Apr 07 '19 at 11:45

First of all it is not a good idea to put SnackBar in your build() method. You can try this solution which shows SnackBar on app startup as you need.

class _HomePageState extends State<HomePage> {
  GlobalKey<ScaffoldState> _key = GlobalKey();

  @override
  void initState() {
    super.initState();
    Timer.run(() => _key.currentState.showSnackBar(SnackBar(content: Text("Hi"),)));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _key,
      appBar: AppBar(title: Text("App")),
      body: Container(),
    );
  }
}

score 0 · Answer 3 · answered Jun 13 '19 at 04:28

If you want to show SnackBar inside your widget you have to follow below code:

class _DelayWidgetState extends State<DelayWidget> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("SbackBar Functionality"),
      ),
      body: new Builder(builder: (BuildContext context) {
        return new RaisedButton(
          onPressed: () {
            Scaffold.of(context).showSnackBar(
              new SnackBar(
                content: new Text("Sending Message"),
              ),
            );
          },
          child: new Text("Click"),
        );
      }),
    );
  }
}

In the above example, another Builder added as Scaffold.of() called with a context that does not contain a Scaffold.

Unable to display SnackBar

3 Answers3