Hướng dẫn và ví dụ Flutter SnackBar
Xem thêm các chuyên mục:

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.


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);
}
}
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
backgroundColor - Mầu nền của SnackBar.
Color backgroundColor
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: () {
},
),
)

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 behavior là SnackBarBehavior.floating và width 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
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 content và action.
EdgeInsetsGeometry padding
Property width là chiều rộng của SnackBar và nó chỉ làm việc nếu behavior là SnackBarBehavior.floating. Nếu width được chỉ định SnackBar sẽ được đặt ở chính giữa theo phương ngang.
double width
ShapeBorder shape
Property behavior chỉ định hành vi và vị trí của SnackBar.
SnackBarBehavior behavior
// Enum values:
SnackBarBehavior.fixed
SnackBarBehavior.floating

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
Duration duration: _snackBarDisplayDuration
Animation<double> animation
SnackBar withAnimation (
Animation<double> newAnimation,
{Key fallbackKey}
)
VoidCallback onVisible