How to implement SnackBar in Flutter

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.

contentmain-content of the snack bar, which is basically a text widget
durationspecify how much time the snack bar should be displayed
actiontake action when the user taps on the snack bar
elevationcontrol the shadow size below the snack bar.
shapecustomize the shape of a snack bar
behaviorset the location of the snack bar
bagroundcolorspecifies the background of the snack bar
animationdefines 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