Banners 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.
What is a Banner
A banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires user action to be dismissed.
source: Material.io
Let's Build a Banner like this
This is actually what we going to make by the end of this article. Load up your energy and let's get started.
Material Banner
class BannerScreen extends StatefulWidget {
@override
_BannerScreenState createState() => _BannerScreenState();
}
class _BannerScreenState extends State<BannerScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: kPrimaryColor,
title: Text("Material Banner"),
centerTitle: false,
),
body: SafeArea(
child: Column(
children: [
MaterialBanner(
leading: CircleAvatar(
backgroundColor: kPrimaryColor,
child: Icon(
Icons.subscriptions,
color: Colors.white,
),
),
content: Padding(
padding: const EdgeInsets.all(4.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('WEEKLY RUNDOWN:',style: kHeadlineLabelStyle),
Padding(
padding: const EdgeInsets.only(top: 4.0),
child: Text('''
The case for a six-hour workday, An office model that suits everyone?, and other top news for you''',
style: kBodyTextStyle.copyWith(color: Colors.black)),
),
],
),
),
actions: [
FlatButton(
child: Text(
'DISMISS',
style: kActionTextStyle,
),
onPressed: () {
// Dissmiss Function
},
),
FlatButton(
child: Text('VIEW', style: kActionTextStyle),
onPressed: () {
// Custom implemention according to the banner.
},
),
],
),
Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FlatButton(
onPressed: () {
// Dissmiss Function
},
child: Text(
'Toggle Banner',
style: kActionTextStyle,
),
),
],
),
Spacer(),
],
)),
);
}
}
Create a
Stateful Widget
and name it asBannerScreen
and addMaterialBanner
to thecolumn
of the Screen.MaterialBanner has two
@required
properties those arecontent
andactions
.content
is the place where you add your message/context for the Banner.actions
we add buttons here one the them will be for dismissing the banner and other is an detail action related to banner.
Manage Banner State
bool showBanner = false;
- Declare a
showBanner
property that manages the appearance of the banner.
if(showBanner)
MaterialBanner(...)
Write this
if
condition before banner, which shows banner only whenshowBanner
istrue
we have declared a property but we didn't implement to change the property.
Toggle Banner
void _toggleBanner() {
setState(() {
showBanner = !showBanner;
});
}
_toggleBanner
is a private function that changes the value of theshowBanner
property according to the context.Add this function to the
Dismiss
Button andToggle Banner
Button.Implement custom code for the other button in
MaterialBanner
actions
which acts to the context of the banner.
Conclusion
Use Banner when it's necessary that you want to convey an important message to the user otherwise, use notifications.
If you like to improve your App Development Skills, even more in Flutter and SwiftUI. Feel free to dm me on Instagram or tweet to me on Twitter if you have any additional tips or feedback.
Thanks for reading!
Top comments (0)