來(lái)自Material Design的官方Toast，Snackbars
在執(zhí)行某些操作的時(shí)候，給用戶一些簡(jiǎn)短的通知可能會(huì)很有用。例如當(dāng)用戶從列表中刪掉一條消息時(shí)，您可能想通知他該消息已經(jīng)刪除了，甚至我們的程序可以提供給用戶一個(gè)撤銷(xiāo)的操作。
在Material Design中，SnackBar可以給我們提供此項(xiàng)功能。要在flutter中使用Snackbar我們可以按照下面步驟。
創(chuàng)建一個(gè)Scaffold
創(chuàng)建遵循Material Design準(zhǔn)則的應(yīng)用程序時(shí)，請(qǐng)為您的應(yīng)用程序提供一致的外觀結(jié)構(gòu)。在此例子中，Snackbar在屏幕底部顯示，并且不與其他重要小部件(FloatingActionButton)重疊
Scaffold來(lái)自Material Design的小部件創(chuàng)建了這種視覺(jué)結(jié)構(gòu)，病確保重要的窗口小組件不會(huì)重疊。
Scaffold(
appBar: AppBar(
title: Text(SnackBar Demo),
),
body: SnackBarPage(), // Complete this code in the next step.
);
顯示一個(gè)SnackBar
創(chuàng)建好了Scaffold，顯示SnackBar時(shí)首先我們要?jiǎng)?chuàng)建一個(gè)SnackBar，然后使用ScaffoldMessenger顯示它。
final snackBar = SnackBar(content: Text(Yay! A SnackBar!));
// 從組件樹(shù)種找到ScaffoldMessager，并用它去show一個(gè)snackBar
ScaffoldMessenger.of(context).showSnackBar(snackBar);
給SnackBar提供一個(gè)可選操作
當(dāng)顯示SnackBar時(shí)，我們可能想要向用戶提供一個(gè)操作。例如，如果用戶不小心刪除了一條消息，則他們可以在SnackBar中使用可選的動(dòng)作來(lái)恢復(fù)該消息。
下面展示如何在SnackBar給用戶提供可選操作。
final snackBar = SnackBar(
content: Text(Yay! A SnackBar!),
action: SnackBarAction(
label: Undo,
onPressed: () {
// 我們只需要在此處處理用戶需要撤銷(xiāo)的操作就行了。
},
),
);
來(lái)自第三方庫(kù)的依賴，fluttertoast
fluttertoast是一個(gè)來(lái)自第三方庫(kù)的給用戶彈出toast提示的實(shí)現(xiàn)，它覆蓋了安卓，IOS，及web等平臺(tái)。它內(nèi)部提供了兩種方顯示toast的方式，讓我們可以在flutter中輕松的彈出toast。
fluttertoast的使用
1.利用channel顯示各個(gè)原生平臺(tái)toast
- 添加下列代碼到你的依賴配置
fluttertoast: ^8.0.6
- 在使用的地方導(dǎo)入相應(yīng)的dart庫(kù)文件
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顯示的配置
| 屬性 | 描述 | 默認(rèn) |
|---|---|---|
| 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學(xué)習(xí)筆記總結(jié)+最新移動(dòng)架構(gòu)視頻+大廠安卓面試真題+項(xiàng)目實(shí)戰(zhàn)源碼講義》
【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整內(nèi)容開(kāi)源分享
| 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平臺(tái)實(shí)現(xiàn)的toast
FToast 是作者在flutter平臺(tái)實(shí)現(xiàn)的toast，他不依賴原生操作系統(tǒng)直接在flutterview層面顯示toast，所以用此方式實(shí)現(xiàn)的toast所有平臺(tái)都通用。
- FToast使用
由于FToast使用起來(lái)比較簡(jiǎn)單，我們這里直接上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(
自學(xué)編程路線、面試題集合/面經(jīng)、及系列技術(shù)文章等，資源持續(xù)更新中...
本文已被[CODING開(kāi)源項(xiàng)目：《Android學(xué)習(xí)筆記總結(jié)+移動(dòng)架構(gòu)視頻+大廠面試真題+項(xiàng)目實(shí)戰(zhàn)源碼》]( )收錄
