devstory

Le Tutoriel de Flutter Banner

View more Tutorials:

Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles. Facebook

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:

Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.