Flutter snackbar example

Showing message in snackbar is an important feature of native android applications. In android we can achieve this using a simple line of code. In this tutorial we will learn how to show snackbar in android and ios by implementing this feature in flutter. We can achieve this in flutter without using any library.

Contents

  1. Learn code for implementing snackbar in flutter
  2. Implement code for snackbar on button click
  3. Display snackbar with action buttons

Learn code for implementing snackbar in flutter

For implementing  a snack bar in flutter all you need to do is to add the following code in your action.The first block of code is to just display a snackbar with a message. And the second block of code is to display snackbar with action button.

Snackbar message

final snackBar = SnackBar(content: Text('Hello world'));
Scaffold.of(context).showSnackBar(snackBar);

Snackbar with message and button

final snackBar = SnackBar(
  content: Text('You can click me'),
  action: SnackBarAction(
    label: 'Show Toast',
    onPressed: () {
      // Some code to undo the change!
    },
  ),
);

Implement code for snackbar on a button click

Following is a full code of a main.dart file . This will give you an output of  screen with a button. And when you click on the button it will display a snackbar with a message.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

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

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

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

class _MyHomePageState extends State<MyHomePage> {

  GlobalKey<ScaffoldState> scaffold_state = new GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      key: scaffold_state,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                final snackBar = SnackBar(content: Text('Hello world!'));
                scaffold_state.currentState.showSnackBar(snackBar);
              },
              child: Text('Display Snack Bar'),
            ),

          ],
        ),
      ),
    );
  }
}

Display snackbar with action buttons.

Now we will move on to implementation of snackbar with an action button. So we will have a small change in the above code in which snackbar will have a button. In this code am giving an action of displaying a toast message when the user clicks on snackbar button.

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
void main() => runApp(MyApp());

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

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

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

class _MyHomePageState extends State<MyHomePage> {

  GlobalKey<ScaffoldState> scaffold_state = new GlobalKey<ScaffoldState>();
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      key: scaffold_state,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                final snackBar = SnackBar(content: Text('Hello world!'));
                scaffold_state.currentState.showSnackBar(snackBar);
              },
              child: Text('Display Snack Bar'),
            ),
            RaisedButton(
              onPressed: () {
                final snackBar = SnackBar(
                  content: Text('Click the button to show toast'),
                  action: SnackBarAction(
                    label: 'Show',
                    onPressed: () {
                      Fluttertoast.showToast(
                        msg: "Please Subscribe",
                        textColor: Colors.white,
                        toastLength: Toast.LENGTH_SHORT,
                        timeInSecForIos: 1,
                        gravity: ToastGravity.BOTTOM,
                        backgroundColor: Colors.indigo,
                      );
                    },
                  ),
                );
                scaffold_state.currentState.showSnackBar(snackBar);
              },
              child: Text('Show Snackbar'),
            ),
          ],
        ),
      ),
    );
  }
}

About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.

Add a Comment

Your email address will not be published. Required fields are marked *