Die Anleitung zu Flutter Banner

Flutter Banner
Banner Example
child
message
layoutDirection
location
color
textStyle
textDirection

1. Flutter Banner

In Flutter ist Banner eine diagonale Nachricht (diagonal message), die auf der Oberfläche und an der Ecke eines anderen Widget angezeigt wird. Banner werden häufig verwendet, um eine Nachricht bezüglich des Widget zu dekorieren und hervorzuheben.

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

Die Property child wird verwendet, um den Inhalt unter dem "banner" zu definieren. In die meisten Verwendungssituation ist das ein Widget, das ein Bild enthält.

Widget child

child kann auch eine Mischung aus Text und Bildern sein:

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

Die Property message definiert eine Nachricht, die auf "banner" anzeigt.

@required String message

5. layoutDirection

Die Property layoutDirection wird benutzt um die Richtung vom Layout festzulegen. Sein Standardwert ist TextDirection.ltr (Left to Right).

TextDirection layoutDirection

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

Das Konzept Layout Direction hilft bei der Erstellung von Anwendungen, die für verschiedenen Sprachen und Kulturen geeignet sind. Insbesondere wird Englisch von links nach rechts geschrieben, während Arabish von rechts nach links geschrieben wird.

6. location

Die Property location wird benutzt um die Anzeigenposition "banner" festszulegen. Es kann einen der vier folgenden Werten bekommen:

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

@required BannerLocation location

Wenn die Richtung vom Layout (Layout Direction) von links nach rechts ist:

layoutDirection: TextDirection.ltr (Default)

Wenn die Richtung vom Layout (Layout Direction) von rechts nach links ist:

layoutDirection: TextDirection.rtl

7. color

Die Property color wird benutzt um die Farbe für "banner" festzulegen.

Color color: _kColor

8. textStyle

Die Property textStyle wird benutzt um das Stil der Text auf "banner" festzulegen.

TextStyle textStyle: _kTextStyle

Zum Beispiel:

textStyle: TextStyle(fontSize: 20)

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

Die Anleitung zu Flutter TextStyle

9. textDirection

TextDirection textDirection

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