Customised banner

The Banner Widget is a widget that allows us to display a diagonal message in the corner of another widget. It is useful for showing the execution mode of an app (for example, if asserts are enabled). It is similar to the debug banner we see in the top right corner of a Flutter app in debug mode.

By default Flutter projects using MaterialApp have a default banner showing debug mode, which can be removed by adding debugShowCheckedModeBanner: false.

To implement the banner Widget, we need to use the Banner class that comes integrated with the Flutter API. The constructor of this class has the following parameters:

child: the widget we want to display behind the banner.
message: the message we want to display in the banner.
location: the location of the banner (can be topStart, topEnd, bottomStart or bottomEnd).

Some optional parameters are:

color: the background colour of the banner.
textStyle: the style of the message text.

In case you need to read from right to left, you can use these other optional parameters:

textDirection: the address of the message text (can be ltr or rtl).
layoutDirection: the layout address of the child widget (can be ltr or rtl).

Here is an example of how to use the Banner Widget:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Banner(
        location: BannerLocation.topStart,
        message: 'STAGING',
        child: Scaffold(
          appBar: AppBar(title: Text('Debug Banner')),
          body: Center(child: Text('Example')),
        ),
      ),
    ),
  );
}

The Banner Widget is important because it helps us to know in which environment our application is running. For example, we can use it to show if our app is in debug, release or profile mode. This can be useful for debugging bugs, optimising performance or testing.

In addition, the Banner Widget can also be used to display offers, promotions or important notices to our users. For example, we can use it to display a special discount, an available update or a security alert.

Customised banner

Comments

Flutter

Null-safety

More from this blog

The 3 mistakes Vint Cerf made in TCP/IP

EnvBanner

Create a blog or online portfolio

Null-safety

Command Palette

Comments

Flutter

Null-safety

More from this blog