來自Material Design的官方Toast，Snackbars
在執行某些操作的時候，給用戶一些簡短的通知可能會很有用。例如當用戶從列表中刪掉一條消息時，您可能想通知他該消息已經刪除了，甚至我們的程序可以提供給用戶一個撤銷的操作。
在Material Design中，SnackBar可以給我們提供此項功能。要在flutter中使用Snackbar我們可以按照下面步驟。
創建一個Scaffold
創建遵循Material Design準則的應用程序時，請為您的應用程序提供一致的外觀結構。在此例子中，Snackbar在屏幕底部顯示，并且不與其他重要小部件(FloatingActionButton)重疊
Scaffold來自Material Design的小部件創建了這種視覺結構，病確保重要的窗口小組件不會重疊。
Scaffold(
appBar: AppBar(
title: Text(SnackBar Demo),
),
body: SnackBarPage(), // Complete this code in the next step.
);
顯示一個SnackBar
創建好了Scaffold，顯示SnackBar時首先我們要創建一個SnackBar，然后使用ScaffoldMessenger顯示它。
final snackBar = SnackBar(content: Text(Yay! A SnackBar!));
// 從組件樹種找到ScaffoldMessager，并用它去show一個snackBar
ScaffoldMessenger.of(context).showSnackBar(snackBar);
給SnackBar提供一個可選操作
當顯示SnackBar時，我們可能想要向用戶提供一個操作。例如，如果用戶不小心刪除了一條消息，則他們可以在SnackBar中使用可選的動作來恢復該消息。
下面展示如何在SnackBar給用戶提供可選操作。
final snackBar = SnackBar(
content: Text(Yay! A SnackBar!),
action: SnackBarAction(
label: Undo,
onPressed: () {
// 我們只需要在此處處理用戶需要撤銷的操作就行了。
},
),
);
來自第三方庫的依賴，fluttertoast
fluttertoast是一個來自第三方庫的給用戶彈出toast提示的實現，它覆蓋了安卓，IOS，及web等平臺。它內部提供了兩種方顯示toast的方式，讓我們可以在flutter中輕松的彈出toast。
fluttertoast的使用
1.利用channel顯示各個原生平臺toast
- 添加下列代碼到你的依賴配置
fluttertoast: ^8.0.6
- 在使用的地方導入相應的dart庫文件
import package:fluttertoast/fluttertoast.dart;
- 彈出Toast
Fluttertoast.showToast(
msg: "This is Center Short Toast",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0
);
- 取消Toast
Fluttertoast.cancel()
- Toast顯示的配置
| 屬性 | 描述 | 默認 |
|---|---|---|
| msg | String類型 | 必須 |
| toastLength | Toast.TENGTH_SHORT 或者 Toast.LENGTH_LONG | Toast.TENGTH_SHORT |
| gravity | ToastGravity.TOP 或者 ToastGravity.CENTER 或者 ToastGravity.BOTTOM web只支持top and bottom | ToastGravity.BOTTOM |
| timeInSecForIosWeb | int (ios 和 web)的配置 | 1(sec) |
| backgroundColor | Colors.red |
《Android學習筆記總結+最新移動架構視頻+大廠安卓面試真題+項目實戰源碼講義》
【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整內容開源分享
| null |
| textcolor | Colors.white | null |
| fontSize | 16.0(float) | null |
| webShowClose | false(bool) | false |
| webBgColor | String(hex Color) | linear-gradient(to right, #00b09b, #96c93d) |
| webPosition | String(left,center,right) | right |
flutter平臺實現的toast
FToast 是作者在flutter平臺實現的toast，他不依賴原生操作系統直接在flutterview層面顯示toast，所以用此方式實現的toast所有平臺都通用。
- FToast使用
由于FToast使用起來比較簡單，我們這里直接上demo
FToast fToast;
@override
void initState() {
super.initState();
fToast = FToast();
fToast.init(context);
}
_showToast() {
Widget toast = Container(
padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
color: Colors.greenAccent,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.check),
SizedBox(
width: 12.0,
),
Text("This is a Custom Toast"),
],
),
);
fToast.showToast(
child: toast,
gravity: ToastGravity.BOTTOM,
toastDuration: Duration(seconds: 2),
);
// Custom Toast Position
fToast.showToast(
child: toast,
toastDuration: Duration(seconds: 2),
positionedToastBuilder: (context, child) {
return Positioned(
自學編程路線、面試題集合/面經、及系列技術文章等，資源持續更新中...
本文已被[CODING開源項目：《Android學習筆記總結+移動架構視頻+大廠面試真題+項目實戰源碼》]( )收錄
