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.