Display SnackBar in Flutter

Question

I want to display a simple SnackBar inside Flutter's stateful widget. My application creates new instance of MaterialApp with a stateful widget called MyHomePage.

I try to show the SnackBar in showSnackBar() method. But it fails with 'The method 'showSnackBar' was called on null'.

What's wrong with this code?

class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return new MaterialApp(       title: 'Flutter',       theme: new ThemeData(         primarySwatch: Colors.blue,       ),       home: new MyHomePage(),     );   } }  class MyHomePage extends StatefulWidget {   MyHomePage({Key key}) : super(key: key);    @override   _MyHomePageState createState() => new _MyHomePageState(); }  class _MyHomePageState extends State<MyHomePage> {    final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();    @override   void initState() {     super.initState();     showInSnackBar("Some text");   }    @override   Widget build(BuildContext context) {     return new Padding(             key: _scaffoldKey,             padding: const EdgeInsets.all(16.0),             child: new Text("Simple Text")     );   }    void showInSnackBar(String value) {     _scaffoldKey.currentState.showSnackBar(new SnackBar(         content: new Text(value)     ));   } } 

SOLUTION:

class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return new MaterialApp(         title: 'Flutter',         theme: new ThemeData(             primarySwatch: Colors.blue,         ),         home: new Scaffold(body: new MyHomePage()),       );   } }  class MyHomePage extends StatefulWidget {   MyHomePage({Key key}) : super(key: key);    @override   _MyHomePageState createState() => new _MyHomePageState(); }  class _MyHomePageState extends State<MyHomePage> {    @override   void initState() {     super.initState();   }    @override   Widget build(BuildContext context) {     showInSnackBar("Some text");     return new Padding(         padding: const EdgeInsets.all(16.0),         child: new Scaffold(           body: new Text("Simple Text")         )     );   }    void showInSnackBar(String value) {     Scaffold.of(context).showSnackBar(new SnackBar(         content: new Text(value)     ));   } } 

Answer 1

In my case i had code like this (in class state)

final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();  void showInSnackBar(String value) {     _scaffoldKey.currentState.showSnackBar(new SnackBar(content: new Text(value))); } 

but i didn't setup the key for scaffold. so when i add key: _scaffoldKey

 @override  Widget build(BuildContext context) {   return new Scaffold(     key: _scaffoldKey,     body: new SafeArea( 

snackbar start to work :)

Answer 2

There's three problems. The first is that you don't have a Scaffold anywhere, and the Scaffold widget is the one that knows how to show snack bars. The second is that you have a key for getting a hold of the scaffold, but you've put it on a Padding instead (and Paddings don't have any knowledge of snack bars). The third is that you've used the key before the widget that it's associated with has had a chance to be initialised, since initState is called before build.

The simplest solution is to change the home line in your MyApp widget to:

home: new Scaffold(body: new MyHomePage()),

...and then remove all mention of _scaffoldKey and instead use Scaffold.of(context) where you currently have _scaffoldKey.currentState.