前言
我們通常會用 toast(也叫吐司)來顯示提示信息,例如網(wǎng)絡(luò)請求錯誤巧涧,校驗錯誤等等薯蝎。大多數(shù) App的 toast 都很簡單,簡單的半透明黑底加上白色文字草草了事谤绳,比如下面這種.
說實話占锯,這種toast 的體驗很糟糕袒哥。假設(shè)是新手用戶,他們并不知道 toast 從哪里出來烟央,等出現(xiàn)錯誤的時候统诺,閃現(xiàn)出來的時候歪脏,可能還沒抓住內(nèi)容的重點就消失了(尤其是想截屏抓錯誤的時候疑俭,更抓狂)。這是因為一個是這種 toast 一般比較小婿失,而是動效非常簡單钞艇,用來提醒其實并不是特別好。怎么破豪硅?本篇來給大家介紹一個非常有趣的 toast 組件 —— motion_toast哩照。
motion_toast 介紹
從名字就知道,motion_toast 是支持動效的懒浮,除此之外飘弧,它的顏值還很高,下面是它的一個示例動圖砚著,仔細(xì)看那個小鬧鐘圖標(biāo)次伶,是在跳動的哦。這種提醒效果比起常用的 toast 來說醒目多了稽穆,也更有趣味性冠王。
下面我們看看 motion_toast 的特性:
- 可以通過動畫圖標(biāo)實現(xiàn)動效;
- 內(nèi)置了成功舌镶、警告柱彻、錯誤、提醒和刪除類型餐胀;
- 支持自定義哟楷;
- 支持不同的主題色;
- 支持 null safety否灾;
- 心跳動畫效果吓蘑;
- 完全自定義的文本內(nèi)容;
- 內(nèi)置動畫效果坟冲;
- 支持自定義布局(LTR 和 RTL)磨镶;
- 自定義持續(xù)時長;
- 自定義展現(xiàn)位置(居中健提,底部或頂部)琳猫;
- 支持長文本顯示;
- 自定義背景樣式私痹;
- 自定義消失形式脐嫂。
可以看到统刮,除了能夠開箱即用之外,我們還可以通過自定義來豐富 toast 的樣式账千,使之更有趣侥蒙。
示例
介紹完了,我們來一些典型的示例吧匀奏,首先在 pubspec.yaml 中添加依賴motion_toast: ^2.0.0
(最低Dart版本需要2.12)鞭衩。
最簡單用法
只需要一行代碼搞定!其他參數(shù)在 success 的命名構(gòu)造方法中默認(rèn)了娃善,因此使用非常簡單论衍。
MotionToast.success(description: '操作成功!').show(context);
其他內(nèi)置的提醒
內(nèi)置的提醒也支持我們修改默認(rèn)參數(shù)進(jìn)行樣式調(diào)整聚磺,如標(biāo)題坯台、位置、寬度瘫寝、顯示位置蜒蕾、動畫曲線等等。
// 錯誤提示
MotionToast.error(
description: '發(fā)生錯誤焕阿!',
width: 300,
position: MOTION_TOAST_POSITION.center,
).show(context);
//刪除提示
MotionToast.delete(
description: '已成功刪除',
position: MOTION_TOAST_POSITION.bottom,
animationType: ANIMATION.fromLeft,
animationCurve: Curves.bounceIn,
).show(context);
// 信息提醒(帶標(biāo)題)
MotionToast.info(
description: '這是一條提醒咪啡,可能會有很多行。toast 會自動調(diào)整高度顯示',
title: '提醒',
titleStyle: TextStyle(fontWeight: FontWeight.bold),
position: MOTION_TOAST_POSITION.bottom,
animationType: ANIMATION.fromBottom,
animationCurve: Curves.linear,
dismissable: true,
).show(context);
不過需要注意的是捣鲸,一個是 dismissable
參數(shù)只對顯示位置在底部的有用瑟匆,當(dāng)在底部且dismissable
為 true
時,點擊空白處可以讓 toast 提前消失栽惶。另外就是顯示位置 position
和 animationType
是存在某些互斥關(guān)系的愁溜。從源碼可以看到底部顯示的時候,animationType
不能是 fromTop
外厂,頂部顯示的時候 animationType
不能是 fromBottom
冕象。
void _assertValidValues() {
assert(
(position == MOTION_TOAST_POSITION.bottom &&
animationType != ANIMATION.fromTop) ||
(position == MOTION_TOAST_POSITION.top &&
animationType != ANIMATION.fromBottom) ||
(position == MOTION_TOAST_POSITION.center),
);
}
自定義 toast
自定義其實就是使用 MotionToast 構(gòu)建一個實例,其中汁蝶,description
渐扮,icon
和 primaryColor
參數(shù)是必傳的。自定義的參數(shù)很多掖棉,使用的時候建議看一下源碼注釋墓律。
MotionToast(
description: '這是自定義 toast',
icon: Icons.flag,
primaryColor: Colors.blue,
secondaryColor: Colors.green[300],
descriptionStyle: TextStyle(
color: Colors.white,
),
position: MOTION_TOAST_POSITION.center,
animationType: ANIMATION.fromRight,
animationCurve: Curves.easeIn,
).show(context);
下面對自定義的一些參數(shù)做一下解釋:
-
icon
:圖標(biāo),IconData 類幔亥,可以使用系統(tǒng)字體圖標(biāo)耻讽; -
primaryColor
:主顏色,也就是大的背景底色帕棉; -
secondaryColor
:輔助色针肥,也就是圖標(biāo)和旁邊的豎條的顏色饼记; -
descriptionStyle
:toast 文字的字體樣式; -
title
:標(biāo)題文字慰枕; -
titleStyle
:標(biāo)題文字樣式具则; -
toastDuration
:顯示時長; -
backgroundType
:背景類型具帮,枚舉值博肋,共三個可選值,transparent
匕坯,solid
和lighter
束昵,默認(rèn)是lighter
拔稳。lighter
其實就是加了一層白色底色葛峻,然后再將原先的背景色(主色調(diào))加上一定的透明度疊加到上面,所以看起來會泛白巴比。 -
onClose
:關(guān)閉時回調(diào)术奖,可以用于出現(xiàn)多個錯誤時依次展示,或者是關(guān)閉后觸發(fā)某些動作轻绞,如返回上一頁采记。
總結(jié)
看完之后,是不是覺得以前的 toast 太丑了政勃?用 motion_toast來一個更有趣的吧唧龄。另外,整個 motion_toast 的源碼并不多奸远,有興趣的可以讀讀源碼既棺,了解一下toast 的實現(xiàn)也是不錯的。