What is material design banner in Flutter

Let us clear a confusion before we proceed. There is a distinct difference between MaterialBanner widget and Banner Widget. In this section, we’ll learn what is MaterialBanner widget and how we can use it.

Let us first try to understand why we do we need a Banner in our Flutter App?

We need it because a banner displays an important, succinct message. And, besides, a banner provides actions for users either to use this banner, or dismiss the banner.

Therefore, the primary function of a banner is to attract attention to some succinct message that we want to display on the top of the home page.

How would we like to use it?

Well, it depends on our Flutter applications’s functionality.

The user can just delete it. Or move to another page from here.

Let us take a look how we can use this Material Banner and how does it look like.

As we can guess, we should place the banner below the AppBar, and at the top of the screen that starts the Widget tree.

Another important thing to remember, we must place only one banner at a time.

There are a few other rules too. We must place the actions beside the content if there is only one. We can see that in the above screenshot.

Otherwise, we can place the actions below the content.

If we plan to place the actions below the content, we must use Row widget to place them. Now, it entirely depends on the design of our Flutter app where we should lay out the actions, we can use a Column widget instead.

However, we must provide the actions and content. 

Consequently, we can customise the theme of the Banner. In our case, we use a custom global theme that uses Pink color to provide a consistent look to our Material design banner.

Last but not the least, the MaterialBanner widget widget is unrelated to the widgets library Banner widget.

Let us see the code now to understand how the MaterialBanner widget works.

import 'package:flutter/material.dart';
import 'package:flutter_artisan/models/global_pink_theme.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    /// Providers are above [Root App] instead of inside it, so that tests
    /// can use [Root App] while mocking the providers
    MultiProvider(
      providers: [
        Provider<GlobalPinkTheme>(
          create: (context) => GlobalPinkTheme(),
        )
      ],
      child: const MaterialBannerHome(),
    ),
  );
}

We have used a global pink ThemeData model class, and we’ve also used Provider package to to provide the custom ThemeData object at the root of the Material App widget.

As a result, we can pass the custom theme across the whole Flutter application.

class MaterialBannerHome extends StatelessWidget {
  const MaterialBannerHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final ThemeData globalTheme =
        Provider.of<GlobalPinkTheme>(context).globalTheme;
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(),
      theme: globalTheme,
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Banners',
          style: Theme.of(context).appBarTheme.titleTextStyle,
        ),
      ),
      body: MaterialBanner(
        content: Text(
          'Ignore or Proceed',
          style: Theme.of(context).textTheme.headline1,
        ),
        leading: const CircleAvatar(child: Icon(Icons.delete)),
        actions: [
          TextButton(
            child: Text(
              'Page 1',
              style: Theme.of(context).textTheme.headline2,
            ),
            onPressed: () {},
          ),
          TextButton(
            child: Text(
              'Page 2',
              style: Theme.of(context).textTheme.headline2,
            ),
            onPressed: () {},
          ),
        ],
      ),
    );
  }
}

To see how we’ve used the custom ThemeData model class, you may take a look at the whole code snippet at the respective GitHub Repository.

By the way, before we conclude, let us know another important rule about MaterialBanner widget. The three parameters of MaterialBanner widget, actions, content, and forceActionsBelow must not be null. Moreover, the actions.length must be greater than 0.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter