flutter-tutorial

Flutter SnackBar

In Flutter, a snackbar is a widget that displays a lightweight message that alerts the user when certain activities occur. It shows the message for a very short time before disappearing from the screen after the stated time has passed. The snack bar appears at the bottom of the screen by default. It’s a fantastic approach to provide users feedback. It also has various actions that allow the user to undo or redo any action they have taken. The snack bar is usually used in conjunction with the scaffold widget.

Creating a SnackBar

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

  • Create a project in the IDE you are using.
  • Create a Scaffold Widget.
  • Display a SnackBar Widget.
  • Provide an optional action.

Step 1

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

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 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.  
    },  
  ),  
);  

Example

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('Learn Code Zone'),
        ),
        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);
        },
      ),
    );
  }
}

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *