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.








Comments

Popular posts from this blog

Flutter: DatePicker Tutorial both with Material and Cupertino Style

Introduction DatePicker is very important when you want the user to pick his / her date of birth or something else. In Flutter, implementing DatePicker is very easy and we will implement DatePicker in both Android or Material style and Cupertino or IOS style.  Table of contents Approach Project Setup Material Style DatePicker Cupertino Style DatePicker Conclusion Approach Flutter has widgets for everything and even for DatePicker. DatePicker widget is loaded with all needed animation and colours. So implementation is very easy.  Project Setup No extra plugins are required for this project and you can continue with your existing project. Here is the starting code. class DatePickerTutorial extends StatefulWidget { const DatePickerTutorial({Key? key}) : super (key: key); @ override _DatePickerTutorialState createState() => _DatePickerTutorialState(); } class _DatePickerTutorialState extends State...

Flutter: How to make Flip-Card animation in flutter. Flip card animation tutorial.

In this tutorial, we will learn to create Flip Card animation in Flutter. We will be using a package called flip_card for this tutorial.  Contents: Create a project Import dependencies Logic code Design of app Result