flutter异步组件FutureBuilder

FutureBuilder是一个很实用的组件而且功能强大，在实际的项目中也是用的很多的。
FutureBuilder最常用的场景应该是异步的网络请求，示例的代码如下：

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class FutureBuilderScreen extends StatefulWidget {
  FutureBuilderScreen({Key key}) : super(key: key);

  @override
  _FutureBuilderScreenState createState() => _FutureBuilderScreenState();
}

class _FutureBuilderScreenState extends State<FutureBuilderScreen> {
  Future<dynamic> data;

  Future<dynamic> fetchData() async{
    await Future.delayed(Duration(seconds: 3));
    return http.get('https://www.baidu.com/');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('FutureBuilder')),
      body: FutureBuilder(
        future: fetchData(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasData) {
              return Container(
                alignment: Alignment.center,
                child: Text('loaded success'),
              );
            }
            else {
              return Container(
                alignment: Alignment.center,
                child: Text('error'),
              );
            }
            
          }
          else {
            return Container(
              alignment: Alignment.center,
              child: CircularProgressIndicator()
            );
          }
        },
      ),
    );
  }
}

接口请求正常时的效果图如下：

fetch-success.gif

接口请求失败时的效果图如下：

fetch-error.gif

当然可传入的属性还有initialData，这个可以在有本地缓存数据的场景下使用，根据实际情况可以在snapshot.hasData取道初始值。

这个系列的文章是根据flutter 的 Widget of the week来做的，欢迎大家斧正。