Flutter实战（三）---SnackBar

已于 2022-08-11 10:52:39 修改
阅读量2.4k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： Android 进阶 文章标签： Flutter SnackBar Widget 跨平台
于 2019-04-17 09:09:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/johnWcheung/article/details/89340148
本文介绍了Flutter中的SnackBar组件，对比了它与Toast的区别，并详细阐述了如何在Flutter应用中使用SnackBar，包括其特性、如何在Scaffold中展示、添加操作按钮的方法，以及使用时的注意事项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Snackbar是Android 5.0新特性——Material Design中的一个控件，用来代替Toast，Snackbar与Toast的主要区别是：Snackbar可以滑动退出，也可以处理用户交互（点击）事件。

Snackbar的特性
  • Snackbar会在超时或者用户在屏幕其他地方触摸之后自动消失
  • 可以在屏幕上滑动关闭
  • 出现时不会阻碍用户在屏幕上的输入
  • 屏幕上同时最多只能显示一个Snackbar
  • 如果在屏幕上有一个Snackbar的情况下再显示一个Snackbar，则先将当前显示的Snackbar隐藏后再显示新的Snackbar
  • 可以在Snackbar中添加一个按钮，处理用户点击事件

在Flutter开发时，对于提示性信息，有人已经想到写一个插件去调用Android原生的Toast，且不说还要兼容IOS，这种反历史潮流的行为，一方面伤害了移动端的UI统一体验，另一方面对于主打Material Design设计的Flutter来说，也是不符合Google开发这套框架的初衷的。

言归正传，我们重点看看怎么使用这个控件， SnackBar是通过Scaffold的showSnackBar方法来显示的。所以要显示一个SnackBar，要先拿到Scaffold。

