-1.6 C
New York
Thursday, February 2, 2023

Using the Banner widget in Flutter

In Flutter, the Banner widget is used to display a diagonal message above one corner of another widget. This is useful in many situations, such as when you want to assign a discount label to a product, highlight a new feature (banner with a “new” word), etc.

Example

Screenshot:

The code:

Scaffold(
      appBar: AppBar(
        title: const Text('Kindacode.com'),
      ),
      body: Center(
        child: Container(
          width: 300,
          height: 300,
          color: Colors.amber,
          child: const Banner(
              message: "Have a nice day!", 
              location: BannerLocation.topEnd
          ),
        ),
      ),
);

Constructor

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

Advertisements

Reference: Banner class (flutter.dev)

Further reading:

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles