What is the Material Banner widget is in Flutter?

A banner displays an important message and asks the user to perform some action. So, in this article, we will see what is Material Banner widget is in Flutter.

What is the Material Banner widget is in Flutter?

Banner is displayed at top of the screen below appbar. They are persistent, 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. One with dismiss action button on the left and other confirming action button on right.

Now let’s see how to implement the material banner widget in a flutter app:

Step 1:

Check the flutter version by going to the terminal and run the command flutter –version. We did this because 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. After that 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.

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')),

])
);
}
}

Explanation:

So, to create a banner we have created an elevated button. And that elevated button calls the method called showMaterialBanner().
Also, In this showMaterialBanner() method, we have called the material banner using scaffold messenger. It will use the material banner feature.
After calling the feature we had implemented the properties that the material banner contains. So, the properties are – content, background color, leading icon, action buttons, and padding.
So, 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.

Step 3:

So, now you had to give functionality to your action button if you want to get dismiss our material banner from the top. So in our dismiss action button we gave the property to our onPressed method: hideCurrentMaterialBanner.

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')),

])
);
}
}

Conclusion:

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen what is Material Banner widget is in Flutter. Also, feel free to comment and provide any other suggestions regarding Flutter.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. Also, the portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.