
Flutter Widget: MaterialBanner
As part of our Widget review and usage series, we'll be looking at the MaterialBanner Widget within Flutter.
This Widget should be used whenever there's a persistent action that a user should take. As this isn't a Modal
or SnackBar
the application can still be interacted with, however, the only way to hide this is when the user takes an action.
Video
Prefer watching a video instead? Check out the video for this article:
New Flutter Project
As always, we'll create a new Flutter project for our demonstration. Run the following in your terminal:
$ flutter create banner
$ cd banner
You can then open this up inside of an editor of your choice.
Creating our MaterialBanner
I've gone ahead and created a new page named HomePage
at lib/home.dart
with the following MaterialBanner
:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
final TextStyle whiteText = TextStyle(
color: Colors.white,
);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Material Banner"),
),
body: Column(
children: <Widget>[
MaterialBanner(
padding: const EdgeInsets.all(20),
contentTextStyle: whiteText,
content: Text(
"Your card has expired. Update your credit card information.",
),
leading: Icon(
Icons.credit_card,
color: Colors.white,
),
backgroundColor: Colors.indigo,
actions: <Widget>[
FlatButton(
child: Text("UPDATE", style: whiteText),
onPressed: () {},
),
FlatButton(
child: Text("DISMISS", style: whiteText),
onPressed: () {},
),
],
)
],
),
);
}
}
If we update lib/main.dart
with our HomePage
, we should be able to see our banner on screen.
import 'package:banner/home.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "MaterialBanner",
theme: ThemeData(
primarySwatch: Colors.blueGrey,
),
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
Show/hide the Banner
In order to hide the banner when we click DISMISS
, we'll need to have a bool
trigger which can be used to determine whether this should appear.
Let's make this a StatefulWidget
instead of a StatelessWidget
and use setState
. Prior to doing this, update your sdk
version to >=2.3.0
inside of pubspec.yaml
so that we can use if
statements inside of our build
function:
environment:
sdk: ">=2.3.0 <3.0.0"
Next up, we can add a _hideBanner
method to be ran whenever a user selects an action:
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final TextStyle whiteText = TextStyle(
color: Colors.white,
);
bool shouldShowBanner = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Material Banner"),
),
body: Column(
children: <Widget>[
if (shouldShowBanner)
MaterialBanner(
padding: const EdgeInsets.all(20),
contentTextStyle: whiteText,
content: Text(
"Your card has expired. Update your credit card information.",
),
leading: Icon(
Icons.credit_card,
color: Colors.white,
),
backgroundColor: Colors.indigo,
actions: <Widget>[
FlatButton(
child: Text("UPDATE", style: whiteText),
onPressed: _hideBanner,
),
FlatButton(
child: Text("DISMISS", style: whiteText),
onPressed: _hideBanner,
),
],
)
],
),
);
}
void _hideBanner() {
setState(() => shouldShowBanner = false);
}
}
If we select an action, our MaterialBanner
will be hidden from view like so:

Review
In this article we looked at how to use the MaterialBanner
widget inside of our Flutter applications. We created a basic banner that can be used to prompt user action and hidden/displayed based on a boolean value.
developer.school Newsletter
Join the newsletter to receive the latest updates in your inbox.