[Solved] How To Easily Customize Material Flutter Banner

In this tutorial, we’ll learn how to properly use and customize material Flutter banner. First we’ll see what Flutter banner is and after that, we’ll implement and customize it practically in our Flutter code.

After reading this post, you’ll have a detailed practical knowledge of how to use and modify material Flutter banner widget.

Introduction: Material Flutter Banner Widget

Banner in Flutter is used to show some data. It can be used to show notifications or custom actions that needs to be triggered. By default, its shown in the top position of screen.

In our example, we’ll use a Flutter material button widget and inside its onPressed function, we’ll implement Flutter material banner so it’s shown on our app whenever the button is clicked.

Let’s not wait anymore and understand it practically using a proper code example.

Implementing Flutter Material Banner

First we need something that will trigger Flutter banner. In our case, we are using Flutter material button. See below code:

MaterialButton(
         onPressed: () {
                // write flutter material banner code here
                },
                textColor: Colors.white,
                color: Colors.blue,
                child: Text('Show Banner'),
              )

Above code shows that we’ve specified a simple button. Now in its onPressed function, we’ll specify the code for Flutter material banner. See below code:

 ScaffoldMessenger.of(context).showMaterialBanner(
                    MaterialBanner(
                       content: Text('This is a material banner'),
                       actions: [
                        MaterialButton(
                          onPressed: () {
                            ScaffoldMessenger.of(context)
                                .clearMaterialBanners();
                          },
                          child: Text('Done'),
                        )
                      ]));

We can see that Flutter material banner has two required constructors. These are listed below:

Content
Actions

Content – It takes a Flutter widget so we can pass it a widget of our choice. For demonstration, we’ve passed it a Flutter text widget.

Actions – It takes a list of Flutter widgets. For simplicity, we’ve just passed one Flutter widget and that is a material button. Whenever we click that button, the banner will hide.

flutter banner

For demonstration, we’ve clicked the material button and it shows Flutter material banner on top of screen. It’ll remain there until we close it by clicking the button specified within that banner. We can close that banner from somewhere else as well. We just need to specify the closing banner code there.

Customizing Flutter Material Banner

Let’s now modify Flutter banner design using its constructors.

Background Color

We’ve to use the background color constructor of Flutter material banner widget to change its background color. See below code:

backgroundColor: Colors.black.withOpacity(.5)

flutter material banner background color

Content Text Style

We can change the text style of content text using the content text style constructor. See below code:

flutter material banner content text style

contentTextStyle: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                          fontSize: 18)

Or we can use the style constructor of text widget directly. See below code:

Text('This is a material banner',
               style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 18))

Elevation

The elevation constructor is used to give Flutter material banner an elevated effect. It take a double(decimal) value but we can also pass it an integer value. See below code:

elevation: 5

Leading

Leading constructor takes a widget. So for demonstration, we’ve passed it a Flutter icon widget with custom color and size. See below code:

leading: Icon(
                Icons.notifications,
                color: Colors.white,
                size: 17,
              )

Leading Padding

We can give leading widget a padding as well. See below code:

leadingPadding: EdgeInsets.all(10)

Click here if you want to learn padding in detail.

On Visible

The on visible constructor takes a function which is triggered whenever the Flutter banner is shown on the screen. For demonstration, we’ve specified a Flutter snackbar widget in it. Now whenever the material button is clicked, it’ll show Flutter material banner(if not already on screen) which in return will trigger the on visible function. As a result, Flutter snackbar widget will be shown on the screen. See below code:

onVisible: () {
           ScaffoldMessenger.of(context)
               .showSnackBar(SnackBar(content: Text('Banner is visible now')));
              },

Padding

The padding constructor is used to give padding within Flutter material banner. See below code:

padding: EdgeInsets.all(10)

Click here if you want to learn Flutter padding with practical Flutter code examples.

Force Action Below

This constructor takes a Boolean(true/false) value. By default, its false. Making it true will show the actions in the bottom right position(below content widget). See below code:

forceActionsBelow: true

flutter material banner force actions below

Now here’s your task, we want you to learn about animation and overflow alignment constructor and share your experience in the comment section. We’d love to add it to our article.

So this is how we can use and customize material Flutter banner widget. Hope you like this article.

Do give it a try and ask if you still have any questions related to the customization of Flutter material banner. We’ll be very delighted to answer all.

Below section includes the complete source code of custom material Flutter banner widget.

Customized Flutter Material Banner Source Code

flutter material banner force actions below

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  const Homepage({Key? key}) : super(key: key);
  @override
  State<Homepage> createState() => _HomepageState();
}
// implementing flutter banner
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
      child: MaterialButton(
        onPressed: () {
          // flutter material banner implementation
          ScaffoldMessenger.of(context).showMaterialBanner(MaterialBanner(
              backgroundColor: Colors.black.withOpacity(.5),
              content: Text(
                'This is a material banner',
              ),
              elevation: 5,
              leading: Icon(
                Icons.notifications,
                color: Colors.white,
                size: 17,
              ),
              leadingPadding: EdgeInsets.all(10),
              onVisible: () {
                ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Banner is visible now')));
              },
              padding: EdgeInsets.all(10),
              forceActionsBelow: true,
              contentTextStyle: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                  fontSize: 18),
              actions: [
                MaterialButton(
                  onPressed: () {
                    ScaffoldMessenger.of(context).clearMaterialBanners();
                  },
                  textColor: Colors.white,
                  child: Text('Done'),
                )
              ]));
        },
        textColor: Colors.white,
        color: Colors.blue,
        child: Text('Show Banner'),
      ),
    )));
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to properly use and customize material Flutter banner widget. We’d love to have your feedback on this post.

We’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.