FutureBuilder
在实际开发中，进入一个页面后执行网络请求加载数据并显示是非常普遍的，这时候我们一般会显示loading直到加载完成显示正常页面。在flutter中我们可以在initState中发起异步请求，然后将请求结果赋值给data，并setState刷新页面，在build中可以这样实现

if(data == null){
    return _LoadingWidget()
}
else{
    return ...
}

实际上flutter提供了一个FutureBuilder专门来处理需要异步的组件，下面是一个简单的示例：

var _future = Future.delayed(Duration(seconds: 3), () {
   // 堆代码 duidaima.com
    return '服务器返回的数据';
  });
 
FutureBuilder(
      future: _future,
      builder: (context, snapshot) {
        var widget;
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasError) {
            widget = Text("出错了");
          } else {
            widget = Text(snapshot.data);
          }
        } else {
          widget = Padding(
            padding: EdgeInsets.all(20),
            child: CircularProgressIndicator(),
          );
        }
 
        return Center(
          child: widget,
        );
      },
    );

可以看到FutureBuilder有两个主要属性:
future：异步处理的任务。比如请求数据，读取文件等等
builder：创建widget。其中它的snapshot是该组件当前的状态，我们通过它来实现组件的切换。

snapshot的connectionState表示异步任务的状态，如果是ConnectionState.done表示任务完成，这时候通过snapshot.hasError来区分是出错（显示错误）还是正常完成（显示数据）；否则就表示任务在执行中（显示laoding）。我们通过这些状态来返回不同的组件来实现异步加载的过程。

当任务正常完成（ConnectionState.done且snapshot.hasError为false）时，我们可以通过snapshot.data来获取异步返回的数据，再渲染页面即可。

防止FutureBuilder重绘
FutureBuilder是一个StatefulWidget控件，如果父节点重绘rebuild那么FutureBuilder也会重绘，但是这时候可能我们根本不是要请求数据，可能仅仅是更新页面上的一个文案，这样就会造成不必要的浪费和消耗，我们要尽量避免，所以就需要防止FutureBuilder重绘。

FutureBuilder重绘源码如下：

@override
  void didUpdateWidget(FutureBuilder<T> oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.future != widget.future) {
      if (_activeCallbackIdentity != null) {
        _unsubscribe();
        _snapshot = _snapshot.inState(ConnectionState.none);
      }
      _subscribe();
    }
  }

可以看到它是判断futrue是否是同一个对象来执行重绘的，所以我们只要提前将异步任务的函数赋值给一个变量，然后在FutureBuilder中使用这个变量即可，如下：

var _mFuture;
 
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _mFuture = _future();
  }
 
 _future() async{
    ...
  }
 
FutureBuilder(
    future: _mFuture,
    ...
)

这样重绘的时候因为是同一个对象，所以FutureBuilder不会重绘，减少了不必要的资源损耗。