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

有没有可能创建一个使用FutureBuilder的函数,而不需要重复代码?

是的,可以通过创建一个通用的函数来使用FutureBuilder,以避免重复代码。下面是一个示例:

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

FutureBuilder<T> createFutureBuilder<T>(
    {@required Future<T> future,
    @required Widget Function(BuildContext, AsyncSnapshot<T>) builder,
    Widget Function(BuildContext) loadingBuilder,
    Widget Function(BuildContext, dynamic) errorBuilder}) {
  return FutureBuilder<T>(
    future: future,
    builder: (BuildContext context, AsyncSnapshot<T> snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return loadingBuilder != null
            ? loadingBuilder(context)
            : Center(child: CircularProgressIndicator());
      } else if (snapshot.hasError) {
        return errorBuilder != null
            ? errorBuilder(context, snapshot.error)
            : Center(child: Text('Error: ${snapshot.error}'));
      } else {
        return builder(context, snapshot);
      }
    },
  );
}

使用这个通用函数,你可以在任何需要使用FutureBuilder的地方调用它,而不需要重复编写相同的代码。例如:

代码语言:txt
复制
createFutureBuilder<String>(
  future: fetchData(),
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    return Text(snapshot.data);
  },
  loadingBuilder: (BuildContext context) {
    return Center(child: CircularProgressIndicator());
  },
  errorBuilder: (BuildContext context, dynamic error) {
    return Center(child: Text('Error: $error'));
  },
);

这样,你可以根据需要自定义加载中和错误时的UI,并在builder函数中处理数据。这个通用函数可以用于任何返回Future的异步操作,使代码更加简洁和可维护。

关于FutureBuilder的更多信息和使用示例,你可以参考腾讯云的Flutter开发文档:FutureBuilder

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

相关·内容

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

,我们知道then().catchError()模式类似于try-catch,try-catch有个finally代码块,future.whenComplete就是Futurefinally。...; }); } future.timeout 完成一个异步操作可能需要很长时间,比如:网络请求,但有时我们需要为异步操作设置一个超时时间,那么,如何为Future设置超时时间呢?...类型回到函数,是一个基于异步交互构建widget函数; 这个builder函数接受两个参数BuildContext context 与 AsyncSnapshot snapshot,它返回一个...现在我们可以看到使用FutureBuilder基本模式。 在创建FutureBuilder对象时,我们将Future对象作为要处理异步计算传递。...在构建器函数中,我们检查connectionState值,并使用AsyncSnapshot中数据或错误返回不同窗口小部件。

2.2K10

FLutter异步加载组件FutureBuilder

FutureBuilder 在实际开发中,进入一个页面后执行网络请求加载数据并显示是非常普遍,这时候我们一般会显示loading直到加载完成显示正常页面。...比如请求数据,读取文件等等 builder:创建widget。其中它snapshot是该组件当前状态,我们通过它来实现组件切换。...防止FutureBuilder重绘 FutureBuilder一个StatefulWidget控件,如果父节点重绘rebuild那么FutureBuilder也会重绘,但是这时候可能我们根本不是要请求数据...,可能仅仅是更新页面上一个文案,这样就会造成不必要浪费和消耗,我们要尽量避免,所以就需要防止FutureBuilder重绘。...,所以我们只要提前将异步任务函数赋值给一个变量,然后在FutureBuilder使用这个变量即可,如下: var _mFuture; @override void initState()

2.1K30

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

下面看看如何在Flutter中实现上面的例子: 为电影项目创建一个无状态Widget(无状态,因为包含静态属性),接收一个movie(例如Dart类)作为构造函数参数,并以声明方式描述布局,同时绑定电影值...最重要是,我们使用FutureBuilder(Flutter SDK一部分),它需要我们指定一个Future(回调)和一个构建器函数。...使用这个,我们可以检索一个电影,给定Future结果列表,快照,并创建一个MovieListItem-Widget(在步骤1中创建),并将该电影作为构造函数参数。...Flutter可能远远超出Android和iOS领域; 你应该有听说Google正在开发一个名为Fuchsia新操作系统。 事实证明,Fuchsia用户界面正在使用Flutter构建。...还有另外一个问题:你有没有问过为什么在Android上创建工具栏菜单非常复杂?

