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.

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.