如何使用FlutterWidgets调用SnackBar方法

基础用法

应用程序有时候需要弹出消息提示用户，比如‘网络连接失败’、‘下载成功’等提示，就像Android
等Toast，在Flutter中使用SnackBar组件，用法如下：

成都创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都做网站、网站建设、黎平网络推广、微信小程序、黎平网络营销、黎平企业策划、黎平品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联为所有大学生创业者提供黎平建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

Scaffold.of(context).showSnackBar(SnackBar(
      content: Text('老孟，一枚有态度的程序员'),
    ));

注意并不是在build方法中直接使用SnackBar组件，而是调用Scaffold.of(context).showSnackBar方法，消息会在底部弹出并显示一段时间，默认显示4秒，然后弹出，我们可以设置其显示的时间：

Scaffold.of(context).showSnackBar(SnackBar(
      duration: Duration(seconds: 1),
    ));

显示的时间为1秒，content属性不一定是文字，也可以是其他组件，比如显示一个图标和文字：

Scaffold.of(context).showSnackBar(SnackBar(
      content: Row(
        children: [
          Icon(Icons.check,color: Colors.green,),
          Text('下载成功')],
      ),
      duration: Duration(seconds: 1),
    ));

效果如下：

通过shape属性设置其形状：

Scaffold.of(context).showSnackBar(SnackBar(
      content: Row(
        children: [
          Icon(Icons.check,color: Colors.green,),
          Text('下载成功')],
      ),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(50))
      ),
      duration: Duration(seconds: 1),
    ));

效果如下：

SnackBar的有2种弹出形式，默认是fixed，直接在底部弹出，另一种是floating,悬浮在底部，用法如下：

Scaffold.of(context).showSnackBar(SnackBar(
      content: Row(
        children: [
          Icon(Icons.check,color: Colors.green,),
          Text('下载成功')],
      ),
      behavior: SnackBarBehavior.floating,
    ));

floating效果：

我们还可以对SnackBar增加行为组件，比如增加一个“知道了”按钮，点击“知道了”，消息马上隐藏，用法如下：

Scaffold.of(context).showSnackBar(SnackBar(
      content: Row(
        children: [
          Icon(Icons.check,color: Colors.green,),
          Text('下载成功')],
      ),
      action: SnackBarAction(
        label: '知道了',
        onPressed: (){},
      ),
    ));

效果：

瞬间多个弹出延迟问题

当短时间内多次调用SnackBar方法时，SnackBar消息将会以队列的形式一个一个的弹出，比如下面的代码：

RaisedButton(
          child: Text(
            '点我，弹出SnackBar',
          ),
          onPressed: () {

            List.generate(10, (index){
              Scaffold.of(context).showSnackBar(SnackBar(
                content: Text('我是消息：$index'),
              ));
            });
          },
        )

默认情况下每个显示4秒，如果有10个，那么40秒内会一直弹消息，体验明显不友好，我们希望的效果是如果有新的消息时，旧的都消息立刻消失，显示新的消息,只需在弹出新的SnackBar时移除现在的SnackBar，

Scaffold.of(context).removeCurrentSnackBar();
Scaffold.of(context).showSnackBar(...);