Skip to main content

Flutter | Material Banner Tutorial

In this tutorial, we will create and display Material Banner in Flutter. Material Banners are displayed at the top of the screen. User interaction is required to dismiss the banner.

Material Banner

Material Banner alerts the user about action and provides some actions for the user to take. In brief, it alerts the user about an issue and the user address the issue. The user should dismiss the banner to remove it from the screen else it will be active.

Syntax 

ScaffoldMessenger.of(context).showMaterialBanner(MaterialBanner(content: content, actions: actions))

Code

Here is our starting class. It is a stateless class and we will display a banner when the Button is pressed. 
class SnackBarTutorial extends StatelessWidget {
  const SnackBarTutorial({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Material Banner"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {},
              child: const Text("Show Material Banner"),
            )
          ],
        ),
      ),
    );
  }
}

Inside the onPressed() function of the ElevatedButton, add the following code. 
ScaffoldMessenger.of(context).showMaterialBanner(
  MaterialBanner(
    backgroundColor: Colors.amberAccent,
    content: const Text("This is a Material Banner"),
    actions: [
      ElevatedButton(
        onPressed: () {
          ScaffoldMessenger.of(context)
              .removeCurrentMaterialBanner();
        },
        child: const Text("Dismiss"),
      ),
    ],
  ),
);

Run the code. The Material Banner will look as follows.

Here is the full code.
class SnackBarTutorial extends StatelessWidget {
  const SnackBarTutorial({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Material Banner"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                ScaffoldMessenger.of(context).showMaterialBanner(
                  MaterialBanner(
                    backgroundColor: Colors.amberAccent,
                    content: const Text("This is a Material Banner"),
                    actions: [
                      ElevatedButton(
                        onPressed: () {
                          ScaffoldMessenger.of(context)
                              .removeCurrentMaterialBanner();
                        },
                        child: const Text("Dismiss"),
                      ),
                    ],
                  ),
                );
              },
              child: const Text("Show Material Banner"),
            )
          ],
        ),
      ),
    );
  }
}

Summary

We have created a Material Banner in Flutter using the ScaffoldMessenger. Then we also dismissed it using .removeCurrentMaterialBanner() function of ScaffoldMessenger.








Labels:

Comments

Post a Comment

If you have any problem or doubt please comment.

Popular posts from this blog

Animated Navigation in Flutter

  Introduction By default, Flutter has no animation when navigating from one Screen to another Screen. But in this tutorial, we are going to learn how to animate the Screen Transition.   Introduction By default, Flutter has no animation when navigating from one Screen to another Screen. But in this tutorial, we are going to learn how to animate the Screen Transition. Table of Contents Project Setup Code Result Project Setup Before directly applying to your existing project, practice the code in some example projects. For this tutorial, we are going to name our project screen_animation_tutorial. Open in VSCode or Android Studio. After that, we will make two Screens. The first Screen will be the Starting screen and the next Screen will be the Final Screen. So go ahead and create two dart files under the lib folder. The main.dart file code should look like this Dart import 'package:flutter/material.dart'; import 'package:screen_animation_tutorial/start_screen.dart'; void ...
Post a Comment
Read more

How to create Snackbars in Flutter | Snackbar Tutorial

In this article, we will create and display different types of SnackBars in Flutter.  SnackBars in Flutter SnackBars are used to briefly display some information or inform the user about an action. For instance, when a user deletes a mail or message you may want to inform the user about the action. Also, the user can undo the action he performed by the undo button in the Snackbar . Syntax For creating a SnackBar, we use the following code. ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: content)); Inside the content field of SnackBar, we will pass the content. Any content can be passed inside it, but in practice, small messages with or without a button. Example Simple SnackBar class SnackBarTutorial extends StatelessWidget {   const SnackBarTutorial({Key? key}) : super (key: key);   @override   Widget build(BuildContext context) { ...
Post a Comment
Read more

Flutter: DraggableScrollableSheet widget Tutorial

Introduction In this tutorial, we are going to learn about the DraggableScrollableSheet widget. It is a widget that responds to user gestures. When the user drags from the bottom of the screen in the upward direction, the widget opens up and when scrolls down the widget close. The final app will look as follows  Final App DraggableScrollableSheet It is a widget that scrolls up and down of the viewport or screen according to the user's screen gestures. This widget becomes handy when you want to give some extra details which are lengthy content but don't want to navigate to a new screen. You might have come across many apps that implement the same thing. So let us learn to implement DraggableScrollableSheet in our own app. Approach The approach of our project is very simple. In our app, we are going to display some names of countries with the help of the  ListView.builder  and Li...
Post a Comment
Read more