Flutter – Material Banner Widget

Last Updated : 28 Nov, 2022

In this article, we will learn about a new feature called Material Banner which is a new feature in flutter and got released in flutter version 2.5.0.

What is Material Banner?

A banner displays an important message and asks the user to perform some action. Banner is displayed at top of the screen below appbar. They are persistent, thus allowing users to ignore them or perform some action.

Points to Keep in mind:

A banner container is rectangular in shape and extends the full widget.
This container has a leading icon, text, and action buttons.
A banner can contain two text buttons with dismiss action button on the left and confirming action button on right.

Now let’s see how the material banner widget is implemented in a flutter app:

Step 1: Check the flutter version by going to the terminal and run the command flutter –version. The reason to do this is that the material banner widget is introduced in version 2.5.0 so to use this widget we need the latest version.

If your version is below 2.5.0 then go to the terminal and run the command flutter upgrade. Your flutter version will get updated.

Step 2: Now let’s see how to use this feature by directly switching to our code editors.

Dart

import 'package:flutter/material.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
   
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key,}) : super(key: key);
 
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
   
 
  @override
  Widget build(BuildContext context) {
     
    return Scaffold(
      appBar: AppBar(
         
        title: const Text('GeeksforGeeks'),
        centerTitle: true,
      ),
      body: Center(
         
        child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
          children:  [
            ElevatedButton(onPressed: () => showMaterialBanner(),
                           child: const Text('Material Banner'))
             
          ],
        ),
      ),
        
    );
    }
    // Material Banner implementation
    showMaterialBanner(){
       ScaffoldMessenger.of(context).showMaterialBanner(
         MaterialBanner(
          content: const Text('Hello, I am Material Banner!'), 
         contentTextStyle: const TextStyle(color: Colors.black ,fontSize: 30),
         backgroundColor: Colors.yellow,
         leadingPadding: const EdgeInsets.only(right: 30),
         leading: const Icon(Icons.info, size: 32,),
         actions:[
           TextButton(onPressed: () {},
            
           child: const Text('Dismiss')),
 
           TextButton(onPressed: (){}, child: const Text('Continue')),
 
            
         ])
         );
    }
}

Output:

Explanation:

To create a banner we have created an elevated button and that elevated button calls the method called showMaterialBanner().
In this showMaterialBanner() method, we have called the material banner using scaffold messenger to use the material banner feature.

After calling the feature we had implemented the properties that the material banner contains like – content, background color, leading icon, action buttons, and padding.
As we run the program we see that as we click on the Material Banner button we see a material banner on the top in yellow color.

Step3: Now if we want to get dismiss our material banner from the top then we had to give functionality to our action button. So in our dismiss action button we gave the property to our onPressed method: hideCurrentMaterialBanner.

Complete Source Code:

Dart

import 'package:flutter/material.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
   
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key,}) : super(key: key);
 
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
   
 
  @override
  Widget build(BuildContext context) {
     
    return Scaffold(
      appBar: AppBar(
         
        title: const Text('GeeksforGeeks'),
        centerTitle: true,
      ),
      body: Center(
         
        child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
          children:  [
            ElevatedButton(onPressed: () => showMaterialBanner(),
                           child: const Text('Material Banner'))
             
          ],
        ),
      ),
        
    );
    }
    showMaterialBanner(){
       ScaffoldMessenger.of(context).showMaterialBanner(
         MaterialBanner(
          content: const Text('Hello, I am Material Banner!'), 
         contentTextStyle: const TextStyle(color: Colors.black ,fontSize: 30),
         backgroundColor: Colors.yellow,
         leadingPadding: const EdgeInsets.only(right: 30),
         leading: const Icon(Icons.info, size: 32,),
         actions:[
           TextButton(onPressed: () => ScaffoldMessenger.of(context).hideCurrentMaterialBanner(),
            
           child: const Text('Dismiss')),
 
           TextButton(onPressed: (){}, child: const Text('Continue')),
 
            
         ])
         );
    }
}

Output:

Explanation:

As we click on the Material Banner button we see a material banner on top.
To remove that banner we click on dismiss button and the banner gets dismissed from the top.