How to access Scaffold methods in stateless Flutter widget

Built with

Hi 👋

This post will demonstrate how to access ScaffoldState methods (like showSnackBar) in StatelessWidget.

Let's reproduce a simple example demonstrating the issue and create a HomePage stateless widget with a Scaffold

📄 lib/main.dart

      );
    }
  }
+ 
+ class HomePage extends StatelessWidget {
+   @override
+   Widget build(BuildContext context) {
+     return Scaffold(
+       appBar: AppBar(
+         title: Text('Stateless Widget Scaffold'),
+       ),
+     );
+   }
+ }

Add a button which will call _showSnackbar when pressed

📄 lib/main.dart

        appBar: AppBar(
          title: Text('Stateless Widget Scaffold'),
        ),
+       body: Center(
+         child: FlatButton(
+           child: Text("Show snackbar"),
+           onPressed: _showSnackbar,
+         ),
+       ),
      );
    }
  }

We can use GlobalKey to access ScaffoldState, so let's create one

📄 lib/main.dart

  }

  class HomePage extends StatelessWidget {
+   final scaffoldKey = new GlobalKey();
+ 
    @override
    Widget build(BuildContext context) {
      return Scaffold(

pass it to Scaffold

📄 lib/main.dart

    @override
    Widget build(BuildContext context) {
      return Scaffold(
+       key: scaffoldKey,
        appBar: AppBar(
          title: Text('Stateless Widget Scaffold'),
        ),

and implement method _showSnackbar

📄 lib/main.dart

  class HomePage extends StatelessWidget {
    final scaffoldKey = new GlobalKey();

+   _showSnackbar() {
+     (scaffoldKey.currentState as ScaffoldState).showSnackBar(
+       SnackBar(
+         content: Text("I'm snackbar!"),
+       ),
+     );
+   }
+ 
    @override
    Widget build(BuildContext context) {
      return Scaffold(

That's it! 🎉

Soruce code is available here

Built with

Blog

How to access Scaffold methods in stateless Flutter widget

Andrei Lesnitsky

Join Our Newsletter. No Spam, Only the good stuff.

Related