Flutter FutureBuilder で「ロード中！！」を出してみる！！

2020年3月5日2023年7月20日

Flutter FurtureBuilderで非同期処理をしてみます！！
最終的には、表示したいデータを取得している間は「ロード中」という事でグルグル回るCircularProgressIndicator()を表示し、取得が終わったら取得したデータを表示します！

お決まりのパターンの記述

FurtureBuilldを表示させたいクラスを、MyFutureWidget() とネーミングしました！

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "初めてのFutureWidget",
      home: MyFutureWidget(),
    );
  }
}

肝心のFutureBuilder部分！！

まずはstatefullWidgetを作ります！！

class MyFutureWidget extends StatefulWidget {
  @override
  _MyFutureWidgetState createState() => _MyFutureWidgetState();
}

class _MyFutureWidgetState extends State<MyFutureWidget> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

まぁそのままですけど。。

今回は、どこかにデータを取りに行くわけではないのでDuration()

まずはFutureクラスの変数(getData)を定義します。

Future<String> getData =
      Future<String>.delayed(Duration(seconds: 2), () => "データゲット！！");

2秒待ってから「データゲット！！」を取得取得しています。

FutureBuilder を記述

小刻みに

 Widget build(BuildContext context) {
    return FutureBuilder(
      future: getData,
      builder: (context, snapshot) {
        List<Widget> child;

FutureBuilder内の
future:
で先ほど定義した「getData」を入れます。

builder: で (context, snapshot) を引数にとります。
後にこの「snapshot」に「getData」の値が入ってきます。

最後のList<Widget> のところで「child」という名前のWidgetの入れ物を定義しておきます。

データを取得するまでの条件分岐

if (snapshot.hasData) {
          child = <Widget>[
            Center(
              child: Text("取得成功：" + snapshot.data),
            ),
          ];
        } else if (snapshot.hasError) {
          child = [
            Center(
              child: Text('エラー：' + snapshot.data),
            ),
          ];
        } else {
          child = [
            Center(
              child: CircularProgressIndicator(),
              widthFactor: 20.0,
            ),
            Padding(
              padding: EdgeInsets.only(top: 16),
              child: Text('Awaiting result...'),
            )
          ];
        }
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: child,
          );
        );

先頭のif

snapshot.hasDataのところは、snapshotにgetDataが入っているかどうかの判定。

入っていたら、画面中央に「取得成功：データゲット！！」と出力されるようになっています。

次のelse if

データを取得する際エラーが出たら,この部分が表示される。

else (ここがchildの状態を表示する部分！！)

現在「child」に入っている値が表示される。
childの状態は、if文のいずれかになっているはずです。

getDataを取得できてなければ、else のchildが適応され、クルクル回るロード中となりますし
getDataを取得済みならchildに取得したテキストが表示される感じです！！

コード全部


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyFutureWidget(),
    );
  }
}

class MyFutureWidget extends StatefulWidget {
  @override
  _MyFutureWidgetState createState() => _MyFutureWidgetState();
}

class _MyFutureWidgetState extends State<MyFutureWidget> {
  Future<String> getData =
      Future<String>.delayed(Duration(seconds: 2), () => "データゲット！！");
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: getData,
      builder: (context, snapshot) {
        List<Widget> child;

        if (snapshot.hasData) {
          child = <Widget>[
            Center(
              child: Text("取得成功："+ snapshot.data),
            ),
          ];
        } else if (snapshot.hasError) {
          child = [
            Center(
              child: Text('エラー：'+snapshot.data),
            ),
          ];
        } else {
          child = [
            Center(
              child: CircularProgressIndicator(),
              widthFactor: 20.0,
            ),
            const Padding(
              padding: EdgeInsets.only(top: 16),
              child: Text("Now ロード中"),
            ),
          ];
        }
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: child,
        );
      },
    );
  }
}