Hướng dẫn và ví dụ Flutter Banner

Flutter Banner
Banner Example
child
message
layoutDirection
location
color
textStyle
textDirection

1. Flutter Banner

Trong Flutter, Banner là thông điệp chéo (diagonal message) hiển thị ở phía trên bề mặt và tại một góc của một Widget khác. Banner thường được sử dụng để trang trí và làm nổi bật một thông điệp liên quan tới một Widget này.

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

Property child được sử dụng để định nghĩa nội dung nằm dưới "banner". Trong hầu hết các trường hợp sử dụng nó là một Widget chứa một hình ảnh.

Widget child

child cũng có thể là một nội dung hỗn hợp bao gồm hình ảnh và văn bản:

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

Property message định nghĩa một thông điệp hiển thị trên "banner".

@required String message

5. layoutDirection

Property layoutDirection được sử dụng để chỉ định hướng của bố cục. Mặc định là giá trị của nó là TextDirection.ltr (Left to Right).

TextDirection layoutDirection

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

Khái niệm Layout Direction (Hướng của bố cục) giúp tạo ra ứng dụng phù hợp với các ngôn ngữ và nền văn hóa khác nhau. Cụ thể tiếng Anh được viết từ trái sang phải, trong khi đó tiếng Ả Rập được viết từ phải sang trái.

6. location

Property location được sử dụng để chỉ định vị trí hiển thị "banner", nó có thể nhận một trong 4 giá trị sau:

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

@required BannerLocation location

Nếu hướng của bố cục (Layout Direction) là từ Trái sang Phải:

layoutDirection: TextDirection.ltr (Default)

Nếu hướng của bố cục (Layout Direction) là từ Phải sang Trái:

layoutDirection: TextDirection.rtl

7. color

Property color được sử dụng để chỉ định mầu sắc cho "banner".

Color color: _kColor

8. textStyle

Property textStyle được sử dụng để chỉ định kiểu dáng văn bản hiển thị trên "banner".

TextStyle textStyle: _kTextStyle

Ví dụ:

textStyle: TextStyle(fontSize: 20)

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

Hướng dẫn và ví dụ Flutter TextStyle

9. textDirection

TextDirection textDirection

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