2K10

Flutter | 事件循环,Future

; }); async,await async:用来表示函数是异步,定义函数会返回一个 Future 对象,可以使用 then 添加回调函数 await :后面是一个 Future,表示等待改异步任务完成...构造 future :接受一个 future,当 future 值发生变化之后,就会自动调用下面的 build 函数, initialData:初始值,在 future 没完成时候可以暂时使用该值...源码其实很简单,仔细看一下就知道整个流程了 StreamBuilder 介绍 上面的 FutureBuilder 只能给我们一个值, StreamBuildder 可以给我们一连串值 ,例如: final...其实和 FutureBuilder 差不多,只不过多了一个 active 状态,这个状态在上面没有说是因为用不到**,在这里意思指就是数据流是否为活跃**,如果是活跃,则就可以获取他值了 创建方式及常用函数...: final controller = StreamController.broadcast(); 只需要在创建时候使用 broadcast() 即可 这两者有一个非常明显区别就是缓存,默认创建方式是有缓存

4.2K10

【 源码之间 - Flutter 】 FutureBuilder源码分析

3 】: 禁止使用源码之间视频资源做任何盈利行为是事,违者必究。 4 】: 源码之间直播内容主要是源码分析,也可能是分享和研究某一编程问题。...FutureBuilder使用 先定义异步任务和当前页码,在使用FutureBuilder进行构造组件。全代码见文尾。...FutureBuilder组件类 FutureBuilder一个具有泛型T类,T代表异步数据类型,这里也就是List FutureBuilder一个StatefulWidget...FutureBuilder核心逻辑 _snapshot初始化完成,然后执行_subscribe()这是FutureBuilder灵魂 如果widget.future非空,会创建callbackIdentity...---- initState完成,之后会调用State#build 这里是用来外部传builder方法来创建组件,其中会回调_snapshot给外界使用 这时_snapshot状态是waiting

1.9K10

Flutter Widgets 之 FutureBuilder

