betacode

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

View more Tutorials:

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

9- textDirection

TextDirection textDirection

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

View more Tutorials:

Maybe you are interested

Это онлайн курс вне вебсайта o7planning, который мы представляем, он включает бесплатные курсы или курсы со скидкой.