主流的三種APP反饋形式: toast击敌、snackbar以及dialog. toast通常用于提示用戶一些不那么重要的信息, 會(huì)彈出并顯示文字一段時(shí)間. 時(shí)間一到就會(huì)消失. 相較于snackbar和dialog, 對屏幕的入侵較少. 身為開發(fā)人員怎能不掌握toast的基本使用? 這篇文章阿航就帶著大家一起探討一下Flutter中的toast.

效果

有圖有真相, 我們來看下我們本次要實(shí)現(xiàn)的最終效果:

06

源碼下載

??在Github或碼云上查看本篇文章全部代碼.

尋找fluttertoast

有同學(xué)會(huì)問, 為什么要選擇插件, 不選擇原生呢... 因?yàn)镕lutter沒有我們所需的這種效果! 只有自帶的snackBar!

老樣子, 上pub.dev尋找我們所需的插件, 在搜索框輸入fluttertoast:

看到第一條:

01

99分, 相當(dāng)高的評(píng)分.

點(diǎn)進(jìn)去:

查看最新版本發(fā)布日期和兼容性:

02

一般我們在選擇一款Flutter插件時(shí), 會(huì)先看它的評(píng)分(Flutter官方評(píng)分還是比較嚴(yán)格的). 之后再去看看它的最新日期(如果很久未更新, 可能項(xiàng)目已經(jīng)停止維護(hù)了). 最后再來看看它的兼容性, 是否合乎我們的規(guī)則.

同時(shí)支持Android、IOS以及Web. 兼容性很好.

實(shí)戰(zhàn)開始

創(chuàng)建項(xiàng)目

創(chuàng)建一個(gè)Flutter項(xiàng)目, 先來清理項(xiàng)目.

刪除./test目錄, 因?yàn)槲覀兊倪@個(gè)項(xiàng)目只是一個(gè)簡單的demo. 不需要測試驅(qū)動(dòng)開發(fā).

03

通過flutter創(chuàng)建的項(xiàng)目的./lib/main.dart會(huì)有很多自帶的注釋, 我們替換整個(gè)文件為:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '阿航的技術(shù)小站 Flutter toast',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter toast實(shí)戰(zhàn)'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[],
        ),
      ),
    );
  }
}

?? 代碼解析: 刪除了多余的注釋, 和部分初始化的按鈕. 添加一些名稱.

?? 運(yùn)行項(xiàng)目, 應(yīng)該相當(dāng)簡潔:

04

引入依賴

在./pubspec.yaml中添加依賴:

  fluttertoast: ^4.0.1

05

?? 提示: 一定要注意字符縮進(jìn). 縮進(jìn)不正確會(huì)導(dǎo)致導(dǎo)入失敗!

運(yùn)行IDE的Packages get或者在終端中輸入:

flutter pub get

創(chuàng)建按鈕

回到./lib/main.dart, 在Column內(nèi)添加一個(gè)按鈕:

RaisedButton(
  child: Text("彈出toast"),
  onPressed: (){},
)

該按鈕等下用來觸發(fā)彈出toast

使用fluttertoast

導(dǎo)入fluttertoast:

import 'package:fluttertoast/fluttertoast.dart';

上面創(chuàng)建的按鈕中的onPressed中添加函數(shù), 替換上面的RaisedButton為:

RaisedButton(
  child: Text("彈出toast"),
  onPressed: () {
    Fluttertoast.showToast(
                    msg: "你今天真好看",
                    toastLength: Toast.LENGTH_SHORT,
                    gravity: ToastGravity.BOTTOM,
                    timeInSecForIosWeb: 1,
                    backgroundColor: Colors.black45,
                    textColor: Colors.white,
                    fontSize: 16.0);
  },
)

下面會(huì)詳細(xì)解釋各個(gè)參數(shù)的作用, 先運(yùn)行, 一睹為快!

具體位置如圖:

07

?? 運(yùn)行項(xiàng)目(因?yàn)橛行聦?dǎo)入的庫, 所以建議先停止, 再重新運(yùn)行), 點(diǎn)擊"彈出toast"按鈕試試:

06

成功運(yùn)行.

下面來介紹一下Fluttertoast.showToast的詳細(xì)參數(shù):

你可以自己隨意傳入?yún)?shù)和值來看看效果!

經(jīng)過阿航的測試, fluttertoast本版本的web端不是非常好看. 所以不放出web端的截圖啦!

主動(dòng)隱藏toast

toast不僅可以自動(dòng)消失, 也可以根據(jù)我們的需要讓其立即消失.

在剛才的按鈕下方再添加一個(gè)按鈕:

RaisedButton(
  child: Text("隱藏toast"),
  onPressed: () => Fluttertoast.cancel(),
)

如圖:

08

?? 運(yùn)行項(xiàng)目, 先點(diǎn)擊"彈出toast"按鈕, 緊接著點(diǎn)擊"隱藏toast`按鈕, 你會(huì)發(fā)現(xiàn)提示立刻消失:

09

大功告成

至此, 我們的教程已經(jīng)基本完成. 如果你對本篇文章有任何問題, 歡迎在下方評(píng)論區(qū)進(jìn)行討論.

源碼下載

??在Github或碼云上查看本篇文章全部代碼.

感謝

• fluttertoast - pub.dev
• FlutterToast - Github
• Pexels 上的 Francesco Ungaro 拍攝的照片
• (排名不分先后)

結(jié)語

原文鏈接

更多技術(shù)干貨, 歡迎訪問阿航的技術(shù)小站