Le Tutoriel de Flutter Banner

Flutter Banner
Banner Example
child
message
layoutDirection
location
color
textStyle
textDirection

1. Flutter Banner

Dans Flutter, Banner est un message en diagonale (diagonal message) affiché à la surface et au coin d'un autre Widget. Banner est utilisé pour décorer et surligner le message relatif à ce 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

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

La propriété child est utlisée pour définir le contenu en-dessous de "banner". Dans la plupart des cas, c'est un Widget contenant une image.

Widget child

child peut être un mélange entre texte et 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

La propriété message définit un message affiché dans "banner".

@required String message

5. layoutDirection

La propriété layoutDirection est utilisée pour spécifier la direction de la mise en page. Sa valeur par défaut est TextDirection.ltr (Left to Right).

TextDirection layoutDirection

// Enum values:
TextDirection.ltr    // Left to Right  (Default)
TextDirection.rtl    // Right to Left

Le concept Layout Direction (Direction de la mise en page) permet de créer des applications appropriées aux langues et cultures différentes. Précisément, en anglais, le texte est écrit de gauche à droite alors qu'en arabe, le texte est écrit de droite à gauche.

6. location

La propriété location est utilisée pour spécifier la position d'affichage de "banner". Elle peut recevoir l'une des quatre valeurs ci-dessous:

BannerLocation.topStart
BannerLocation.topEnd
BannerLocation.bottomStart
BannerLocation.bottomEnd

@required BannerLocation location

Si la direction de la mise en page (Layout Direction) est de Gauche à Droite:

layoutDirection: TextDirection.ltr (Default)

Si la direction de la mise en page (Layout Direction) est de Droite à Gauche:

layoutDirection: TextDirection.rtl

7. color

La propriété color est utilisée pour spécifier la couleur pour "banner".

Color color: _kColor

8. textStyle

La propriété textStyle est utilisée pour spécifier le style du texte affiché dans "banner".

TextStyle textStyle: _kTextStyle

Par exemple:

textStyle: TextStyle(fontSize: 20)

textStyle: TextStyle(
    fontSize: 14,
    fontStyle: FontStyle.italic,
    color: Colors.yellow
)

Le Tutoriel de Flutter TextStyle

9. textDirection

TextDirection textDirection

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