How to Show a Simple Snackbar in Flutter

Snackbars are a great way to display important messages or notifications to your users in a simple and non-intrusive way. In Flutter, showing a snackbar is quite straightforward. In this article, we will walk through the steps to show a simple snackbar in your Flutter application using the ScaffoldMessenger.

Adding the ScaffoldMessenger Widget

To show a snackbar, you need to have a ScaffoldMessenger widget in your application. The ScaffoldMessenger widget is responsible for managing and displaying snackbars, bottom sheets, and other transient UI elements. It provides a centralized way to show these UI elements without the need for a specific Scaffold widget.

To add the ScaffoldMessenger widget, you can wrap your MaterialApp with it. Here's an example:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ScaffoldMessenger(
        child: Scaffold(
          appBar: AppBar(
            title: Text('My App'),
          ),
          body: Center(
            child: RaisedButton(
              onPressed: () {
                // Show snackbar here
              },
              child: Text('Show Snackbar'),
            ),
          ),
        ),
      ),
    );
  }
}

Showing the Snackbar

Once you have the ScaffoldMessenger widget set up, you can easily show a snackbar by calling the showSnackBar() method on the ScaffoldMessenger instance. This method takes a SnackBar widget as its argument.

Here's an example of showing a simple snackbar with a message:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ScaffoldMessenger(
        child: Scaffold(
          appBar: AppBar(
            title: Text('My App'),
          ),
          body: Center(
            child: RaisedButton(
              onPressed: () {
                final snackbar = SnackBar(content: Text('Hello, Snackbar!'));
                ScaffoldMessenger.of(context).showSnackBar(snackbar);
              },
              child: Text('Show Snackbar'),
            ),
          ),
        ),
      ),
    );
  }
}

In the above example, we create a SnackBar widget with the desired message and pass it to the showSnackBar() method of the ScaffoldMessenger.

Customizing the Snackbar

You can further customize the snackbar by adding additional properties to the SnackBar widget. For example, you can add an action button, change the background color, or set the duration of the snackbar.

Here's an example of a snackbar with an action button and a custom background color:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ScaffoldMessenger(
        child: Scaffold(
          appBar: AppBar(
            title: Text('My App'),
          ),
          body: Center(
            child: RaisedButton(
              onPressed: () {
                final snackbar = SnackBar(
                  content: Text('Hello, Snackbar!'),
                  backgroundColor: Colors.blue,
                  action: SnackBarAction(
                    label: 'Dismiss',
                    onPressed: () {
                      // Handle action here
                    },
                  ),
                );
                ScaffoldMessenger.of(context).showSnackBar(snackbar);
              },
              child: Text('Show Snackbar'),
            ),
          ),
        ),
      ),
    );
  }
}

In this example, we added a blue background color to the snackbar and an action button with a label and an onPressed callback.

Wrapping Up

Snackbars are a simple yet effective way to show important messages to your users in Flutter. By using the ScaffoldMessenger widget and the showSnackBar() method, you can easily implement snackbar functionality in your app. Remember to customize the snackbar as needed to provide a better user experience.

Now you're ready to show simple snackbars in your Flutter application using the ScaffoldMessenger. Happy coding!