根布局使用Scaffold
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Flutter Widget之SnackBar
AppBlog.CN全栈架构
05-03 172
SnackBar是用户操作后，显示提示信息的一个控件，类似Toast，会自动隐藏。SnackBar还可以添加操作按钮。SnackBar是通过Scaffold的showSnackBar方法来显示的。
Flutter实战（六）---网络请求
学无止境
07-06 707
这里建议使用第三方库dio，它是一个强大易用的dart http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载等。 使用方法 添加库依赖 dependencies: dio: 2.1.x #latest version 二次封装 /* * 网络请求封装 * Created by ZhangJun on 2018-11-2......
flutter中的SnackBar
chunchun1230的博客
08-30 2441
先看一下什么是SnackBar,如下图：                                                           image  SnackBar是用户操作后，显示提示信息的一个控件，类似Toast，会自动隐藏。它还可以添加操作按钮，等等。SnackBar是通过Scaffold的showSnackBar方法来显示的。所以要显示一个SnackBar,...
Flutter SnackBar 控件详细介绍
最新发布
江上清风山间明月的博客
06-27 1017
SnackBar 是 Flutter Material Design 中的一个轻量级消息提示控件，用于向用户显示简短的操作反馈信息。它通常出现在屏幕底部，短暂显示后自动消失。SnackBar(content: Text('这条消息会显示更久'),duration: Duration(seconds: 5), // 自定义显示时间),SnackBar(content: Text('自定义样式SnackBar'),),),
Flutter中GetX系列二--Snackbar基本使用(顶部弹窗)
eastWind1101的博客
11-23 4254
Snackbar使用详情,顶部弹框,类似通知栏消息
Flutter - SnackBar
LittleUniverse
03-04 453
Flutter 之 SnackBar SnackBar 是用户操作后，显示提示信息的控件，默认显示在屏幕底部，默认显示4s后自动隐藏。 SnackBar是通过Scaffold的showSnackBar方法来显示，所以想要显示SnackBar必须要先拿到Scaffold。 SnackBar 参数详细说明参见官方文档； 主要介绍一下，以下2个参数： duration 属性可以设置提示条显示的时间；...
Flutter 中的 SnackBar 小部件：全面指南
smileKH的博客
05-18 1423
SnackBar是一个轻量级的消息提示组件，它在屏幕底部水平滑动出现，并在几秒钟后自动消失。SnackBar可以显示简短的消息，通常用于通知用户一个操作的结果，如上传成功、数据保存等。SnackBarSnackBar(content: Text('自定义 SnackBar'),duration: Duration(seconds: 5), // 自定义显示时间label: '撤销',// 撤销操作},),backgroundColor: Colors.blue, // 自定义背景颜色。
Flutter-系列（四）基础UI实践
2401_89829333的博客
01-10 966
本篇文章从主题、提示、图片加载和动画四个方面简单的介绍了Flutter的UI创建过程，为了避免文章太长导致可读性较差，所以只简单的讲了这四个方面，还有更多内容会在之后的文章里介绍。相信本篇文章读完之后，你已经知道如何使用Flutter Widget了，下一篇专栏来点实战，我会教大家如何实现一个轮播指示器。载和动画四个方面简单的介绍了Flutter的UI创建过程，为了避免文章太长导致可读性较差，所以只简单的讲了这四个方面，还有更多内容会在之后的文章里介绍。是一个包含Material Design的容器。
每天一个Flutter开发小项目 (9) : Flutter状态管理进阶 - Provider构建你的简易购物车应用
堇以无笙的博客
03-02 1150
我们成功地构建了一个功能完善的简易购物车应用，并深入学习了 Flutter 中重要的状态管理技术，特别是 Provider 状态管理方案的应用。通过这个项目，您不仅掌握了 Flutter 应用状态管理的核心思想和 Provider 的使用方法，更重要的是，学会了如何使用 Provider 构建架构更清晰、更易维护、数据驱动的 Flutter 应用。在开始构建购物车应用之前，我们先来深入理解 Flutter 状态管理的核心概念，并重点解析 Provider 状态管理方案，为后续的实战打牢理论基础。
【Flutter桌面篇】Flutter&Windows应用尝鲜(2)
2401_84408337的博客
05-06 668
git clone https://github.com/google/flutter-desktop-embedding.gitimport ‘package:window_size/window_size.dart’ as window_size;void main() { // Try to resize and reposition the window to be half the width and height // of its screen, centered horizontally a
Flutter之SnackBar原理详解
菜鸟博客
05-28 4214
初次学习SnackBar控件，第一反应就是这货怎么感觉跟Android的Toast一样！使用起来确实简单 Snackbar的作用就是在屏幕的底部展示一个简短的消息,与此同时，Snackbar也可以与用户进行交互，实现效果如下图： 如上图所示SnackBar分成两个部分：内容区域（content）+交互区域（action）。Scaffold是可以配置底部导航tab的，如果配置了的话，SnackBar怎么展示呢？如下图可以看出SnackBar紧贴着底部导航tab展示： 上面两图展示SnackBar的代码如下
Flutter SnackBar 提示信息
03-29
SnackBar是用户操作后，显示提示信息的一个控件，类似Toast，会自动隐藏。它还可以添加操作按钮，等等。SnackBar是通过Scaffold的showSnackBar方法来显示的。所以要显示一个SnackBar,要先拿到Scaffold。 当BuildContext在Scaffold之前时，调用Scaffold.of(context)会报错。这时可以通过Builder Widget来解决
Flutter中什么是SnackBar
Leon的专栏
03-05 826
首先我们看下什么是SnackBar，如图： SnackBar是用户操作后，显示提示信息的一个控件，类似Toast，会自动隐藏。它还可以添加操作按钮，等等。SnackBar是通过Scaffold的showSnackBar方法来显示的。所以要显示一个SnackBar,要先拿到Scaffold。 创建Scaffold Scaffold( appBar: AppBar( ...
flutter snackbar 使用
Chents
01-28 772
flutter 里的snackbar不能直接显示，需要调用Scaffold.of(context).showSnackBar才能显示出来。 Scaffold.of(context).showSnackBar(SnackBar( content: Text("我是SnackBar"), )); ...
Flutter控件Snackbar（它是Material Design设计中的一个轻量级消息通知控件。）
qq_40156884的博客
11-03 351
掌握Builder(): builder才能获取当前控件的上下文context class study extends StatefulWidget { @override _studyState createState() => _studyState(); } class _studyState extends State<study> { @override void initState() { //相当于构造方法，但控件创建只会执行一次 ...
flutter snackbars
Leove的专栏
03-23 108
最下面的消息提示
快速使用 Flutter 中的 SnackBar 和 Toast
帅次的博客
06-15 1280
本篇文章将详细介绍 Snackbar 的基本用法，包括如何创建、定制样式、添加交互按钮，并探索不同的显示方式。此外，还将对 ScaffoldMessenger 进行讲解，帮助开发者更灵活地控制 Snackbar 的展示方式。同时，文章还将介绍 fluttertoast 插件的使用方法，为开发者提供更多消息提示的选择。通过示例代码，读者可以快速掌握 Snackbar 和 fluttertoast 的用法，提高应用的用户体验
【Flutter】【widget】snackbar底部提示框
自动人生博客
10-31 709
屏幕底部短暂显示一个提示的功能，不同于之前学习dailog，bottomsheet等。欢迎关注，留言，咨询，交流！
Flutter的SnackBar
Millet
11-18 161
SnackBar 代码 // snackBar class SnackBarDemo extends StatelessWidget { @override Widget build(BuildContext context) { return GestureDetector( onTap: () { final snackBar = SnackBar( // 提示信息 content: Text('提示'),
Flutter使用Hydro-SDK实现基础过渡动画教程
- `flutter test`命令用于运行Flutter应用中的测试，`npx hydroc build --out-dir assets/ota --profile debug`是一个构建命令，用于将Typescript代码编译和打包到指定目录。 ### 标签知识点 - **Flutter**：标签...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@ZhangJun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值