Flutter踩坑小总结01----FutureBuilder

最新推荐文章于 2025-08-16 11:28:22 发布

原创

最新推荐文章于 2025-08-16 11:28:22 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter #FutureBuilder #EasyRefresh

本文介绍了Flutter中的异步组件FutureBuilder的使用方法，包括源码解析、官方Demo分析，强调了在使用FutureBuilder时需要注意避免重复调用接口的问题。此外，还探讨了FutureBuilder与上拉加载下拉刷新插件EasyRefresh的结合使用，提供了相关代码示例。

Flutter踩坑小总结01----FutureBuilder

关于组件FutureBuilder
- FutureBuilder的使用方法
- - FutureBuilder的源码
  - 官方Demo
使用FutureBuilder需要注意的事项
- FutureBuilder和EasyRefresh

关于组件FutureBuilder

FutureBuilder是Flutter的一个异步组件，返回值是一个Futter，当需要网络请求等异步操作时，就可以用到这个组件，比如需要请求网络数据后再显示页面，否则就显示等待图或者占位图等。

FutureBuilder的使用方法

FutureBuilder的源码

class FutureBuilder<T> extends StatefulWidget {
   
   
	const FutureBuilder({
   
   
		 Key key,
		this.future,
		this.initialData,
		@required this.builder,
	}) : assert(builder != null),
		super(key: key);
	final AsyncWidgetBuilder<T> builder;
	
	...
	
	@override
	State<FutureBuilder<T>> createState() => _FutureBuilderState<T>();
}

class _FutureBuilderState<T> extends State<FutureBuilder<T>> {
   
   
	...
	@override
	Widget build(BuildContext context) => widget.builder(context, _snapshot);
	...
	
}

可以看到build方法直接返回了用户设置的参数的builder方法。

FutureBuilder的两个重要参数：

future：这里需要返回一个Futter，来实现异步请求网络、IO等方法。
builder：这里需要返回一个widget，即根据返回的数据生成，builder的两个参数分别是环境变量context和连接状态snapshot。

官方Demo

FutureBuilder<String>(
  future: _calculation, // a previously-obtained Future<String> or null
  builder: (BuildContext context, AsyncSnapshot<String> snapshot)