Google, the search giant recently rolled out the new stable version of its Extensive Popular Cross-Platform UI Framework Flutter. Flutter 2.5 is out with 4600 closed issues and 3932 merged PRs. Flutter is release proceeds with a few significant performance and tooling improvements to find performance issues in your application.
MaterialBanner support to the ScaffoldMessenger. You may remember the ScaffoldMessenger from the Flutter 2.0 release announcement as a more robust way to show Snackbar at the bottom of the screen to provide users with notifications. In Flutter 2.5, you can now add a banner to the top of your scaffold that stays in place until the user dismisses it.
In this article, we will explore How to show a banner at the top of a screen in Flutter Applications. We will also implement a demo program that helps you to understand.
Table Of Contents::
Introduction:
The banner should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.
A Material Design banner is a banner that displays an important, sufficient message, and provides actions for users to address (or dismiss the banner). A user action is required for it to be dismissed.
Demo:
Properties:
- content: This property takes in a Text Widget as the object to show messages to the users in the banner.
- leading: Show an image logo or Icons about the banner information eg: info, warning, success.
- backgroundColor: Gives color to Material Banner.
- actions(mandatory): It accepts an array of the widget when the user can interact to perform some event.
- padding: The amount of space by which to insert the content.
- forceActionBelow: If this is true, the actions will be placed below the content. If this is false, the actions will be placed on the trailing side of the content if the actions’ length is 1 and below the content if greater than 1.
- contentTextStyle: This property is responsible for the styling of content text in the Material Banner widget. It takes in TexStyle class as the object.
Code Implement:
How to implement code in dart file :
If your flutter version is not upgraded first you need to update the flutter version, To update your flutter SDK version to 2.5 you just need to run a command on a Command Prompt or IDE Terminal.
flutter upgradeCreate a new dart file called home_screen.dart inside the lib folder to design the user interface and make sure we need to create a StatefulWidget.
class HomeScreen extends StatefulWidget {
HomeScreen({Key? key, required this.title}) : super(key: key);
final String title;
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
//Write your code inside...
}In the body, I wrap the Elevated button and Text widget inside the column widget, and Material Banner is shown on the click event of the button. When the elevated button is pressed user defines method _showMaterialBanner is called which returns MaterialBanner.
MaterialBanner _showMaterialBanner(BuildContext context) {
return MaterialBanner(
//Write your code to design material banner)Your app can get this behavior by calling the showMaterialBanner method of ScaffoldMessanger. The SnackBar API within the Scaffold is also handled by the ScaffoldMessanger, one of which is available by default within the context of a MaterialApp.
ElevatedButton(
child: const Text('Show MaterialBanner'),
onPressed: () => ScaffoldMessenger.of(context).showMaterialBanner(
//Wrap MaterialBanner Widget inside.);The Flutter Material Banner according to its guidelines, The state of Banner should show only once to the user. If showMaterialBanner is called more than one time, then ScaffordMessenger will maintain a queue for the next banner to be shown.
Therefore when the previous banner(current active banner) is dismissed then-new banner that is in the queue will be shown. To do that we just need to call ..removeCurrentMaterialBanner() before invoking the new Material Banner in a flutter.
ScaffoldMessenger.of(context)
..removeCurrentMaterialBanner()
..showMaterialBanner(_showMaterialBanner(context));In MaterialBanner we can add content, leading, background colors, padding, and actions and you can also style the content using property contentTextStyle. MaterialBanner comes with multiple properties
In order to add content with style to the material banner, we need to do
content: Text('Hello, I am a Material Banner'),
contentTextStyle: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold, color: Colors.indigo),In order to add Background color to the material banner, we need to do
backgroundColor: Colors.lightGreenAccent,In order to add Icon at the leading position to material banner, we need to write
leading: Icon(Icons.error),The set of actions that are displayed at the bottom or trailing side of the MaterialBanner. It accepts an array of the widget when the user can interact to perform some event.
actions: [
TextButton(
onPressed: () {},
child: Text(
'Agree',
style: TextStyle(color: Colors.purple),
),
),
TextButton(
onPressed: () {
ScaffoldMessenger.of(context).hideCurrentMaterialBanner();
},
child: Text(
'Cancel',
style: TextStyle(color: Colors.purple),
),
),
]Code File:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
HomeScreen({Key? key, required this.title}) : super(key: key);
final String title;
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> { MaterialBanner _showMaterialBanner(BuildContext context) {
return MaterialBanner(
content: Text('Hello, I am a Material Banner'),
leading: Icon(Icons.error),
padding: EdgeInsets.all(15),
backgroundColor: Colors.lightGreenAccent,
contentTextStyle: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold, color: Colors.indigo),
actions: [
TextButton(
onPressed: () {},
child: Text(
'Agree',
style: TextStyle(color: Colors.purple),
),
),
TextButton(
onPressed: () {
ScaffoldMessenger.of(context).hideCurrentMaterialBanner();
},
child: Text(
'Cancel',
style: TextStyle(color: Colors.purple),
),
),
]);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button to see MaterialBanner:',
style:
TextStyle(color: Colors.indigo, fontWeight: FontWeight.bold),
),
SizedBox(
height: 10,
),
ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context)
..removeCurrentMaterialBanner()
..showMaterialBanner(_showMaterialBanner(context));
},
child: Text(
'Click Here',
style: TextStyle(color: Colors.purple),
),
style: ElevatedButton.styleFrom(
primary: Colors.lightGreenAccent,
),
),
],
),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}Conclusion:
In the article, I have explained the MaterialBanner Widget basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to MaterialBanner Widget On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the MaterialBanner Widget in your flutter projects. We will show you what the MaterialBanner Widget is?. Some MaterialBanner widget properties, make a demo program for working MaterialBanner Widget. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
GitHub Link:
find the source code of the MaterialBanner :
GitHub – flutter-devs/MaterialBanner
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
