openplanning

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

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

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- SnackBar

Trong ứng dụng di động, SnackBar là một thành phần giao diện nhỏ cung cấp một phản hồi ngắn gọn sau một thao tác của người dùng, nó xuất hiện ở phía dưới cùng (bottom) của màn hình, và tự động biến mất sau khi hết thời gian hoặc biến mất khi người dùng tương tác ở một nơi khác trên màn hình.
SnackBar cũng cung cấp một button như một tùy chọn để thực hiện một hành động. Chẳng hạn như hoàn tác (undo) hành động vừa thực hiện hoặc thử lại hành động vừa thực hiện nếu nó bị thất bại.
SnackBar Constructor:
SnackBar Constructor

const SnackBar(
    {Key key,
    @required Widget content,
    Color backgroundColor,
    double elevation,
    EdgeInsetsGeometry margin,
    EdgeInsetsGeometry padding,
    double width,
    ShapeBorder shape,
    SnackBarBehavior behavior,
    SnackBarAction action,
    Duration duration: _snackBarDisplayDuration,
    Animation<double> animation,
    VoidCallback onVisible}
)
Ứng dụng Flutter tuân theo các nguyên tắc nhất quán của Material Design để đảm bảo rằng khi SnackBar hiển thị ở cuối màn hình nó sẽ không chồng chéo lên các widget con quan trọng khác, chẳng hạn FloatingActionButton, vì vậy SnackBar cần được gọi thông qua Scaffold.
Hãy xem một ví dụ đơn giản:
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.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter SnackBar Example'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
      body: Center(
          child: Builder(
              builder: (BuildContext ctxOfScaffold)  {
                return ElevatedButton(
                    child: Text('Show SnackBar'),
                    onPressed: () {
                      this._showSnackBarMsgDeleted(ctxOfScaffold);
                    }
                );
              }
          )
      )
    );
  }

  void _showSnackBarMsgDeleted(BuildContext ctxOfScaffold) {
    // Create a SnackBar.
    final snackBar = SnackBar(
      content: Text('Message is deleted!'),
      action: SnackBarAction(
        label: 'UNDO',
        onPressed: () {
          this._showSnackBarMsgRestored(ctxOfScaffold);
        },
      ),
    );
    // Find the Scaffold in the widget tree
    // and use it to show a SnackBar.
    Scaffold.of(ctxOfScaffold).showSnackBar(snackBar);
  }

  void _showSnackBarMsgRestored(BuildContext ctxOfScaffold) {
    // Create a SnackBar.
    final snackBar = SnackBar(
      content: Text('Message is restored!')
    );
    // Find the Scaffold in the widget tree
    // and use it to show a SnackBar.
    Scaffold.of(ctxOfScaffold).showSnackBar(snackBar);
  }
}

2- content

content - Nội dung chính hiển thị trên SnackBar, thông thường nó là một đối tượng Text.

@required Widget content

3- backgroundColor

backgroundColor - Mầu nền của SnackBar.

Color backgroundColor

4- elevation

elevation - Toạ độ theo trục Z của SnackBar, giá trị của nó ảnh hưởng tới kích thước bóng đổ (shadow) của SnackBar.

double elevation
Chú ý: Property elevation chỉ hoạt động đối với SnackBar nổi (behavior: SnackBarBehavior.floating).
elevation (ex1)

final snackBar = SnackBar(
  content: Text('Message is deleted!'),
  elevation: 15,
  behavior: SnackBarBehavior.floating,
  action: SnackBarAction(
    label: 'UNDO',
    onPressed: ()  {
    },
  ),
)

5- margin

Property margin được sử dụng để tạo ra một khoảng không gian trống bao quanh SnackBar. Tuy nhiên property này chỉ hoạt động nếu giá trị của behaviorSnackBarBehavior.floatingwidth không được chỉ định. Giá trị mặc định của nó là EdgeInsets.fromLTRB(15.0, 5.0, 15.0, 10.0).

EdgeInsetsGeometry margin

6- padding

Property padding được sử dụng để tạo ra một khoảng không gian trống nằm trong SnackBar và bao quanh contentaction.

EdgeInsetsGeometry padding

7- width

Property width là chiều rộng của SnackBar và nó chỉ làm việc nếu behaviorSnackBarBehavior.floating. Nếu width được chỉ định SnackBar sẽ được đặt ở chính giữa theo phương ngang.

double width

8- shape


 ShapeBorder shape

9- behavior

Property behavior chỉ định hành vi và vị trí của SnackBar.

SnackBarBehavior behavior

// Enum values:
SnackBarBehavior.fixed
SnackBarBehavior.floating

10- action

action hiển thị như một button trên SnackBar, người dùng có thể nhấn vào đó để thực hiện một hành động.

SnackBarAction action

11- duration


Duration duration: _snackBarDisplayDuration

12- animation


Animation<double> animation

13- withAnimation()


SnackBar withAnimation (
  Animation<double> newAnimation,
  {Key fallbackKey}
)

14- onVisible


VoidCallback onVisible

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