Руководство Flutter Banner

Flutter Banner
Banner Example
child
message
layoutDirection
location
color
textStyle
textDirection

1. Flutter Banner

В Flutter,Banner - это диагональное сообщение (diagonal message), отображаемое на поверхности и в углу другого Widget. Banner часто используется для украшения и выделения сообщения, касающегося этого 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

Свойство child используется для определения содержимого, находящегося под "banner". В большинстве случаев это свойство используется в качестве Widget, содержащего изображение.

Widget child

child также может быть смешанным контентом, включающим текст и изображения:

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

Свойство message определяет сообщение, отображаемое на "banner".

@required String message

5. layoutDirection

Свойство layoutDirection используется для указания направления компоновки. Его значение по умолчанию - TextDirection.ltr (Left to Right).

TextDirection layoutDirection

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

Концепция Layout Direction (направление компоновки) помогает создавать приложения, подходящие для разных языков и культур. В частности, английский язык пишется слева направо, а арабский - справа налево.

6. location

Свойство location используется для указания позиции отображения "banner". Оно может принимать одно из четырех следующих значений:

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

@required BannerLocation location

Если направление компоновки (Layout Direction): слева направо:

layoutDirection: TextDirection.ltr (Default)

Если направление компоновки (Layout Direction) - справа налево::

layoutDirection: TextDirection.rtl

7. color

Свойство color используется для указания цвета "banner".

Color color: _kColor

8. textStyle

Свойство textStyle используется для указания стиля текста, отображаемого на "banner".

TextStyle textStyle: _kTextStyle

Например:

textStyle: TextStyle(fontSize: 20)

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

Руководство Flutter TextStyle

9. textDirection

TextDirection textDirection

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