Learn to create a snackbar in flutter with example

How to create a snackbar in flutter:

Snackbar is used to show a message to the user briefly. It doesn’t overlap with other widgets like floating action button. For example, we can simply show a message to the user if one item is deleted with an option to undo. This is a part of material design and flutter makes it really easy to implement.

In this post, I will show you how to create a snackbar in flutter with example.

Classes used to create snackbar:

We need to use the following two classes to create a snackbar:

  1. Scaffold. widget is used to show the snackbar. It creates a visual structure and doesn’t overlap the important widgets.
  2. SnackBar class is used to show a snackbar. Using Scaffold, we can show a snackbar.

Example program:

Let’s take a look at the below program:

import 'package:flutter/material.dart';

void main() {

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        home: Scaffold(
          appBar: AppBar(
            title: Text('Snack bar Example'),
          body: SnackBarWidget(),

class SnackBarWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          final snackBar = SnackBar(content: Text('Showing a snackbar !!'));
        child: Text('Click me'),

If you run it, it will create one app with a button and clicking on that will show a snackbar as like below:

flutter show snackbar

Adding action button:

We can also add one action to a snackbar that can be used to trigger an action like reverting the last execution.

For that, we need to create the SnackBar as like below:

final snackBar = SnackBar(
              content: Text('Showing a snackbar !!'),
              action: SnackBarAction(
                label: 'Revert',
                onPressed: () {},

onPressed will execute the function that will be called on clicking the action button. It will look somewhat like below:

flutter snackbar revert action

You might also like: