Flutter – Banner Widget

Banner widget comes built-in with flutter API. It is somewhat similar to the debug banner that we are used to seeing on the top-right corner on a flutter app in debug mode. It enables us to show a message or text on top of any other widget. Below we will see its implementation with the help of an example and all its properties.

Constructor of Banner class:

const Banner(
{Key key,
Widget child,
@required String message,
TextDirection textDirection,
@required BannerLocation location,
TextDirection layoutDirection,
Color color: _kColor,
TextStyle textStyle: _kTextStyle}
)

Properties of Banner Widget:

• child: This property takes in a widget as the object to place it in the banner.
• color: This property assigns a background color to the banner by taking in the Color class as the object.
• layoutDirection: This property takes in TextDirection class as the object the determiner the direction in which the child widgets will be placed in the Banner widget.
• location: This property controls the location of the banner by taking in the BannerLocation enum as the object.
• message: This property takes in a String value as the object to determine the text to be shown in the banner.
• textDirection: This property again takes in the TextDirection as the object to determine the direction of the text which can be either rtl to ltr.
• textStyle: This property is responsible for the styling of text in the Banner widget. It takes in TextStyle class as the object.

Example:

Dart

import 'package:flutter/material.dart';

//Material design library
void main() {
  runApp(
    //widget tree starts here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          centerTitle: true,
        ), //AppBar
        body: Center(
          child: Container(
            margin: const EdgeInsets.all(10.0),
            child: ClipRect(
              /** Banner Widget **/
              child: Banner(
                message: "20% off !!",
                location: BannerLocation.bottomStart,
                color: Colors.red,
                child: Container(
                  color: Colors.green[100],
                  height: 300,
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(10, 20, 10, 20),
                    child: Column(
                      children: <Widget>[
                        Image.network(
                            'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190806131525/forkPython.jpg'), //Image.network
                        const SizedBox(height: 10),
                        const Text(
                          'GeeksforGeeks',
                          style: TextStyle(
                              color: Colors.green,
                              fontSize: 40,
                              fontWeight: FontWeight.bold), //TextStyle
                        ),
                        const SizedBox(
                          height: 5,
                        ), //SizedBox
                        const Text(
                          'Fork Python Course',
                          style: TextStyle(
                              color: Colors.green,
                              fontSize: 20,
                              fontWeight: FontWeight.bold), //TextStyle
                        ), //Text
                        const SizedBox(height: 20),

                        // RaiseButton is deprecated and should not be used. Use ElevatedButton instead.

                        // RaisedButton(
                        // color: Colors.greenAccent[400],
                        // onPressed: () {},
                        // child: const Text('Register'),
                        // ) //RaisedButton
                      ], //<Widget>[]
                    ), //Column
                  ), //Padding
                ), //Container
              ), //Banner
            ), //ClipRect
          ), //container
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}

Output:

Explanation: In this flutter application the Banner widget is child of ClipRect class which clips off the part that exceeds the box. The message in the banner is holding the text ‘20% off !!’, the color is red and the location is set to bottomStart. The rest of the part is held by the child property of the Banner widget.  The hierarchy from Banner widget to Column is Banner > Container > Padding > Column. Inside the Column widget we have a list of widgets taken as the object the children property. The first element in the column is an image from internet then we have two Text widgets and a RaisedButton all separated by a SizedBox widget.