展示异步任务状态 当有一个Future(异步)任务需要展示给用户时,可以使用FutureBuilder控件来完成,比如向服务器发送数据成功时显示成功提示: var _future = Future.delayed...builder是FutureBuilder构建函数,在这里可以判断状态及数据显示不同UI, ConnectionState状态包含四种:none、waiting、active、done,但我们只需要关注...ListView加载网络数据 FutureBuilder还有一个比较常用场景:网络加载数据并列表展示,这是一个非常常见功能,在网络请求过程中显示loading,请求失败时显示失败UI,成功时显示成功...通过源代码发现FutureBuilder重绘逻辑是这样: @override void didUpdateWidget(FutureBuilder oldWidget) { super.didUpdateWidget...在重建时判断旧future和新future是否相等,如果不相等才会重建,所以我们只需要让其相等即可,有人可能会以为设置future是同一个函数,如下: _future() async{

1.2K40

【 源码之间 - Flutter 】 FutureBuilder 使用

加载中 加载完成 加载失败 ---- 一、示例demo详述: 1.关于异步请求 FutureBuilder需要一个异步任务作为构造入参 通过wanandroid开发api进行文章列表获取,...FutureBuilder使用 先定义异步任务和当前页码,在使用FutureBuilder进行构造组件。全代码见文尾。...FutureBuilder组件类 FutureBuilder一个具有泛型T类,T代表异步数据类型,这里也就是List FutureBuilder一个StatefulWidget...FutureBuilder核心逻辑 _snapshot初始化完成,然后执行_subscribe()这是FutureBuilder灵魂 如果widget.future非空,会创建callbackIdentity...方法来创建组件,其中会回调_snapshot给外界使用 这时_snapshot状态是waiting; @override Widget build(BuildContext context)

1.1K20

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

文章目录 一、FutureBuilder 简介 二、处理 Flutter 中中文乱码 三、完整代码示例 四、相关资源 一、FutureBuilder 简介 ---- FutureBuilder 本质是组件...: FutureBuilder 构造好以后 , 会自动执行异步操作 , 并返回 Widget 组件 , 因此 FutureBuilder 也是一个组件 , 在不同状态下显示不同样式组件 ; FutureBuilder...> 类型方法 , 可以直接设置给 FutureBuilder 构造函数作为参数 ; /// 调用 Http Get 方法 , 获取服务器 json 数据 Future snapshot); 传入参数如下 : 自己写一个匿名函数 , 参数是 BuildContext context, AsyncSnapshot snapshot...构造函数完整代码示例 : @override Widget build(BuildContext context) { return MaterialApp( home:

1.6K20

Flutter TDD 心路历程

按照我们常规开发流程或者习惯,我们在实现时候可能会忍不住想去优化代码,去想各种边界条件,然后写出一个比较完善实现版本。...先记住一个原则:我们所写每一行代码,都尽可能先编写好测试用例来覆盖,即先写测试用例,再写实现 这里我们先忍着不着急去优化或者重构,我们继续往下 1.2 第二个用例:加载结果为空列表显示 empty 页面...同时因为我们需要验证页面是否展示对应 item,还需要一个列表 item 构建回调函数 单测代码如下 testWidgets("加载成功且数据不为空,列表展示对应数据 item", (tester...这里使用 FutureBuilder 来加载第一页数据(见注释 1),用 isFirstLoad 来表示是否加载第一页。...,比如我们不需要验证一个传入了 “Hello” Text widget 是否真的显示了 “Hello” 字样;比如我们不需要验证一个没有任何逻辑分支代码段等等。

1.1K20

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

以前就想过要开发一个APP,来随机决定明天吃什么菜,然而世界上最痛苦事情是: 我是一个 Android 开发崽,女朋友用是 iPhone!这难道就是世界上最遥远距离吗?!...BLoC模式 所以我决定使用 BLoC 模式,因为不需要在其他页面使用,所以就定义了一个局部: class RandomMenuBLoC { StreamController _meatController...显示截图 从 gif 可以看到,在截图以后会先显示一个小菊花,然后弹出当前所截图片,一会以后会消失,这里使用是 showDialog 配合 FutureBuilder。...因为截图会有一定延时,并且返回值为一个 Future ,那我们没有理由不用 FutureBuilder,如有不了解 FutureBuilder ,可以查看我这篇文章:Flutter FutureBuilder...使用方法也很简单,一行代码就搞定: _saveImage(Uint8List img) async { await ImageGallerySaver.save(img); } 七天之内不能出现重复菜品

1.1K50

【Flutter 实战】文件系统目录

getApplicationDocumentsDirectory 应用程序可能在其中放置用户生成数据或应用程序无法重新创建数据目录路径。...由于此功能仅在Android上可用,因此应在发出此函数调用之前确定当前操作系统。在iOS上,此功能会抛出UnsupportedError,因为这是不可能在应用程序沙箱外部访问。...由于此功能仅在Android上可用,因此应在发出此函数调用之前确定当前操作系统。在iOS上,此功能会抛出UnsupportedError,因为这是不可能在应用程序沙箱外部访问。...内部存储特点: 安全性,其他应用无法访问这些数据。 当应用卸载时候,这些数据也会被删除,避免垃圾文件。 不需要申请额外权限。...这里面有一个特殊目录:Android/data/包名: ? 看到这个目录是不是觉得和内部存储目录非常相似,一个包名代表一个应用程序: ?

2.7K10

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

为了让我们生活更轻松,我们可以将http.Response转换为我们自己Dart对象。 创建一个Post类 首先,我们需要创建一个Post类,其中包含来自我们网络请求数据。...它还将包含一个工厂构造函数,允许我们从json创建一个Post。 手动转换JSON只是一种选择。 有关更多信息,请参阅关于JSON和序列化完整文章。...现在我们有一个功能,我们可以调用从互联网上获取Post! 3.用Flutter获取并显示数据 为了获取数据并将其显示在屏幕上,我们可以使用FutureBuilder小部件!...Flutter附带FutureBuilder部件,可以轻松处理异步数据源。 我们必须提供两个参数: 使用Future。 在我们例子中,我们将调用我们fetchPost()函数。...一个builder函数,告诉Flutter渲染什么,取决于Future状态:加载,成功或错误。

2.5K20

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

通过调整这些属性,我们可以创建一个与应用设计语言完美匹配刷新指示器 indicator。 实现 OnRefresh 回调函数 OnRefresh 回调函数才是神奇发生地方。...; }); } 在上面的代码片段中,fetchData 是一个假设异步函数,用来获取新数据。...优化刷新体验 优化刷新体验不仅仅是更新数据;这是为了创建一种让用户感觉自然无缝且直观交互。在 Flutter 应用中,平滑刷新动作和正确错误处理是提升用户满意度和信任度关键。...为了充分利用热加载,请使用模块化构建代码,在不同函数或者类中分离获取刷新数据逻辑和更新 UI。这会让我们独立更改和测试小块代码,降低引入错误风险并加快开发过程。...,_handleRefresh 函数可以使用热加载来更改和测试,不影响到其他 widget tree。

13110

ui.Image加载探索

1.如何使用Canvas绘制图片 上面在CanvasdrawImage中,你会看到一个Image参数,你会想,这不好办吗?..._data); } 当跳入Image中是发现是ui/paintingImage,而且该类被私有化构造 就说明无法被直接创建,更有意思是几乎都是native方法。...中有两个键值参数,可以确定图片加载出来宽高 未了使用方便,这里提取一个ImageLoader用于加载图片,使用单例模式:使用 ImageLoader.loader.loadImageByFile("...网络图片太大,想要在本地保存一个缩略图,如何实现? 3.保存网络图片缩略图 主要通过PictureRecorder对Canvas进行录制,使用Canvas对图片进行重定尺寸。...对于缓存文件期限,可以用一个追踪文件进行记录,在访问网络图片时首先看有没有缓存文件 然后看缓存文件有没有过期,如果过期,则删除,重新加载并缓存到本地。

4.3K20

Flutter 性能优化一些路径思考

例如,我们可以使用ListView.builder来构建列表,不是使用ListView。...懒加载是一种只在需要时才加载数据技术。例如,我们可以使用FutureBuilder或StreamBuilder来实现懒加载,这样就可以避免一次性加载所有的数据,从而减少内存使用。...我们也可以使用 Dart DevTools CPU 分析器来查看 CPU 使用情况,以及每个函数执行时间。...例如,我们可以使用图片缓存(ImageCache)来缓存图片,这样就可以避免每次都从网络上下载图片。另外,我们也可以使用Memoization技术来缓存函数结果,这样就可以避免重复计算。...有些操作,如 JSON 序列化和反序列化,如果直接使用 Dart 核心库进行操作,可能会影响应用性能。

45720

让Flutter 应用程序性能提高 10 倍 10 个技巧

Flutter 应用程序以其精美的设计和流畅功能闻名,但性能问题会很快破坏用户体验。借助这 10 个优化性能专家技巧,将您应用提升到一个水平。...StreamBuilder 不是 FutureBuilder可能使用“StreamBuilder”不是“FutureBuilder”。...CustomScrollView 不是 ListView 尽可能使用“CustomScrollView”不是“ListView”。...Wrap 小部件不是 ListView 小部件 尽可能使用“Wrap”小部件不是“ListView”小部件。...使用“PerformanceOverlay”小部件查看应用程序性能实时可视化。此小部件可以帮助您识别应用程序中可能导致性能问题区域,并为您提供有关如何优化它们想法。

73521
领券