Flutter snackbar: what is it and how to show it with simple demo

In this article, we will give you a clear definition of Flutter snackbar through a simple demo.

Flutter Snackbar

Flutter snackbar 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. Moreover, when the specified time completed, it will be disappeared from the screen. By default, snack bar displays at the bottom of the screen. Therefore, it is an excellent way to give feedback to users. Flutter snack bar also contains some actions that allow the user to undo or redo any action. Usually, the snack bar is used with the scaffold widget.

SnackBar Properties

The following are the important properties of the snack bar used in the Flutter:

Attribute NamesDescriptions
contentIt is the main content of the snack bar, which is actually a text widget.
durationIt is used to specify how much time the snack bar should be displayed.
actionIt is used to take action when the user taps on the snack bar. It cannot be dismissed or cancel. We can only undo or redo in the snack bar.
elevationIt is z-coordinate where the snack bar is placed. It is used to control the shadow size below the snack bar.
shapeIt is used to customize the shape of a snack bar.
behaviorIt is used to set the location of the snack bar.
bagroundcolorIt specifies the background of the snack bar.
animationIt defines the exit and entrance of the snack bar.

The simple demo

If we have used the Flutter snack bar in the mobile app, it allows the users to get information about their actions in the app. We are going to learn how to add and show SnackBar in Flutter using the following steps:

  1. Create a project in the IDE you are using.
  2. Create a Scaffold Widget.
  3. Display a SnackBar Widget.
  4. Provide an optional action.

Step 1: Firstly, create a Flutter project in the IDE you are using and then open the project in Android Studio. After opening the project, we need to navigate to the lib folder and open the main.dart file.

Step 2: Secondly, create a Scaffold widget responsible for the visual structure and ensure the essential widgets do not overlap.

Scaffold(  
  appBar: AppBar(  
    title: Text(' SnackBar Example'),  
  ),  
  body: SnackBarPage(),  
);  

Step 3: Next, we need to display a Flutter SnackBar. So, create a snack bar in the Scaffold widget as given below:

final snackBar = SnackBar(content: Text(' Hey! I am a SnackBar message.'));  

  

// Here, we will use the scaffold widget to show a snack bar.  
Scaffold.of(context).showSnackBar(snackBar);  

Step 4: Next, we can add some action to the snack bar. For example, suppose the user accidentally deletes a message or sent a mail, then we can provide an optional action in the snack bar to recover those messages. The below demo code explains it more clearly:

final snackBar = SnackBar(  
  content: Text(' Hey! I am a SnackBar message.'),  
  action: SnackBarAction(  
    label: 'Undo',  
    onPressed: () {  
      // Write your code to undo the change.  
    },  
  ),  
);  

Let us see the complete code of the above steps. Open the main.dart file and replace the following code. This code contains a button, and when the user taps on this, it will display the Flutter snackbar message. It also contains actions to undo or redo the changes.

import 'package:flutter/material.dart';  
void main() {runApp(MyApp());}  

  

class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      theme: new ThemeData(  
        primaryColor: const Color(0xFF43a047),  
        accentColor: const Color(0xFFffcc00),  
        primaryColorBrightness: Brightness.dark,  
      ),  
      home: Scaffold(  
        appBar: AppBar(  
          title: Text('Flutter SnackBar Demo'),  
        ),  
        body: SnackBarPage(),  
      ),  
    );  
  }  
}  
class SnackBarPage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Center(  
      child: RaisedButton(  
        child: Text('Show SnackBar', style: TextStyle(fontSize: 25.0),),  
        textColor: Colors.white,  
        color: Colors.redAccent,  
        padding: EdgeInsets.all(8.0),  
        splashColor: Colors.grey,  
        onPressed: () {  
          final snackBar = SnackBar(  
            content: Text('Hey! This is a SnackBar message.'),  
            duration: Duration(seconds: 5),  
            action: SnackBarAction(  
              label: 'Undo',  
              onPressed: () {  
                // Some code to undo the change.  
              },  
            ),  
          );  
          Scaffold.of(context).showSnackBar(snackBar);  
        },  
      ),  
    );  
  }  
}  

Output:

When we run this app, it will show the UI of the screen as below screenshot.

Flutter Snackbar

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. See the below screenshot:

Flutter Snackbar

To sum up with Flutter Snackbar

Most important, we see the future of Flutter in bright colors. Just be aware that the framework still has some issues. However, they are mostly related to the immaturity of the technology and are likely to become less cumbersome in the future.

Above all, we – ArrowHiTech is proud to be one of the most well-established outsourcing companies all around the world. With over 12 years of experience, we can provide the Flutter development services for your business.

AHT
ArrowHiTech services and products

So, If you have any questions, don’t hesitate to contact us !

Tags

Share