How to show a Snackbar in Flutter? iOS and Android.

Here is a simple example where the user clicks a button to show a Snackbar.
We know that there is no inbuilt snackbar for iOS. But Flutter makes it easy to do without any custom native code.

You can see a Demo video here.

Here we use two main elements

Scaffold
Snackbar

The Scaffold Widget from the material library creates this visual structure for us and ensures important Widgets don’t overlap!. You can read more about Scaffold from here.

Snackbar is the class which helps you to show Snackbar widget in iOS/Android with a single code.

Lets see how it is done.
I am assuming that you have setup Flutter upfront.
If not, go to flutter.io and know more about Flutter.

InShort Flutter is a framework from Google with which you can create iOS/Android Mobile Applications with single source code using dart language.

Once you have created a new Flutter project.
I am using Android Studio for creating Flutter Project.

Once you have created the Flutter Project, navigate to lib/main.dart

Show SnackBar

final snackBar = new SnackBar(content: new Text('Yay! A SnackBar!'));

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

But Gettign a Scaffold Widget can be messy sometimes.
But we have a solution here.

We will have a GlobalState like this.

final GlobalKey<ScaffoldState> mScaffoldState = new GlobalKey<ScaffoldState>();

Complete code

Have a look how the Scaffold is used.
We have wrapped the content inside a Scaffold and gave the key as the Global Scaffold.

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Snackbar Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Snackbar Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final GlobalKey<ScaffoldState> mScaffoldState = new GlobalKey<ScaffoldState>();

  void buttonClick() {
    final snackBar = new SnackBar(content: new Text('Yay! A SnackBar!'));
    mScaffoldState.currentState.showSnackBar(snackBar);
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: mScaffoldState,
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new RaisedButton(
                child: const Text('Show Snackbar'),
                color: Theme
                    .of(context)
                    .accentColor,
                elevation: 4.0,
                splashColor: Colors.blueGrey,
                textColor: Colors.white,
                onPressed: () {
                  buttonClick();
                })
          ],
        ),
      ),
    );
  }
}

Leave a Reply Cancel reply