Wed. Apr 17th, 2024

Flutter Banner widget displays a message box diagonally on the corner of its child widget.

Syntax

The syntax of a Center widget to center other widget is

Banner(
  message: 'New Arrival',
  location: BannerLocation.topStart,
  child: someWidget,
)

The message to be displayed in the banner is specified via message property, and the location of the banner on the child widget is specified via location property.

Example

In the following example, we create a Flutter Application with a Banner widget. Banner widget’s child is a Container widget with Text. We shall display the banner on the top left of the the child Container.

Main.Dart

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 = 'Flutter Tutorial';
 
  @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: 'New Arrival',
          location: BannerLocation.topStart,
          child: Container(
            height: 200,
            width: 200,
            color: Colors.yellow,
            alignment: Alignment.center,
            child: const Text('Some Item'),
          ),
        ),
      )
    );
  }
}

By Rajashekar

I’m (Rajashekar) a core Android developer with complimenting skills as a web developer from India. I cherish taking up complex problems and turning them into beautiful interfaces. My love for decrypting the logic and structure of coding keeps me pushing towards writing elegant and proficient code, whether it is Android, PHP, Flutter or any other platforms. You would find me involved in cuisines, reading, travelling during my leisure hours.

Leave a Reply

Your email address will not be published. Required fields are marked *