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

Flutter FutureBuilder/Stream如何根据给定时间在ConnectionState.waiting中显示2种不同的小部件

Flutter中的FutureBuilder和StreamBuilder是两个常用的小部件,用于根据异步操作的状态来构建UI。它们可以根据给定的时间在ConnectionState.waiting中显示不同的小部件。

  1. FutureBuilder:
    • 概念:FutureBuilder是一个小部件,用于构建基于Future的异步操作的UI。它接收一个Future对象,并根据异步操作的状态来构建不同的小部件。
    • 分类:属于Flutter中的异步UI构建小部件。
    • 优势:FutureBuilder可以方便地处理异步操作的不同状态,包括连接中、完成和错误等状态。
    • 应用场景:适用于需要根据异步操作的状态来构建UI的场景,例如网络请求、数据库查询等。
    • 推荐的腾讯云相关产品和产品介绍链接地址:暂无。
  • StreamBuilder:
    • 概念:StreamBuilder是一个小部件,用于构建基于Stream的异步操作的UI。它接收一个Stream对象,并根据异步操作的状态来构建不同的小部件。
    • 分类:属于Flutter中的异步UI构建小部件。
    • 优势:StreamBuilder可以方便地处理基于流的异步操作,实时更新UI。
    • 应用场景:适用于需要实时更新UI的场景,例如聊天应用、实时数据展示等。
    • 推荐的腾讯云相关产品和产品介绍链接地址:暂无。

根据给定的时间在ConnectionState.waiting中显示2种不同的小部件的示例代码如下:

代码语言:txt
复制
FutureBuilder(
  future: Future.delayed(Duration(seconds: 2)), // 模拟一个异步操作,延迟2秒
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      if (DateTime.now().second % 2 == 0) {
        // 每隔2秒显示不同的小部件
        return CircularProgressIndicator(); // 第一种小部件
      } else {
        return Text('Loading...'); // 第二种小部件
      }
    } else if (snapshot.connectionState == ConnectionState.done) {
      return Text('Data loaded'); // 异步操作完成后显示的小部件
    } else {
      return Text('Error'); // 异步操作出错时显示的小部件
    }
  },
)

以上代码中,FutureBuilder接收一个Future对象,通过判断连接状态来构建不同的小部件。在ConnectionState.waiting状态下,根据给定的时间显示不同的小部件。如果连接状态为ConnectionState.done,则显示数据加载完成后的小部件;如果连接状态为其他状态,则显示错误信息的小部件。

注意:以上答案仅供参考,具体的实现方式可能会因为不同的业务需求而有所变化。

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

相关·内容

Flutter FutureBuilder 异步UI神器

一般程序员都会了解,类似于 IO、网络请求等都应该是异步的。 在Dart中,我们使用 Future 来管理,这样就不用担心线程或者死锁的问题。...那么当 Flutter 涉及到 Future 的时候,widget 该如何去构建呢? 在网络请求 开始前、请求中、请求完成或失败,我们应该如何去管理我们的UI?...FlutureBuilder 有两个参数: future:这个参数需要一个 Future 对象,类似于 网络请求、IO builder:这个参数需返回一个 widget,我们可以看到 demo 中根据现在快照不同的连接状态返回不同的...我们在打开一个页面的时候肯定会有网络请求,这个时候要显示 loading 之类的,我们就可以利用当前快照的状态来返回不同的 widget,比如这样: ?...body 直接返回一个 FutureBuilder,根据不同状态来返回了不同的 widget。

