首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Flutter中,当我调用showSnackBar时,它会一直显示,直到我刷新页面。它不会自行消失

在Flutter中,当调用showSnackBar时,SnackBar默认会在一段时间后自动消失。如果SnackBar一直显示,直到刷新页面,可能是因为没有设置SnackBar的持续时间或者没有调用hide方法来手动隐藏。

要解决这个问题,可以通过设置SnackBar的持续时间来控制其显示的时长。可以使用SnackBar的duration属性来设置显示时间,该属性接受一个Duration对象作为参数。例如,可以将duration设置为Duration(seconds: 2),表示SnackBar将在2秒后自动消失。

另外,如果想要在特定的条件下手动隐藏SnackBar,可以使用SnackBar的hide方法。通过调用SnackBar的hide方法,可以立即隐藏SnackBar,而不需要等待其自动消失。

以下是一个示例代码,演示了如何设置SnackBar的持续时间和手动隐藏:

代码语言:txt
复制
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SnackBar Demo'),
        ),
        body: Center(
          child: RaisedButton(
            child: Text('Show SnackBar'),
            onPressed: () {
              final snackBar = SnackBar(
                content: Text('This is a SnackBar'),
                duration: Duration(seconds: 2), // 设置持续时间为2秒
              );
              Scaffold.of(context).showSnackBar(snackBar);
            },
          ),
        ),
      ),
    );
  }
}

在上面的示例中,当点击按钮时,会显示一个持续时间为2秒的SnackBar。在2秒后,SnackBar会自动消失。如果想要立即隐藏SnackBar,可以在按钮的onPressed回调中调用SnackBar的hide方法。

希望以上信息对您有帮助!如果您需要了解更多关于Flutter的知识或者其他云计算领域的问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 刷新页面:通过下拉刷新提升用户体验

下拉更新的基础 下拉刷新是应用移动端的一个常见模式,允许用户手动刷新页面内容。 Flutter ,这个功能被封装在 RefreshIndicator 挂件。...当用户下拉页面,这个函数被调用的任务是拉取新的数据并更新我们应用状态。很重要的一点是,这个函数返回 Future 来保持刷新指示器可见,直到新数据被下载且页面被更新。...无论选择哪种方法,目标都是确保触发刷新操作,应用程序的状态能够反映新数据,而不会导致用户界面的中断或者不一致。...当在 Flutter 实现下拉刷新,使用 Provider,我们需要通过一个 provider 来暴露一个方法来刷新数据,然后 onRefresh 回调函数调用该方法。...先进技术和最佳实践 当我们完善 Flutter 应用程序时,采用先进的技术并遵循最佳实践可以显著提高代码的质量和可维护性,特别是实现拉动刷新等功能

27210

Flutter Widgets 之 SnackBa

Android 等Toast,Flutter中使用SnackBar组件,用法如下: Scaffold.of(context).showSnackBar(SnackBar( content...: Text('老孟,一枚有态度的程序员'), )); 注意并不是build方法中直接使用SnackBar组件,而是调用Scaffold.of(context).showSnackBar方法...,消息会在底部弹出并显示一段时间,默认显示4秒,然后弹出,我们可以设置其显示的时间: Scaffold.of(context).showSnackBar(SnackBar( duration...: '知道了', onPressed: (){}, ), )); 效果: [20200301173633785.png] 瞬间多个弹出延迟问题 当短时间内多次调用...4秒,如果有10个,那么40秒内会一直弹消息,体验明显不友好,我们希望的效果是如果有新的消息,旧的都消息立刻消失显示新的消息,只需弹出新的SnackBar移除现在的SnackBar, Scaffold.of

