【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part106 Async

基礎 から 学ぶ Flutter 」という書籍で  学習 したことを ブログでアウトプットしていこうと思います。今回は ウィジェット編 ( part106 )です。

前回

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part105 Interaction model widgets

今回からAsyncについて学びます。

FutureBuilderウィジェット

FutureBuilderウィジェットはDart言語の非同期処理であるFutureクラスをUIで扱うためのウィジェットです。

Future関連記事

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part29 Single-child layout widgets

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part30 Single-child layout widgets

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part31 Single-child layout widgets

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part32 Single-child layout widgets

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part33 Single-child layout widgets

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part34 Single-child layout widgets

【 Flutter 】Flutter を 基礎 から 学習 ( ウィジェット編 ) part39 Multi-child layout widgets

概要

FutureBuilderウィジェットのfutureプロパティにFutureオブジェクトを指定します。

本書では以下のように説明があります。

一度、builerプロパティの関数が呼ばれ、非同期処理が終わったら、再度、呼ばれます。

ということはbuilderプロパティに指定された処理は以下の2つの場面で実行されるということのようです。

  1. 一番初め
  2. 非同期処理終了
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  // runApp(new MaterialApp(home: new MyApp()));
  runApp(new MaterialApp(home: new SamplePage()));
}

class SamplePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SampleAsyncState();
  }
}

class _SampleAsyncState extends State<SamplePage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('テスト中!')),
        body: FutureBuilder(
          future: Repository().fetch(),
          builder: (context, snapshot) {
            // エラーの場合です。
            if (snapshot.hasError) {
              return Text('エラー');
            }
            // データがEmptyの場合です。
            if (!snapshot.hasData) {
              return Text('Empty');
            }
            return Text('${snapshot.data}');
          },
        ),
      ),
    );
  }
}

class Repository {
  Future<int> fetch() {
    return Future.delayed(Duration(seconds: 3)).then((value) => 1);
    // return Future.delayed(Duration(seconds: 1)).then((_) {
    //   return 1;
    // });
  }
}

 

初回はfutureの処理が行われていないのでEmptyが表示されています。

futureの処理が終わった段階で結果である1が画面に表示されるようになっています。

最後に

サンプルでは少しわかりにくいですね😅

今日はここまで!