MENU
  • About
  • Service
    • ホームページ製作
    • ノーコードアプリ開発
    • 業務自動化・効率化
    • Google Workspace
    • プログラミング学習サポート
    • セミナー講師
  • News
  • Blog
  • Contact
芝池製作所
  • About
  • Service
    • ホームページ製作
    • ノーコードアプリ開発
    • 業務自動化・効率化
    • Google Workspace
    • プログラミング学習サポート
    • セミナー講師
  • News
  • Blog
  • Contact
芝池製作所
  • About
  • Service
    • ホームページ製作
    • ノーコードアプリ開発
    • 業務自動化・効率化
    • Google Workspace
    • プログラミング学習サポート
    • セミナー講師
  • News
  • Blog
  • Contact
  1. ホーム
  2. Blog
  3. Flutter FutureBuilder で「ロード中!!」を出してみる!!

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

2023 7/20
Blog Flutter / Dart
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,
        );
      },
    );
  }
}

動画もどうぞ

Blog Flutter / Dart

この記事が気に入ったら
いいね または フォローしてね!

Follow Me
よかったらシェアしてね!
  • URLをコピーしました!
  • Flutter AnimatedOpacity() でDurationをかけよう!!
  • Flutter FadeTransition で FadeIn させる!!

関連記事

  • AppSheetでMapにピンを立てる
    2023年9月9日
  • AppSheetで画像を表示
    2023年9月8日
  • Googleフォームで経費管理
    2023年9月6日
  • GAS(プログラム)で請求書が添付されたGmailを取得
    2023年9月3日
  • ホームページ製作 WordPressとノーコードの選択
    2023年8月14日
  • Google Workspaceで生産性向上?
    2023年8月14日
  • 生産性向上!なぜ「チャット」が業務効率化のカギなのか
    2023年8月13日
  • ホームページ デザインのトレンド
    2023年8月11日
Category
  • Anaconda
  • AppSheet
  • Blog
  • colaboratory
  • Flutter / Dart
  • Git
  • Google Workspace
  • GoogleAppsScript
  • HomePage
  • JavaScript
  • Laravel
  • News
  • Python
  • Selenium
  • SQL
  • TypeScript
  • wordpress
  • スプレッドシート
  • データベース
  • ノーコード
  • プログラミング
  • 生産性向上
Navigation
  • About
  • Service
    • ホームページ製作
    • ノーコードアプリ開発
    • 業務自動化・効率化
    • Google Workspace
    • プログラミング学習サポート
    • セミナー講師
  • News
  • Blog
  • Contact

© 芝池製作所.

目次