FutureBuilde Widget

Flutter和Dart是異步的,使用Dart的Futures可以管理IO,不用擔心線程死鎖等問題,但是如何在使用Widget時也使用異步操作呢?

Flutter提供了FutureBuilder來進行處理,FutureBuilder可以很容易的得到目前Widget的狀态,并選擇在加載資料時顯示的内容.以及在可以使用時顯示的内容.

首先給FutureBuilder設定future一個網絡請求,builder可以擷取到目前的操作是那種狀态,比如已完成.根據不同的狀态來顯示不同的内容.

import 'package:flutter/material.dart';
import 'dart:io';

class GoogleFutureBuilder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var httpClient = new HttpClient();
    Widget waiting = Column(
      children: <Widget>[
        Text('waiting'),
        Icon(Icons.cloud_download),
      ],
    );
    Widget active = Column(
      children: <Widget>[
        Text('active'),
        Icon(Icons.access_time),
      ],
    );
    Widget error = Column(
      children: <Widget>[
        Text('error'),
        Icon(Icons.error),
      ],
    );
    Widget done = Column(
      children: <Widget>[
        Text('done'),
        Icon(Icons.done),
      ],
    );
    Widget none = Column(
      children: <Widget>[
        Text('none'),
        Icon(Icons.filter_none),
      ],
    );
    return FutureBuilder(
      future: httpClient.getUrl(Uri.parse('http://cache.video.iqiyi.com/jp/avlist/202861101/1/?callback=jsonp9')),
      builder: (context, snap) {
        if (snap.connectionState == ConnectionState.done) {
          if (snap.hasError) {
            return error;
          }
          return done;
        } else if (snap.connectionState == ConnectionState.active) {
          return active;
        } else if (snap.connectionState == ConnectionState.waiting) {
          return waiting;
        } else if (snap.connectionState == ConnectionState.none) {
          return none;
        }
      },
    );
  }
}
           

我的部落格

代碼github