flutter-SnackBar not show in TabBarView

Question

It is a official tab demo from Flutter.io. And I want to add snackbar in a tab which is triggered by a RadioButton.

I did wrapped it in a Scaffold widget. And it works not in a TabBarView but a single radioButton. But when I put the Snackbar in a Tab, nothing shows.

The main part of code shown below

class MyApp extends StatelessWidget {
  @override
   Widget build(BuildContext context) {
     return new MaterialApp(
       title: 'Flutter Demo',
       theme: new ThemeData(

       primarySwatch: Colors.blue,
       ),
       home: new DefaultTabController(
        length: 3,
        child: new Scaffold(
        appBar: new AppBar(
          bottom: new TabBar(tabs: [
            new Tab(icon: new Icon(Icons.home)),
            new Tab(icon: new Icon(Icons.favorite)),
            new Tab(icon: new Icon(Icons.list))
          ]),
          title: new Text("Tabs Demo"),
        ),
        body: new TabBarView(children: [
          new MyHomePage(),
          new Center(
              child: new RaisedButton(
                onPressed: () {
                  final snackBar = new SnackBar(
                    content: new Text('Yay! A SnackBar!'),
                    action: new SnackBarAction(
                      label: 'Undo',
                      onPressed: () {
                        // Some code to undo the change!
                      },
                    ),
                  );

                  // Find the Scaffold in the Widget tree and use it to show a SnackBar!
                  Scaffold.of(context).showSnackBar(snackBar);
                },
                child: new Text('Show SnackBar'),
              )
          ),
            new Center(
              child: new IconButton(icon: new Icon(Icons.add), onPressed: (){
                final snackBar = new SnackBar(
                  content: new Text('Yay! A SnackBar!'),
                  action: new SnackBarAction(
                    label: 'Undo',
                    onPressed: () {
                      // Some code to undo the change!
                    },
                  ),
                );

                // Find the Scaffold in the Widget tree and use it to show a SnackBar!
                Scaffold.of(context).showSnackBar(snackBar);
              })
            ),
        ]),
      )),
);
}
 }

Answer 1

Add a GlobalKey of the Scaffold state and use that to display SnackBar as below,

GlobalKey<ScaffoldState> scaffoldState = new GlobalKey();

Scaffold(
key: scaffoldState,

....

scaffoldState.currentState.showSnackBar(new SnackBar(content: new Text('Hello!')));

....

);

Answer 2

I found solution in another post how-to-show-snackbar-in-flutter

I realized that the context in Scaffold.of(context) has to be embedded in Scaffold widget, which means wrapping the Snackbar in another widget is necessary. Code sample like this:

class ShowSnackBarBtn extends StatelessWidget{
   @override
   Widget build(BuildContext context) {
   // TODO: implement build
   return new Center(
    child: new RaisedButton(
      onPressed: () {
        final snackBar = new SnackBar(
          content: new Text('Yay! A SnackBar!'),
          action: new SnackBarAction(
            label: 'Undo',
            onPressed: () {
              // Some code to undo the change!
            },
          ),
        );

        // Find the Scaffold in the Widget tree and use it to show a SnackBar!
        Scaffold.of(context).showSnackBar(snackBar);
      },
      child: new Text('Show SnackBar'),
    )
);
}
}

Then in my case, all I need just is put this piece of code in the TabBarView

class MyApp extends StatelessWidget {

 // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
  return new MaterialApp(
  title: 'Flutter Demo',
  theme: new ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: new DefaultTabController(
      length: 3,
      child: new Scaffold(
        appBar: new AppBar(
          bottom: new TabBar(tabs: [
            new Tab(icon: new Icon(Icons.home)),
            new Tab(icon: new Icon(Icons.favorite)),
            new Tab(icon: new Icon(Icons.list))
          ]),
          title: new Text("Tabs Demo"),
        ),
        body: new TabBarView(children: [
          new MyHomePage(),
          new ShowSnackBarBtn(),
          new ShowSnackBarIcon(),
        ]),
      )),
);
}
}

At last, Sorry that the exception wasn't posted. I wonder why it doesn't show any log in console in Android Studion connecting my phone. However, when I debugged the program in emulator, the exception thrown showed in console.