Flutter Toast、弹出提示、轻提示

主流的三种APP反馈形式: toast、snackbar以及dialog. toast又称为弹出提示、轻提示.通常用于提示用户一些不那么重要的信息, 会弹出并显示文字一段时间. 时间一到就会消失. 相较于snackbar和dialog, 对屏幕的入侵较少. 身为开发人员怎能不掌握toast的基本使用? 这篇文章阿航就带着大家一起探讨一下Flutter中的toast.

效果

有图有真相, 我们来看下我们本次要实现的最终效果:

源码地址

👉在Github或码云上查看本篇文章全部代码.

搜索fluttertoast

老样子, 上pub.dev寻找我们所需的插件, 在搜索框输入fluttertoast:

看到第一条:

99分, 相当高的评分.

点进去, 查看最新版本发布日期和兼容性:

同时支持Android、IOS以及Web. 兼容性很好.

实战开始

创建项目

创建一个Flutter项目, 先来清理项目.

删除./test目录, 因为我们的这个项目只是一个简单的demo. 不需要测试驱动开发.

通过flutter创建的项目的./lib/main.dart会有很多自带的注释, 我们替换整个文件为:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '阿航的技术小站 Flutter toast',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter toast实战'),
    );
  }
}

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

  final String title;

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

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

💡 代码解析: 删除了多余的注释, 和部分初始化的按钮. 添加一些名称.

引入依赖

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

  fluttertoast: ^4.0.1

运行IDE的Packages get或者在终端中输入:

flutter pub get

创建按钮

回到./lib/main.dart, 在Column内添加一个按钮:

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

该按钮等下用来触发弹出toast

使用fluttertoast

导入fluttertoast:

import 'package:fluttertoast/fluttertoast.dart';

上面创建的按钮中的onPressed中添加函数, 替换上面的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,
                  webShowClose: true,
                  webBgColor: "#00b09b",
                  webPosition: "center",
                );
  },
)

下面会详细解释各个参数的作用, 先运行, 一睹为快!

具体位置如图:

成功运行.

下面来介绍一下Fluttertoast.showToast的详细参数:

参数	参数类型	参数说明	是否必传	默认值
msg	String	设置toast展示的字符串	√	–
gravity	ToastGravity枚举	设置toast的展示位置.(Web端仅支持顶部和底部)	×	ToastGravity.BOTTOM
timeInSecForIosWeb	int	ios秒数	×	1
bgcolor	Color	toast背景色	×	Colors.black
textcolor	Color	toast文字颜色	×	Colors.white
fontSize	float	toast文字字体大小	×	16.0
webShowClose	bool	web端 是否显示关闭按钮(“×”号)	×	false
webBgColor	String	web端 16进制颜色, 比如#00b09b	×	渐变色(#00b09b与#96c93d)
webPosition	String	web端 toast水平位置(left, center或right)	×	right

你可以自己随意传入参数和值来看看效果!

主动隐藏toast

toast不仅可以自动消失, 也可以根据我们的需要让其立即消失.

在刚才的按钮下方再添加一个按钮:

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

如图:

大功告成

至此, 我们的教程已经基本完成. 如果你对本篇文章有任何问题, 欢迎在下方评论区进行讨论.

源码下载

👉在Github或码云上查看本篇文章全部代码.

感谢

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