Error when I try to show a SnackBar in a builder

[lyzMaster]

This is my main.dart:

class MyApp extends StatelessWidget {
var login = new Login("xxxxxxx", "xxxxxxxxx");
final scaffoldKey = new GlobalKey<ScaffoldState>();

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Fetch Data Example',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        title: Text('Fetch Data Example'),
      ),
      body: Center(
        child: FutureBuilder(
          future: login.main(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              _showSnackBar(snapshot.data);
              return new Container();
            } else if (snapshot.hasError) {
              return Text("${snapshot.error}");
            }
            // By default, show a loading spinner
            return CircularProgressIndicator();
          },
        ),
      ),
    ),
  );
}

_showSnackBar(var text) {
  scaffoldKey.currentState
      .showSnackBar(new SnackBar(content: new Text(text)));
}
}

I'd like to show a SnackBar in FutureBuilder, but when I run, something wrong occurs:

I/flutter ( 8918): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY 
╞═══════════════════════════════════════════════════════════
I/flutter ( 8918): The following assertion was thrown building 
FutureBuilder<dynamic>(dirty, state:
I/flutter ( 8918): _FutureBuilderState<dynamic>#9d4af):
I/flutter ( 8918): setState() or markNeedsBuild() called during build.
I/flutter ( 8918): This Scaffold widget cannot be marked as needing to 
build because the framework is already in the
I/flutter ( 8918): process of building widgets. A widget can be marked 
as needing to be built during the build phase
I/flutter ( 8918): only if one of its ancestors is currently building. 
This exception is allowed because the framework
I/flutter ( 8918): builds parent widgets before children, which means 
a dirty descendant will always be built.
I/flutter ( 8918): Otherwise, the framework might not visit this 
widget during this build phase.
I/flutter ( 8918): The widget on which setState() or markNeedsBuild() 
was called was:
I/flutter ( 8918):   Scaffold-[LabeledGlobalKey<ScaffoldState>#e4a3f] 
(state: ScaffoldState#cf908(tickers: tracking 2
I/flutter ( 8918):   tickers))
I/flutter ( 8918): The widget which was currently being built when the 
offending call was made was:
I/flutter ( 8918):   FutureBuilder<dynamic>(dirty, state: _ 
FutureBuilderState<dynamic>#9d4af)
I/flutter ( 8918): 
I/flutter ( 8918): When the exception was thrown, this was the stack:
I/flutter ( 8918): #0      Element.markNeedsBuild.<anonymous closure> 
(package:flutter/src/widgets/framework.dart:3472:11)
I/flutter ( 8918): #1      Element.markNeedsBuild 
(package:flutter/src/widgets/framework.dart:3498:6)
I/flutter ( 8918): #2      State.setState 
(package:flutter/src/widgets/framework.dart:1141:14)
I/flutter ( 8918): #3      ScaffoldState.showSnackBar 
(package:flutter/src/material/scaffold.dart:1110:5)
I/flutter ( 8918): #4      MyApp._showSnackBar 
I/flutter ( 8918): #5      MyApp.build.<anonymous closure> 
I/flutter ( 8918): #6      _FutureBuilderState.build 
(package:flutter/src/widgets/async.dart)
I/flutter ( 8918): #7      StatefulElement.build 
(package:flutter/src/widgets/framework.dart:3766:27)
I/flutter ( 8918): #8      ComponentElement.performRebuild 
(package:flutter/src/widgets/framework.dart:3678:15)
I/flutter ( 8918): #9      Element.rebuild 
(package:flutter/src/widgets/framework.dart:3531:5)
I/flutter ( 8918): #10     BuildOwner.buildScope 
(package:flutter/src/widgets/framework.dart:2273:33)
I/flutter ( 8918): #11     

My purpose is that it shows a loading spinner before it gets the data, and once it got the data, it shows a SnackBar. So what should I do to fix the problem? Login.main is a function that GET data from the database.

[zoechi]

Merging with #16218
See especially #16218 (comment)

[Lima-Roberto]

It's a workarround but you can try this:

Future<void> _showSnackBar(var text, context) { scaffoldKey.currentState .showSnackBar(new SnackBar(content: new Text(text))); }

[thought7878]

here is a solution

[galki]

The solution that @thought7878 recommended suggests wrapping the breaking logic in WidgetsBinding.instance.addPostFrameCallback((_) { }. For example:

builder: (context, AsyncSnapshot<Object> snapshot) {
  if (snapshot.hasError) {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Scaffold.of(context)
        ..hideCurrentSnackBar()
        ..showSnackBar(
          // SnackBar
        );
    });
    return Container();
  }
  // Rest ...
}

[saif97]

In my case where I had the issue while using Provider's Consumer widget, I made a function that waits for x seconds and produces the snakebar. Then call the function anywhere in your code.
Future delayedSnakeBar(context, String message) async { await Future.delayed(Duration(seconds: 1)); Scaffold.of(context).showSnackBar(SnackBar(content: Text(message))); }

[ugokoli]

here is a solution

This is GOLD!
Here is my exact implementation of the solution

WidgetsBinding.instance.addPostFrameCallback((_) {
                Scaffold.of(context).showSnackBar(SnackBar(
                  content: Text(vm.validateInviteCodeRH.data.message),
                  duration: Duration(seconds: 10),
                  backgroundColor: kErrorColor,
                ));
});

[zenkog]

The solution here is not perfect yet..

In my case, it doesn't solve the problem of refreshing the snackBar. For instance, in my app I need to update the SnackBar appearance (e.g: change color) But when I show the snackBar again, the appearance doesn't change.

For example if I have a function to toggle SnackBar because I need to call it in several places.

_toggleSnackBar(ScaffoldState scaffoldState, Color color) {
     WidgetsBinding.instance.addPostFrameCallback((_) { 
         final snackBar = SnackBar(content: // a container with color, ...);
         scaffoldState.removeCurrentSnackBar();
         scaffoldState.showSnackBar(snackBar);
      }
  }

Then later on I wanna pass a new color but it still keep the old color.

So.. the question is there any better way rather than using
WidgetsBinding.instance.addPostFrameCallback ?

Thanks

[jaggzh]

zencog, would using a key (SnackBar(key:)) help, and change it if the color changes? I'm just guessing; perhaps the element-tree sees the SnackBar there again and just assumes, being the same class, that it's the same state as before, so it doesn't update it?

[gavingolden]

If the builder can be called arbitrarily then is it safe to call WidgetsBinding.instance.addPostFrameCallback(...)? Couldn't this result in the snackbar being created every frame?

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.