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

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

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

Flutter : Screen Animation tutorial

In this tutorial, we will learn how to perform animations while navigating from one screen to another. We will not require any other dependency to be installed. We will demonstrate the following example. So let's start. Approach Instead of using the default MaterialPageRoute, we will use the PageRouteBuilder. PageRouteBuilder provides all the functionalities like duration, type of animation. Syntax The syntax for PageRouteBuilder is as follows. PageRouteBuilder( transitionDuration: const Duration( seconds: 1 ), pageBuilder: (context, animation, secondaryAnimation) { return const SecondScreen(); }, ), The parameters and fields are self-explanatory. Code Let us code our First Screen of the app. class FirstScreen extends StatelessWidget { const FirstScreen({Key ? key}) : super ( key: key); @ override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text( "First...
1 comment
Read more