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:

• Using Chip widget in Flutter: Tutorial & Examples
• Flutter & Hive Database: CRUD Example
• Flutter and Firestore Database: CRUD example
• Flutter: Add a Search Field to an App Bar (2 Approaches)
• How to create a Filter/Search ListView in Flutter

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