mydomain
No ADS
No ADS

Flutter Banner Tutorial with Examples

  1. Flutter Banner
  2. Banner Example
  3. child
  4. message
  5. layoutDirection
  6. location
  7. color
  8. textStyle
  9. textDirection

1. Flutter Banner

In Flutter, Banner is a diagonal message displays on the surface and at the corner of another Widget. Banner is often used to decorate and highlight a message regarding the Widget.
Banner Constructor:
Banner Constructor
const Banner(
    {Key key,
    Widget child,
    @required String message,
    TextDirection textDirection,
    @required BannerLocation location,
    TextDirection layoutDirection,
    Color color: _kColor,
    TextStyle textStyle: _kTextStyle}
)

2. Banner Example

No ADS
main.dart (ex1)
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold (
        appBar: AppBar(
          title: Text("Banner Example"),
        ),
        body: Container(
          padding: EdgeInsets.all(16),
          child: Align(
            alignment: Alignment.topCenter,
            child: Banner (
              message: 'Offer 20% off',
              location: BannerLocation.topEnd,
              color: Colors.red,
              child: Container(
                height: 186,
                width: 280,
                child: Image.network(
                  'https://raw.githubusercontent.com/o7planning/rs/master/flutter/fast_food.png',
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
        )
    );
  }
}

3. child

The child property is used to define the content under the "banner". In most use cases, it is a Widget containing an image.
Widget child
A child can also be a mix of text and images:
main.dart (child ex2)
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold (
        appBar: AppBar(
          title: Text("Banner Example"),
        ),
        body:  Banner (
          message: 'Offer 20% off',
          location: BannerLocation.topStart,
          color: Colors.red,
          child: Container(
            height: 150,
            width: double.infinity,
            color: Colors.lightGreen,
            child: Padding (
              padding: EdgeInsets.all(16),
              child: Row (
                children: [
                  Image.network (
                      "https://raw.githubusercontent.com/o7planning/rs/master/flutter/fast_food.png"
                  ),
                  SizedBox(width: 10),
                  Column (
                    children: [
                      Text("Fast Food",style: TextStyle(fontSize: 30, color: Colors.blue)),
                      SizedBox(height: 10),
                      Text("Description ....", style: TextStyle(fontStyle: FontStyle.italic))
                    ],
                  )
                ],
              ),
            ),
          ),
        )
    );
  }
}

4. message

The message property defines a message displayed on the "banner".
@required String message

5. layoutDirection

layoutDirection property is used to specify the direction of the layout. Its default value is TextDirection.ltr (Left to Right).
TextDirection layoutDirection

// Enum values:
TextDirection.ltr    // Left to Right  (Default)
TextDirection.rtl    // Right to Left
The Layout Direction concept helps create applications suitable for different languages and cultures. Specifically, English is written from left to right, while Arabic is written from right to left.

6. location

No ADS
location property is used to specify the position to display "banner". It can receive one of the four values as follows:
  • BannerLocation.topStart
  • BannerLocation.topEnd
  • BannerLocation.bottomStart
  • BannerLocation.bottomEnd
@required BannerLocation location
If the Layout Direction is from Left to Right:
  • layoutDirection: TextDirection.ltr (Default)
If the Layout Direction is from Right to Left:
  • layoutDirection: TextDirection.rtl

7. color

color property is used to specify the color of the "banner".
Color color: _kColor

8. textStyle

No ADS
textStyle property is used to specify the text style displayed on the "banner".
TextStyle textStyle: _kTextStyle
For example:
textStyle: TextStyle(fontSize: 20)
textStyle: TextStyle(
    fontSize: 14,
    fontStyle: FontStyle.italic,
    color: Colors.yellow
)
  • Flutter TextStyle

9. textDirection

TextDirection textDirection

// Enum Values:
TextDirection.ltr      // Left to Right
TextDirection.rtl      // Right to Left
No ADS

Flutter Programming Tutorials

Show More
No ADS