The flutter API has a banner widget. It’s similar to the debug banner that appears in the top-right corner of a flutter app while it’s in debug mode. It allows us to display a message or text over any other widget. We’ll look at how it’s done with the help of an example, as well as all of its attributes.

Banner Widget’s properties are as follows:

• child: To place a widget in the banner, this property accepts a widget as the object.
• colour: This property uses the Color class as the object to assign a backdrop colour to the banner.
• layoutDirection: This property uses the TextDirection class to define the direction in which the child widgets in the Banner widget will be placed.
• location:  The BannerLocation enum is used as the object for this attribute, which regulates the banner’s placement.
• message: To determine the text to be displayed in the banner, this property accepts a String value as the object.
• textDirection: This property uses the TextDirection object to determine the text’s direction, which can be either rtl or ltr.
• textStyle: The text styling in the Banner widget is controlled by this property. As the object, it accepts the TexStyle class.

Example:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  static const String _title = 'Learn Code Zone';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Container(
      padding: const EdgeInsets.all(10),
      child: Banner(
        message: 'Best',
        location: BannerLocation.topStart,
        child: Container(
          height: 200,
          width: 200,
          color: Colors.yellow,
          alignment: Alignment.center,
          child: const Text('Flutter Course'),
        ),
      ),
    ));
  }
}