丟掉丑陋的 toast先煎,會動的 toast 更有趣

motion_toast

前言

我們通常會用 toast(也叫吐司)來顯示提示信息,例如網(wǎng)絡(luò)請求錯誤巧涧,校驗錯誤等等薯蝎。大多數(shù) App的 toast 都很簡單,簡單的半透明黑底加上白色文字草草了事谤绳,比如下面這種.

默認(rèn)toast

說實話占锯,這種toast 的體驗很糟糕袒哥。假設(shè)是新手用戶,他們并不知道 toast 從哪里出來烟央,等出現(xiàn)錯誤的時候统诺,閃現(xiàn)出來的時候歪脏,可能還沒抓住內(nèi)容的重點就消失了(尤其是想截屏抓錯誤的時候疑俭,更抓狂)。這是因為一個是這種 toast 一般比較小婿失,而是動效非常簡單钞艇,用來提醒其實并不是特別好。怎么破豪硅?本篇來給大家介紹一個非常有趣的 toast 組件 —— motion_toast哩照。

motion_toast 介紹

從名字就知道,motion_toast 是支持動效的懒浮,除此之外飘弧,它的顏值還很高,下面是它的一個示例動圖砚著,仔細(xì)看那個小鬧鐘圖標(biāo)次伶,是在跳動的哦。這種提醒效果比起常用的 toast 來說醒目多了稽穆,也更有趣味性冠王。


motion_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)在底部且dismissabletrue 時,點擊空白處可以讓 toast 提前消失栽惶。另外就是顯示位置 positionanimationType 是存在某些互斥關(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渐扮,iconprimaryColor參數(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匕坯,solidlighter束昵,默認(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)也是不錯的。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末懒叛,一起剝皮案震驚了整個濱河市丸冕,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌薛窥,老刑警劉巖胖烛,帶你破解...
    沈念sama閱讀 217,657評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件刊橘,死亡現(xiàn)場離奇詭異陋率,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)踱侣,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3 394
  • 文/潘曉璐 我一進(jìn)店門罢杉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來趟畏,“玉大人,你說我怎么就攤上這事屑那」案洌” “怎么了艘款?”我有些...
    開封第一講書人閱讀 164,057評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長沃琅。 經(jīng)常有香客問我哗咆,道長,這世上最難降的妖魔是什么益眉? 我笑而不...
    開封第一講書人閱讀 58,509評論 1 293
  • 正文 為了忘掉前任晌柬,我火速辦了婚禮,結(jié)果婚禮上郭脂,老公的妹妹穿的比我還像新娘年碘。我一直安慰自己,他們只是感情好展鸡,可當(dāng)我...
    茶點故事閱讀 67,562評論 6 392
  • 文/花漫 我一把揭開白布屿衅。 她就那樣靜靜地躺著,像睡著了一般莹弊。 火紅的嫁衣襯著肌膚如雪涤久。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,443評論 1 302
  • 那天忍弛,我揣著相機(jī)與錄音响迂,去河邊找鬼。 笑死细疚,一個胖子當(dāng)著我的面吹牛蔗彤,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播疯兼,決...
    沈念sama閱讀 40,251評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼然遏,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了镇防?” 一聲冷哼從身側(cè)響起啦鸣,我...
    開封第一講書人閱讀 39,129評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎来氧,沒想到半個月后诫给,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,561評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡啦扬,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,779評論 3 335
  • 正文 我和宋清朗相戀三年中狂,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片扑毡。...
    茶點故事閱讀 39,902評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡胃榕,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出瞄摊,到底是詐尸還是另有隱情勋又,我是刑警寧澤苦掘,帶...
    沈念sama閱讀 35,621評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站楔壤,受9級特大地震影響鹤啡,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蹲嚣,卻給世界環(huán)境...
    茶點故事閱讀 41,220評論 3 328
  • 文/蒙蒙 一递瑰、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧隙畜,春花似錦抖部、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至换淆,卻和暖如春哗总,著一層夾襖步出監(jiān)牢的瞬間几颜,已是汗流浹背倍试。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留蛋哭,地道東北人县习。 一個月前我還...
    沈念sama閱讀 48,025評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像谆趾,于是被迫代替她去往敵國和親躁愿。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,843評論 2 354

推薦閱讀更多精彩內(nèi)容