Flutter Widget: SnackBar

The SnackBar widget in Flutter provides a simple way to display temporary messages or notifications to the user. It is commonly used to show feedback or alerts after certain actions, such as successful form submission, error messages, or information updates. In this article, we will explore how to use the SnackBar widget effectively in your Flutter applications.

Getting Started

To use the SnackBar widget, you need to have a scaffold in your widget hierarchy. The scaffold acts as the container for the SnackBar, providing a space to display the message. Let's start by setting up a basic scaffold widget:

Copycopy code to clipboard
1import 'package:flutter/material.dart';
2
3void main() {
4  runApp(MyApp());
5}
6
7class MyApp extends StatelessWidget {
8  @override
9  Widget build(BuildContext context) {
10    return MaterialApp(
11      home: Scaffold(
12        appBar: AppBar(
13          title: Text('SnackBar Demo'),
14        ),
15        body: MyHomePage(),
16      ),
17    );
18  }
19}
20
21class MyHomePage extends StatelessWidget {
22  @override
23  Widget build(BuildContext context) {
24    return Center(
25      child: ElevatedButton(
26        onPressed: () {
27          // Display SnackBar here
28        },
29        child: Text('Show SnackBar'),
30      ),
31    );
32  }
33}

In the above example, we have a basic scaffold with an app bar and a body that contains a MyHomePage widget. The MyHomePage widget includes a button that we will use to trigger the SnackBar.

Showing a SnackBar

To display a SnackBar, we can use the ScaffoldMessenger class and its showSnackBar method. The showSnackBar method takes an instance of SnackBar as an argument. Let's modify the onPressed callback of the button to show a SnackBar:

Copycopy code to clipboard
1ElevatedButton(
2  onPressed: () {
3    ScaffoldMessenger.of(context).showSnackBar(
4      SnackBar(
5        content: Text('Hello, SnackBar!'),
6      ),
7    );
8  },
9  child: Text('Show SnackBar'),
10),

In this example, we use the ScaffoldMessenger.of(context) to access the ScaffoldMessenger instance associated with the nearest scaffold. We then call the showSnackBar method and provide a SnackBar widget as the content. The SnackBar widget takes a child widget, in this case, a simple text widget displaying "Hello, SnackBar!".

Customizing the SnackBar

The SnackBar widget provides various properties to customize its appearance and behavior. Some of the commonly used properties include:

• duration: Specifies how long the SnackBar should be visible on the screen. By default, it is set to SnackBarBehavior.floating, which shows the SnackBar until the user dismisses it by tapping on it or it times out.
• action: Allows adding an action button to the SnackBar. The action button can trigger additional actions when tapped.
• backgroundColor: Defines the background color of the SnackBar.
• contentTextStyle: Sets the style for the text content of the SnackBar.

Let's see an example of a SnackBar with a custom duration and an action button:

Copycopy code to clipboard
1ScaffoldMessenger.of(context).showSnackBar(
2  SnackBar(
3    content: Text('This SnackBar will disappear in 3 seconds.'),
4    duration: Duration(seconds:
5
6 3),
7    action: SnackBarAction(
8      label: 'Undo',
9      onPressed: () {
10        // Undo action logic
11      },
12    ),
13  ),
14);

In this example, we set the duration to 3 seconds using the duration property. We also add an action button labeled "Undo" by using the SnackBarAction widget. The onPressed callback of the action button can be used to implement custom logic, such as undoing the previous action.

Conclusion

The SnackBar widget is a useful tool for displaying temporary messages and notifications in your Flutter applications. By using the SnackBar widget along with the ScaffoldMessenger, you can provide feedback to users and enhance the user experience. Experiment with the customization options available to make your SnackBars more informative and visually appealing.