4.8K30
  • Flutter | 事件循环,Future

    正文 在 Dart 中,没有多线程的概念,所谓的异步操作全部都是在一个线程里面执行的, 并且不会造成卡顿的原因就是事件循环(Event Loop), 如下图所示,在程序的运行过程中,会有两个事件...在程序执行过程中,如果有异步操作,这个操作就会添加到队列中,当发现队列不为空时,就会然后不断的从队列中取出事件在执行 Microtask Queue 一个顶级的队列,只要这个队列里面不是空的,就一定会执行该队列中的任务...FutureBuilder 的作用就是根据 future 的状态来判断当前页面需要显示哪些 widiget,例如 future 在等待的时候显示加载框,完成之后显示内容等。...需要注意的是使用完成之后要进行关闭操作,否则就会泄漏资源 并且 flutter 会一直警告, 上面的这种方式只能有一个监听,如果添加多个监听则就会保存,那么如何添加多个监听呢,可以使用广播的方式,如下...x 轴的位置以及动画的执行时间,最后开启动画 build 中其实是很简单的,使用了 AnimatedBuilder 来监听动画,当动画值改变后则会重新 setState(),内部就是一个小按钮,记录了题目

    4.3K10

    Flutter异步编程Future与FutureBuilder的实用技巧

    ,以及FutureBuilder常见的用法?等。 在大家Flutter开发环境过程中遇到无法解决的问题可以在课程问答区进行提问,课程老师会对你进行辅导和帮助; 目录 什么是Future?...Future表示在接下来的某个时间的值或错误,借助Future我们可以在Flutter实现异步操作。...; }); } future.timeout 完成一个异步操作可能需要很长的时间,比如:网络请求,但有时我们需要为异步操作设置一个超时时间,那么,如何为Future设置超时时间呢?...在构建器函数中,我们检查connectionState的值,并使用AsyncSnapshot中的数据或错误返回不同的窗口小部件。...https://flutter-academy.com/async-in-flutter-futurebuilder/ FutureBuilder的使用?

    2.3K10

    在 Flutter 中探索 StreamBuilderimage

    正文 异步交互可能需要一个理想的机会来进行总结。偶尔,在周期结束之前可能会发出一些值。在 Dart 中,您可以创建一个返回 Stream 的容量,该容量可以在异步进程处于活动状态时发射一些值。...假设您需要根据一个 Stream 的快照在 Flutter 中构造一个小部件,那么有一个名为 StreamBuilder 的小部件。...在这个博客中,我们将探索 Flutter 中的 StreamBuilder。我们还将实现一个演示程序,并向您展示如何在您的 Flutter 应用程序中使用 StreamBuilder。...参数: 下面是 StreamBuilderare 的一些参数: Key? key: 小部件的键,用于控制小部件如何被另一个小部件取代 Stream?...建造函数称为 Flutter 管道的检测。因此,它将获得一个与时间相关的快照子组。这意味着,如果在实际上相似的时间里,Stream 发出了一些值,那么一部分值可能没有传递给构建器。

    2.5K00

    【Flutter】Future 与 FutureBuilder 异步编程代码示例 ( FutureBuilder 构造函数设置 | 处理 Flutter 中文乱码 | 完整代码示例 )

    文章目录 一、FutureBuilder 简介 二、处理 Flutter 中的中文乱码 三、完整代码示例 四、相关资源 一、FutureBuilder 简介 ---- FutureBuilder 本质是组件...: FutureBuilder 构造好以后 , 会自动执行异步操作 , 并返回 Widget 组件 , 因此 FutureBuilder 也是一个组件 , 在不同的状态下显示不同样式的组件 ; FutureBuilder...泛型设置 : FutureBuilder 的泛型 , 表示异步调用得到的 Future 的泛型 , 也就是返回结果的格式 ; FutureBuilder 表示异步调用 Future..., 开始根据 AsyncSnapshot snapshot 参数进行各种操作 , BuildContext context 参数在本次没有用到 ; 通过 snapshot.connectionState...可以获取当前异步请求的状态 , 可以在请求中显示进度条 , 请求后判定是否请求成功 , 如果出错 , 则显示报错信息 , 如果请求成功 , 则显示请求成功的信息 ; 无论怎样 , 最终要返回一个 Widget

    2.4K20

    FutureBuilder与Stream

    Flutter 流水线决定如何调用 builder 回调,该回调接收一个跟时间无关的、代表 Future 交互过程的 snapshot 序列 (receive a timing-dependent sub-sequence...本文尝试讲清 Dart Stream 的用法,并且在系列文章中构建一些能感知的例子加强理解。...本文尝试讲清 Dart Stream 的用法,并且在系列文章中构建一些能感知的例子加强理解。...在这个通道中可以在到达 B 之前对”读入”的数据进行不同的变换。以小块来传输而不是整体传输数据时这个通道非常有用。 Dart 中使用 SDK 提供的工具类来使用 Stream。...但通常不直接使用这个类,而是在 Dart 库的其他类中向外暴露这个类。所以可以将其视为用于跟数据流动通道交互的接口。

    1K20

    Flutter 构建完整应用手册-联网 顶

    3.用Flutter获取并显示数据 为了获取数据并将其显示在屏幕上,我们可以使用FutureBuilder小部件! Flutter附带FutureBuilder部件,可以轻松处理异步数据源。...我们必须提供两个参数: 使用的Future。 在我们的例子中,我们将调用我们的fetchPost()函数。...在我们发送消息给测试服务器之后,它会发回相同的消息。 我们如何听取消息并显示它们? 在这个例子中,我们将使用StreamBuilder部件来侦听新消息和一个Text 部件来显示它们。...与将返回单个异步响应的Future不同,Stream类可以随着时间的推移传递许多事件。...StreamBuilder部件将连接到Stream,并在每次接收到事件时使用给定的builder函数请求Flutter重建!

    2.6K20

    一个会做饭的程序员如何每天给女朋友带不同的便当?

    该功能有如下三个小点: 1.如何保存截图2.显示截图3.保存截图到手机 如何保存截图 首先说如何保存截图,关于该功能,我也是网上查找资料所得, 地址为:FengY - Flutter学习 ---- 屏幕截图和高斯模糊...显示截图 从 gif 可以看到,在截图以后会先显示一个小菊花,然后弹出当前所截图片,一会以后会消失,这里使用的是 showDialog 配合 FutureBuilder。...因为截图会有一定的延时,并且返回值为一个 Future ,那我们没有理由不用 FutureBuilder,如有不了解 FutureBuilder 的,可以查看我的这篇文章:Flutter FutureBuilder...该功能也有几个小难点: 1.SharedPreferences 不能存储对象2.如何判断已经过了七天?...查看所有菜谱和菜谱使用的时间 该功能主要为装逼所用,别人一看:卧槽,会做这么多菜,牛逼??。 ? 该功能其实也有几个需要注意的点: 1.如何展示素菜和荤菜2.如何实时更新已经使用过/新增的菜?

    1.1K50

    抖音的强大对手来了,用Flutter手撸一个抖音国际版,看看有多炫

    前言 由于中间几个月项目天天加班,导致没没时间更新,最近一段时间对前端进行了重构,加了很多页面,如登录、注册、关注、个人中心等,目前写这个纯属业余个人爱好,所以断断续续的继续在做.........,flutter国家化按以下步骤 在pubspec.yaml文件加上 flutter: sdk: flutter flutter_localizations: sdk: flutter..., ); }, ); 然后在需要引用的位置加入: import 'package:flutter_gen/gen_l10n/app_localizations.dart'; 调用的位置...的时候请求的数据正在加载中,则显示加载的图标loading 当snapshot.connectionState == ConnectionState.done 时,此时数据已经加载完毕,但是加载完毕有可能也没有数据...,所以需要判断不同的情况 当加载出现异常情况则显示异常的widget if (snapshot.hasError) { return Column( crossAxisAlignment

    1.1K20

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

    它可以从父挂件中获取数据,管理状态并在页面之间导航。当实现下拉刷新,我们经常需要 BuildContext 来触发状态的更改或者在刷新后导航到不同的屏幕。...处理数据并刷新操作 在 Flutter 应用中引入一个 pull-to-refresh 特性不仅仅是视觉交互,也是关于如何高效处理数据和更新手势的操作。...这种方法可以让用户了解情况,并让他们了解应用程序内发生的情况,特别是在刷新操作花费的时间比预期更长或失败情况下。...在复杂的 Flutter 应用程序中拉动刷新 在更复杂的 Flutter 应用程序中,下拉刷新可能和多个状态层和数据源有交互。在这种场景中,实现一个能够处理复杂性的有强大状态管理的解决方案至关重要。...我们还深入通过平滑刷新操作来提升用户体验,优雅处理错误,在复杂应用程序中采用热重载和状态管理的最佳时间来提升开发效率。

    33510

    为什么说Flutter让移动开发变得更好?

    使用这个,我们可以检索一个电影,给定Future的结果列表,快照,并创建一个MovieListItem-Widget(在步骤1中创建),并将该电影作为构造函数参数。...不过,在Flutter,这分分钟解决。能够将用户界面的一部分抽取到像Widget这样的自包含单元中,可以轻松地在应用程序中甚至跨不同应用程序重复使用这些小部件。...那么应该如何进行对比?(免责声明:Flutter版本中还没有实现持久化,原生代码写的也很乱)。...Flutter使用Databinding相同的思想,即将视图/小部件绑定到变量,而无需在Java / Kotlin中手动管理数据绑定,不用专门的绑定文件来桥接XML和Java。...这样,我们的应用程序状态就不会与Views显示的内容不同步。 而Flutter正是这样做的! 还有另外一个问题:你有没有问过为什么在Android上创建工具栏菜单非常复杂?

    2K10

    我的 Flutter TDD 心路历程

    不过有句话说得好:“实践是检验真理的唯一标准,任何没有经过实践就轻易下的结论都是耍流氓”(后半句话是我说的,没错) 本文记录了我在 Flutter 中实践 TDD 的一些所思所考,全文根据真实经历,没有改编...从无到有 案例:实现一个通用的支持上滑加载下拉刷新的 Flutter 列表 用例梳理: 加载过程显示 loading 动画 加载结果为空列表显示 empty 页面 加载结果失败显示 error 页面 ....error 页面 有了前两个用例和实现铺垫,第三个用例就没有什么可讲了,增加一个判断逻辑即可,最终的单测代码和实现如下 void main() { group("feed 不同加载状态显示不同 widget...继续完善功能,增加用例:加载成功且数据不为空,列表展示对应数据的 item 编写单测 思考:我们期望传入 A,B,C 三个数据,在加载成功之后,页面中能够显示 A,B,C 三个 item。...,就可以把这种 bad case 扼杀在开发过程中,可以让我们交付出更有质量保障的代码 思考:刚刚出现的问题,code review 能够轻易的发现吗?

    1.2K20

    flutter系列之:在flutter中使用媒体播放器

    直播可能会比较复杂,因为涉及到了拉流和推流,需要服务器端的支持,但是视频播放就比较简单了,那么如何在flutter中使用媒体播放器呢? 一起来看看吧。... 在flutter中使用video_player video_player中和video播放相关的类叫做VideoPlayerController,在IOS中底层使用的是...video之前,还需要进行初始操作,初始化是调用它的initialize方法,这个方法的作用是打开给定的数据源,并加载它的元数据。...> playerFuture; playerFuture = videoPlayerController.initialize(); 有了播放器的Future,我们可以配合flutter中的FutureBuilder...因为不同的video有不同的纵横比,为了在flutter界面上完美的展示加载的video,我们将VideoPlayer封装在一个AspectRatio组件中。

    1.7K00

    Flutter 凉了吗?

    几年前,我在Android和iOS开发中略有涉足,使用的是Java和Objective-C。在花了大约一个月的时间学习后,我决定不再深入学习了。我就是无法找到那种深入其中的状态。...2 只写一次代码,就能同时在Android和iOS上运行 考虑到需要为Android和iOS使用不同的代码库,开发移动应用程序可能需要花费大量时间。...我更像是一个后端开发人员,所以当涉及到严重依赖它的东西时,我只想要一些简单的东西。这就是Flutter在我眼中闪耀的地方。 UI通过将不同的小部件组合在一起并修改它们以适合你的App外观来创建。...这只是Flutter提供的小部件中的几个,除这些之外还有很多。使用这些小部件,我们可以构建一个非常简单的UI: Flutter像一个拥有各种各样道具的魔术师,使你能轻而易举地构建App的主题。...这就是Flutter带着诸如FutureBuilder或StreamBuilder这样的小部件登场的时候了。

    3.1K20

    Flutter混编工程之通讯之路

    这个系列开始,我们将从「能用的Flutter」到「可用的Flutter」的迁移过程来讲解如何在实际项目中更好的使用Flutter,下面是第一篇。 对于混编工程来说,最常用的需求就是双端的数据通信。...在Flutter中,SDK提供了platform_channels来进行跨端通信,它的整体架构如下所示。...展示图片时,我们需要使用FutureBuilder来进行承载,根据Future的返回状态,来确定展示样式,代码如下所示。...首先,我们在Flutter中构建这样一个列表,用于展示一个信息List,信息的来源是原生侧,所以,在Flutter界面的initState中,我们创建一个名为stringCodecDemo的BasicMessageChannel...❞ 另外,不管是在Flutter中,还是在原生代码中,都是可以通过Channel来向对方通信的,以BasicMessageChannel为例,原生和Flutter侧,都可以调用send函数来发送消息,也都可以设置

    1.9K20

    【-Flutteru002FDart 语法补遗-】 sync* 和 async* 、yield 和yield* 、async 和 await

    记住一点yield*后面的表达式是一个Iterable对象 比如下面getEmoji方法是核心,现在想要打印每次的时间,使用getEmojiWithTime yield*之后的getEmoji(count...它标注在函数{ 之前,其方法必须返回一个 Stream对象 下面fetchEmojis被async*标注,所以返回的必然是Stream对象 注意被async*标注的函数,可以在其内部使用yield...的使用-StreamBuilder Stream在组件层面最常用的就数StreamBuilder,本文只是简单用一下,以后会有专文 StreamBuilder组件使用的核心就是,它接受一个Stream...对象, 根据builder函数在流元素的不同状态下构建不同的界面。...另外本人有一个Flutter微信交流群,欢迎小伙伴加入,共同分享Flutter的知识,期待与你的交流与切磋。

    72410

    Dart中的const,Flutter,Dart,React Native

    Flutter 采取不同的方法,试图使移动开发更好。 它提供了一个开发人员使用的应用程序框架和一个可移植的运行时引擎。该框架建立在 Skia 图形库上,提供实际呈现的部件,而不仅仅是原生控件的包装。...它还设置了一个有状态的部件,用于演示在应用程序状态更改时如何更新用户界面。 开发工具 Flutter 在开发工具的选择上很灵活。...两个常用的部件是行和列。这些部件执行布局以水平(行)或垂直(列)显示其子部件。 使用这些布局部件只需将它们包装在子部件列表中。...以下代码显示如何对齐行或列中的多个子部件: class MyStatelessWidget extends StatelessWidget { @override Widget build(BuildContext...以下示例显示如何使用它通过渐变来填充屏幕: 单一 动画 Flutter 包含一个 AnimationController 类,用于控制动画播放,包括开始和停止动画,以及改变动画的值。

    6300
    领券