1K00
  • Flutter 小技巧之优化你使用的 BuildContext

    Flutter 里的 BuildContext 相信大家都不会陌生,虽然叫 Context,但是实际是 Element 的抽象对象,而在 Flutter 里,主要来自于 ComponentElement...首先如下代码所示,该例子里当用户点击 FloatingActionButton 的时候,代码里做了一个 2秒的延迟,然后才调用 pop 退出当前页面。...那么到这里我们收获了一个小技巧:使用 BuildContext 必须我们需要通过 mounted 来保证的有效性。...首先前面我们一直说,通过 of(context) 获取到的是 InheritedWidget ,而 当 InheritedWidget 发生改变,就是通过触发绑定过的 Element 里...直接在 build 里调用肯定可以,虽然 build 会被比较频繁执行,但是 of(context) 操作其实就是一个 map 里通过 key - value 获取泛型对象,所以对性能不会有太大的影响

    1.3K00

    Flutter的本地存储

    我们使用获得的Future对象调用then()方法,当get方法执行完后就会自动触发then()方法里面的操作弹出showSnackBar。...同样的方法,我们需要在pubspec.yaml文件引入 path_provider: ^0.4.0 然后调用flutter packages get 最后自己的Dart文件引入 import ‘package...然后就是存储输入框内的内容了 我们使用上面获取到的文件直接直接调用writeAsString即可,当然它会把这个文件对象返回给你,你可以存储下这个文件对象在下次使用 最后,我们来读取本地的文件 我们直接调用...果不其然,静静的躺在那里,哈。...同样的方法,我们需要在pubspec.yaml文件引入 sqflite: >=0.8.5 然后调用flutter packages get 最后自己的Dart文件引入 import ‘package

    4.9K30

    Flutter 页面交互 | 路由跳转方式、常用API、发送接收数据、可能发生的问题与知识点拓展

    概述 路由跳转的几种方式; 路由常用API; 路由的发送和接收数据的使用; 路由使用可能遇到的问题与解决方案; 路由跳转的方式 单一页面跳转(A页面 --- B页面) 多个页面路由管理 (A页面...【小结一下刚刚的跳转并传输数据的方式】 上面的方式是 —— 跳转目的页, 准备一个构造函数和一个全局变量,用于接收数据, 跳转到目的页,创建一个目的页实例,并把数据传给其构造函数,完成传递;...PageOne等 自定义、自创建的 页面,也有一个AppBar, 这里我们如果不对进行单独设置的话, 则会默认配置为 首页的主题风格—— 也即main.dart -- MaterialApp 的...上述的单独设置指的是, 某个页面,为该页面的appBar单独设置背景颜色, 这样就会覆盖主页的默认主题颜色, 【但是如要尽量保持主题的一致性, 建议不要对子页面的这些 相关主题属性 进行修改...都是显示一行) return Row( mainAxisAlignment: MainAxisAlignment.spaceBetween,

    3.3K10

    Flutter实战 | 从 0 搭建「网易云音乐」APP(七、歌词(二))

    、发现页)3.Flutter实战 | 从 0 搭建「网易云音乐」APP(三、每日推荐、推荐歌单)4.Flutter实战 | 从 0 搭建「网易云音乐」APP(四、排行榜、播放页面)5.Flutter实战...我们首先想到的肯定是 onVerticalDragDown + onVerticalDragEnd,因为毕竟是在按下显示和抬起消失嘛, 这就错了,我们不应该在手指按下的时候就显示时间线,而应该是拖动的时候显示时间线...3.如果都满足条件,则取消这个 Timer 的任务,并且置为空4.最后重新赋值任务 这样就可以达到我们预期的结果:最后一次拖动结束的一秒钟后,把时间线消失。...说干咱就干, onTap 没有返回这个坐标,那我先在 onPanDown 里试试: onPanDown: (e){ print(e.localPosition); }, 当我运行到手机,并且点击的时候...(也可能是因为我第一次写歌词类的东西,比较菜) 当然还是那句话,该项目是我本人自己工作之余写的,所以进度不会很快,但是会一直写下去。

    1.1K00

    干货 | 携程火车票Flutter最佳实践

    同时最好复写dispose()和notifyListeners()方法,防止用户调用数据销毁界面,而等到数据获取到以后通知界面刷新导致Crash。...2)数据改变的消息传递被屏蔽,我们无需手动去处理状态改变事件的发布和订阅,provider自行处理。...FPS是一个动态过程,页面滑动这个值是一直变化的,最右边的是当前帧。出现红色则表示耗时超过16.6ms,也就是发生丢帧现象,也是我们常说的页面闪动问题。...2)控制刷新范围与次数 尽量避免滑动监听触发setStat()刷新视图。 ? 如上图所示,需要滑动的过程显示、隐藏标题栏,并且是一个渐变的过程,遇到这种情况,一定要尽量的控制刷新的范围和频次。...如上图所示列表 Item 存在大量的倒计时。一定要控制刷新倒计时只影响控件本身,并且只有可视的区域视图是刷新的,不可见的情况下及时销毁计时器。一直刷整个列表,性能开销是恐怖的。

    2.2K30

    干货 | Flutter携程复杂业务的高性能之旅

    通过Flutter Performance查看组件渲染次数,发现整个界面都在刷新当我们多次滑动页面后,发现很多组件都渲染了多次,如下图所示: 通过DevTools,滑动改变顶部的透明度,发现FPS...RepaintBoundary就是重绘的边界,用户重绘独立于父布局。因为它会为经常发生显示变化的内容提供一个新的layer,新的layer paint不会影响到其他的layer。...尽量减少build处理逻辑,因为widget页面刷新的过程中会随时通过build重建,build调用频繁,应该只处理跟UI相关的逻辑,因此将一些不涉及每次渲染都必须的操作,存放在initState...酒店详情页的头部header,跟随页面的滚动需要实时的计算当前的透明度,滑动到最顶部的时候全透明显示,滑动出头部图片显示区域的时候则完全显示出来,并且界面滑动的过程需要监听每个对应模块滑动的偏移量,...图片预加载机制:precacheImage,合适的时机提前使用precacheImage对需要展示的图片数据进行预加载到内存,这样真正展示的时候,图片已经被加载到内存了,就可以在内容加载达到“

    1.5K20

    Wrap

    前言 ---- 在前面的文章我们讲了很多Widget的用法,包括简单的Widget和复杂一点的布局,其实归根到底都是为了解决我们界面布局上的需求,最近很多童鞋私信我Flutter中有没有类似Ios,...Android上的流式布局,答案是肯定的啊,既然都说到这里了,今天我们就来看下Flutter强大的流式布局吧。...在这种情况下我们的组件就很有可能会超出屏幕的范围,或者达不到我们预期的效果。 所以,我们就需要借助于流式布局来解决这个问题。流式布局会根据当前屏幕的尺寸和当前组件尺寸来看是否进行换行显示。...如: 当我们想要在一行显示多个Button就会出现如图的问题,超出屏幕的Widget并不会显示。 ? 但是,我们其实想要的是这样的效果 ?...所以,今天我们来看下Flutter的流式布局 Wrap Wrap的中文意思就是包裹的意思,真直接,哈哈,用起来也是很直接的。

    1.6K50

    Flutter常见开发问题

    当您运行 Flutter 项目它会根据运行的模拟器或设备进行构建,使用其中的文件夹进行 Gradle 或 XCode 构建。...创建发布版本,只会获取所需的资源,并获得我们更习惯的大小。Flutter 应用程序仍然会比 Android 应用程序大一点,但它相当小,而且 Flutter 团队一直寻找减少应用程序大小的方法。...下次重新启动或热加载应用程序时,Flutter 基本上会在现有应用程序之上修补更改,从而提供极快的刷新。 注意:通过热重载或重启所做的更改不会保存在设备 APK 或 IPA 文件。...当计数改变,需要刷新屏幕以显示新值。setState() 本质上是一种告诉应用程序使用新值刷新和重建屏幕的方法。 什么是有状态和无状态小部件? TL;DR:允许您刷新屏幕的小部件是有状态小部件。...您不小心移动了几个括号后,它会使您的代码更漂亮。 为什么我们将函数传递给小部件? 我们将一个函数传递给一个小部件,本质上是说,“当有事情发生时调用这个函数”。

    6.7K20

    Flutter常见开发问题

    当您运行 Flutter 项目它会根据运行的模拟器或设备进行构建,使用其中的文件夹进行 Gradle 或 XCode 构建。...创建发布版本,只会获取所需的资源,并获得我们更习惯的大小。Flutter 应用程序仍然会比 Android 应用程序大一点,但它相当小,而且 Flutter 团队一直寻找减少应用程序大小的方法。...下次重新启动或热加载应用程序时,Flutter 基本上会在现有应用程序之上修补更改,从而提供极快的刷新。 注意:通过热重载或重启所做的更改不会保存在设备 APK 或 IPA 文件。...当计数改变,需要刷新屏幕以显示新值。setState() 本质上是一种告诉应用程序使用新值刷新和重建屏幕的方法。 什么是有状态和无状态小部件? TL;DR:允许您刷新屏幕的小部件是有状态小部件。...您不小心移动了几个括号后,它会使您的代码更漂亮。 为什么我们将函数传递给小部件? 我们将一个函数传递给一个小部件,本质上是说,“当有事情发生时调用这个函数”。

    6.8K30

    Flutter 2 正式出道(一)

    Flutter 2,由于Flutter Web的出道,Flutter将代码重用能力提升到了另一个层次。所以,现在当你使用Flutter 2创建新项目的时候,web将成为新的支持平台。 ?...通过将空检查合并到类型系统,可以开发过程捕获这些错误,从而防止生产崩溃。 从基于Dart 2.12的Flutter 2开始,Flutter已开始完全支持空空全了。...新的iOS特性 尽管Flutter团队一直致力于提高对其他平台支持质量,但请不要就这样以为他们把iOS抛至脑后了。...的创建是为了解决一些和SnackBar有关的问题,包括轻松响应AppBar动作创建SnackBar,创建在Scaffold转换之间持久保存的SnackBars的能力,以及即使用户导航到具有其他Scaffold的页面也能够异步操作完成显示...image 所有的这些好处,我们只需要几行代码就能实现显示SnackBar: final messenger = ScaffoldMessenger.of(context); messenger.showSnackBar

    1.5K10

    【译】Flutter 1.20 发布

    Flutter 和 Dart 的性能改进 Flutter 团队,我们一直寻找减少应用程序大小和延迟的新方法。...如果想利用此高级功能,请参见 flutter.dev 上的 SkSL 预热页面。 最后,当我们针对 desktop 进行优化时,我们将继续完善对鼠标的支持。...如果你有兴趣向 InteractiveViewer 启用的 Flutter 应用程序添加新的交互,那么你可能也会很高兴听到我们在此版本添加了更多功能来拖动“n”。...Updating import statements on file rename Visual Studio Code 的另一个新功能是重命名更新导入,当文件被移动或重命名它会自动更新导入语句...Typesafe platform channels for platform interop 为了响应用户调查插件作者的普遍需求,最近我们一直尝试如何使 Flutter 与主机平台之间的通信对于插件和

    4K10

    Flutter性能调优、复杂业务保证Flutter的高性能高流畅

    原文地址https://www.aiprose.com/blog/122 点击查看Demo源码 高性能高流畅度一直Flutter团队宣传的一大亮点,也是当初选择Flutter的重要因素之一,但是随着复杂业务的应用落地...·Widget: 存放渲染内容、只是一个配置数据结构,创建是非常轻量的,页面刷新的过程随时会重建 ·Element: 同时持有Widget和RenderObject,存放上下文信息,通过来遍历视图树...大部分widget都是静态的,只有黄色Container包含一个内容一直刷新的Text,这个时候我们打开debugProfileBuildsEnabled,用Timeline分析下的渲染耗时,可以通过...结合第一部分渲染原理我们了解到,每次定时器刷新text数字的时候,整个页面widget树都会重新build,但其实只有最底层Container的Text内容改变,没有必要刷新整颗树,所以这里我们的优化方案是提高....减少build逻辑处理,因为widget页面刷新的过程随时会通过build重建,build调用频繁,我们应该只处理跟UI相关的逻辑 2.减少saveLayer(ShaderMask、ColorFilter

    1.2K31

    干货 | 携程酒店Flutter性能优化实践

    对于手机客户端来说,主流显示屏的刷新率为60Hz,高端手机显示刷新率可以达到120Hz及以上。理想情况下,页面绘制的FPS和屏幕刷新率一致。...,使用了 saveLayer 的 Widget 会自动显示为棋盘格式,并随着页面刷新而闪烁。...我们的框架也利用此方法监控了我们app的每个页面是否退出还存在泄漏。 另外通过Flutter的Dev tool的内存监控工具也能实现对泄漏对象的发现。...plugin调用时,对于result的调用返回不是一直都会做的,需要等到满足条件才会做这件事情,而如果它不做这件事情,对应的flutter那边的闭包就会一直被保存在引擎,这个引用链也会一直存在,从而造成这个引用链上的对象都泄漏了...cancel();} 这种等待对异步调用的回调监听其实都可能存在类似问题,只不过如果是单纯Dart的异步调用一般不会存在这种不回调的情况。

    2K10

    Flutter 构建完整应用手册-设计基础知识 顶

    显示SnackBars 某些情况下,当发生某些操作可以方便地向用户简单通知。 例如,当用户列表删除消息,我们可能想通知他们消息已被删除。 我们甚至可能想给他们一个撤消行为的选择!...(snackBar); 3.提供额外的操作 某些情况下,我们可能希望显示SnackBar向用户提供额外的操作。...}, ), ); 完整的例子 注意:本例,我们将在用户点击按钮显示SnackBar。 有关处理用户输入的更多信息,请参阅食谱的处理手势部分。...3.为每个选项卡创建内容 现在我们有了选项卡,我们希望选择标签显示内容。 为此,我们将使用TabBarView部件。 注意:顺序很重要,必须与TabBar的选项卡顺序相对应!...当用户打开抽屉Flutter会将抽屉添加到引擎盖下的导航堆栈。 因此,要关闭抽屉,我们可以调用Navigator.pop(context)。

    7.1K10

    【r_upgrade】快来升级你的Flutter应用

    image 介绍 移动开发过程,应用升级是必不可少的一个环节,所以,r_upgrade应用升级插件就出现了,这里先鼓掌欢迎??...STATUS_SUCCESSFUL下载成功 STATUS_FAILED下载失败 STATUS_CANCEL下载取消 注意: 部分http下载链接可能返回 max_length = -1,请自行判断...],不会发生任何变化 // 调用此方法前状态为 [STATUS_SUCCESSFUL],将会安装应用 // 当文件被删除,重新下载 } 7....(SnackBar(content: Text('热更新失败,请等待更新包下载完成'))); } - 重启应用即可 注意,Android应用,请确保AndroidManifest.xml...声明以下权限,并在6.0系统上进行动态授权,不然会调用升级方法将抛出权限异常 <uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES

    1.6K50
    领券