Le Tutoriel de Flutter Banner

View more Tutorials:

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
)
  • TODO Link!

9- textDirection

TextDirection textDirection

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

View more Tutorials: