Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Flutter – Banner Widget

  • Difficulty Level : Hard
  • Last Updated : 12 Oct, 2021

Banner widget comes built-in with flutter API. It is somewhat similar to the debug banner what we are used to of 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 TexStyle class as the object.



import 'package:flutter/material.dart';
//Material design library
void main() {
    //widget tree starts here
      home: Scaffold(
        appBar: AppBar(
          title: 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,
                child: Container(
                  height: 300,
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(10, 20, 10, 20),
                    child: Column(
                      children: <Widget>[
                            ''), //
                        SizedBox(height: 10),
                          style: TextStyle(
                              fontSize: 40,
                              fontWeight: FontWeight.bold), //TextStyle
                          height: 5,
                        ), //SizedBox
                          'Fork Python Course',
                          style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.bold), //TextStyle
                        ), //Text
                        SizedBox(height: 20),
                          child: Text('Register'),
                          color: Colors.greenAccent[400],
                          onPressed: () {},
                        ) //RaisedButton
                      ], //<Widget>[]
                    ), //Column
                  ), //Padding
                ), //Container
              ), //Banner
            ), //ClipRect
          ), //container
        ), //Center
      ), //Scaffold
    ), //MaterialApp


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 to 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. 

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!