Die Anleitung zu Flutter Banner

View more Tutorials:

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

9- textDirection

TextDirection textDirection

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

View more Tutorials: