openplanning

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

Xem thêm các chuyên mục:

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

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

9- textDirection


TextDirection textDirection

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

Xem thêm các chuyên mục: