Flutter – Material Banner Widget

22 Sep, 2021
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.
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 messanger 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.
Blogathon-2021
Flutter UI-components
Flutter-widgets
Blogathon
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Import JSON Data into SQL Server?
SQL Query to Convert Datetime to Date
Python program to convert XML to Dictionary
Scrape LinkedIn Using Selenium And Beautiful Soup in Python
Modes of DMA Transfer
Flutter - DropDownButton Widget
Listview.builder in Flutter
Flutter - Custom Bottom Navigation Bar
Splash Screen in Flutter
Flutter - Asset Image