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