How to implement SnackBar in Flutter

SnackBar is a widget used to display a short message. It’s usually displayed at the bottom of the screen. Sometimes it can also have a clickable action button. In Flutter, there is a widget called SnackBar that makes it easy for us to show snackbars. Snackbar in Flutter is a widget showing the lightweight message that briefly informs the user when certain actions occur. It displays the message for a very short period, and when the specified time is completed, it will be disappeared from the screen. By default, the snack bar displays at the bottom of the screen. It is an excellent way to give feedback to users. It also contains some actions that allow the user to undo or redo any action. Usually, the snack bar is used with the scaffold widget. In this guide, we will discuss how to implement SnackBar in Flutter.

Some of the Properties used in SnackBar are given below.

content	main-content of the snack bar, which is basically a text widget
duration	specify how much time the snack bar should be displayed
action	take action when the user taps on the snack bar
elevation	control the shadow size below the snack bar.
shape	customize the shape of a snack bar
behavior	set the location of the snack bar
bagroundcolor	specifies the background of the snack bar
animation	defines the exit and entrance of the snack bar

Let’s take an example of how we can implement the SnackBar in our flutter application.

import 'package:flutter/material.dart';

class SnackBarScreen extends StatefulWidget {
  const SnackBarScreen({Key? key}) : super(key: key);

  @override
  State<SnackBarScreen> createState() => _SnackBarScreenState();
}

class _SnackBarScreenState extends State<SnackBarScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SnackBar in Flutter'),
        centerTitle: true,
        backgroundColor: Colors.amber,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: ElevatedButton(
              onPressed: () => showSnackBar(context),
              child: const Text('Show SnackBar'),
            ),
          )
        ],
      ),
    );
  }

  Future<void> showSnackBar(BuildContext context) async {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        backgroundColor: Colors.teal,
        behavior: SnackBarBehavior.floating,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15),
        ),
        duration: const Duration(milliseconds: 1000),
        content: Container(
            margin: const EdgeInsets.all(10),
            child: const Text(
              'Login SuccessFully',
              textAlign: TextAlign.center,
            )),
      ),
    );
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

If we click the “Show SnackBar” button, we will see the message at the bottom of the screen. This message will be deleted automatically after completing the specified time

Thank you for reading the Guide about How to implement the SnackBar in Flutter.

Also read: Getting started with Flutter Flavor