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 Widgetand name it asBannerScreenand addMaterialBannerto thecolumnof the Screen.MaterialBanner has two
@requiredproperties those arecontentandactions.contentis the place where you add your message/context for the Banner.actionswe 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
showBannerproperty that manages the appearance of the banner.
if(showBanner)
MaterialBanner(...)
Write this
ifcondition before banner, which shows banner only whenshowBanneristruewe have declared a property but we didn't implement to change the property.
Toggle Banner
void _toggleBanner() {
setState(() {
showBanner = !showBanner;
});
}
_toggleBanneris a private function that changes the value of theshowBannerproperty according to the context.Add this function to the
DismissButton andToggle BannerButton.Implement custom code for the other button in
MaterialBanneractionswhich 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)