Flutter Snackbar: Learn how to display the Snackbar in your Flutter Mobile Application, so you can use the ScaffoldMessenger along with the SnackBar widget. The SnackBar widget is a lightweight message with an optional action that is briefly displayed at the bottom of the screen. It’s a great way to provide feedback to the user or prompt them to take action.

Here’s a step-by-step guide on how to display a Snackbar with action items in your Flutter app:

Table of Contents

Step 1: Create a New Flutter Project

If you haven’t already, create a new Flutter project by running the following command in your terminal:

flutter create snackbar_example
cd snackbar_example

Step 2: Add a Button to Trigger the Snackbar

Open the lib/main.dart file and modify the build method of your MyHomePage widget to include a button that will trigger the Snackbar when pressed.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Snackbar Example'),
        ),
        body: MyHomePage(),
      ),
    );
 }
}

class MyHomePage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () => _showSnackBar(context),
        child: Text('Show Snackbar'),
      ),
    );
 }

 void _showSnackBar(BuildContext context) {
    final snackBar = SnackBar(
      content: Text('Hello, this is a Snackbar!'),
      action: SnackBarAction(
        label: 'Undo',
        onPressed: () {
          // Handle the action
          print('Undo action pressed');
        },
      ),
    );

    ScaffoldMessenger.of(context).showSnackBar(snackBar);
 }
}

In this example, we’ve added an ElevatedButton that, when pressed, calls the _showSnackBar method. This method creates a SnackBar with a message and an action button labeled “Undo”. The SnackBar is then displayed using the ScaffoldMessenger.

Step 3: Customize the Snackbar

You can customize the Snackbar’s appearance and behavior by setting various properties on the SnackBar widget. For example, you can change the duration for which the Snackbar is displayed, specify a custom width, and set a border radius for rounded corners.

Here’s how you can customize the Snackbar:

void _showSnackBar(BuildContext context) {
 final snackBar = SnackBar(
    content: Text('Hello, this is a Snackbar!'),
    action: SnackBarAction(
      label: 'Undo',
      onPressed: () {
        // Handle the action
        print('Undo action pressed');
      },
    ),
    duration: Duration(seconds: 5), // Display for 5 seconds
    behavior: SnackBarBehavior.floating, // Floating behavior
    width: 200, // Custom width
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10), // Rounded corners
    ),
    margin: EdgeInsets.all(10), // Margin around the Snackbar
 );

 ScaffoldMessenger.of(context).showSnackBar(snackBar);
}

Conclusion

This guide has shown you how to display a Snackbar with action items in your Flutter app. The SnackBar widget is a versatile tool for providing feedback or prompting user actions, and it can be customized to fit the look and feel of your app. Experiment with different properties to create the perfect Snackbar experience for your users.