【Flutter】非同期処理:Future・FutureBuilder使い方を3分で解説!(サンプルコードあり)

Flutterで非同期処理の実装方法を知りたい
FlutterのFuture、FutureBuilderの使い方がよく分からない

ということで悩んでませんか?

そこで、今回はFlutterFuture・Futurebuilderにおける基本的な使い方サンプルコードデモ動画で解説します。Future・Futurebuilderを使ことで、非同期処理が簡単にできます。

この記事で分かること!
  • 同期処理、非同期処理の違い
  • Future,FutureBuilderの使い方

ちなみに、プログラミング初心者は疑問やエラーの解消に時間が掛かり、学習が前に進まなくて挫折することはよくあります。独学でFlutterを学習する場合は、次のことも考えないといけません。

  • 学習の計画
  • スケジュール管理
  • ポートフォリオ作成時に技術選定 など

初心者にとっては大変です。そこで、自走できるまでの手段にスクールを利用するのは1つの手です!Flutterが学べるおすすめスクールはこちらで詳しく解説してます。月2万ほど〜学べるスクールもあるのでご参考にどうぞ。

目次

【Flutter】非同期処理・同期処理とは?非同期処理は処理の終了を待たずに次の処理をする

同期処理順番に処理する。1つの処理を実行中に次の処理を実行できない
非同期処理順番に処理するが、1つの処理を実行中に次の処理を実行できる

非同期処理とは、ネットワーク・DBなどにおいて処理に時間がかかる場合、コストの大きい計算で時間のかかる処理をする際に利用します。

例えば
  • ネットワークを介してAPIを利用する処理で、通信中はローディングを表示。レスポンスが来たら結果を表示。

【Flutter】Future・FutureBuilder:非同期処理を簡単にできる

以下のデモ動画のように非同期処理は簡単に作成できます。以下のアプリでは、初期処理時は「しばらくお待ち下さい」を表示し、初期処理3秒後に「合格」を表示する非同期処理です。

それでは非同期処理で利用するFutureFutureBuilderについてFlutter公式サイトをもとに解説します。FutureFutureBuilderを使えば非同期処理も簡単です。

Futureについて

The result of an asynchronous computation.

(直訳)非同期処理の結果

引用:Flutter公式サイト「Future class

Futureは非同期処理状況の結果をもつクラスです。以下の2つの状態があります。

未完了非同期処理を呼び出したとき、未完了のfutureを返す。futureは非同期処理の完了を待つか、エラーを出す
完了非同期処理が成功すれば、futureは値(もしくはエラー)を持って完了する

FutureBuilderについて

Widget that builds itself based on the latest snapshot of interaction with a Future.

(直訳)Future との相互作用の最新のスナップショットに基づいて自身を構築するウィジェット。

引用:Flutter公式サイト「FutureBuilder class」

FutureBuilderは非同期処理の状況確認や結果のデータを取得することができます。

【Flutter】Future・FutureBuilderのサンプルコード

FutureFutureBuilderサンプルコードは以下の通りです。コピペでそのまま使えます。

冒頭デモ動画のサンプルコードです。初期処理時は「しばらくお待ち下さい」を表示し、初期処理と同時に3秒後に「合格」を表示するコードです。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(title: '非同期処理デモ'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // Future型は非同期処理(時間のかかる処理)
  Future<String> getResult() async {

    await Future.delayed(Duration(seconds: 3));
    return "合格!";
    // throw 'Failded';
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
          child: FutureBuilder<String?>(
            future: getResult(),
            builder: (context, snapshot) {
              if(snapshot.hasError){
                final error  = snapshot.error;
                return Text('$error', style: TextStyle(fontSize: 60,),);
              }else if (snapshot.hasData) {
                  String result = snapshot.data!;
                  return Text('$result', style: TextStyle(fontSize: 60,),);
              } else {
                  return  const Text("しばらくお待ち下さい",style: TextStyle(fontSize: 30,),);
              }
            },
          )),
    );
  }
}

Futureで押さえておくべきポイントは以下の2点です。

async初めのawaitキーワードに行くまでに、その間にある同期処理を実行する。await前にある全ての同期コードは即時実行される。await処理が終わるまで、以降のコードは実行されない。
awaitawaitはFutureの非同期処理が完了するまで待ち、さらに非同期処理の結果を取り出してくれる
Dart 公式「Asynchronous programming: futures, async, await」

FutureBuilderで押さえておくべきポイントは以下の3点です。

futurefutureプロパティは型がFutureのメソッドまたは変数を指定
builderbuilderプロパティは非同期処理の途中で処理したいWidgetをコーディングする。
snapshotfutureで指定したメソッドの状況は第2引数のsnapshotに格納され、処理状況の変化に応じて自動的にbuilderプロパティに合致する部分が再ビルドされます。
Flutter 公式「FutureBuilder<T> class 」

async、await

サンプルコードでは、3秒処理を待つ間、リターンは返しません。

Future<String> getResult() async {
    await Future.delayed(Duration(seconds: 3));
    return "合格!";
}

future

サンプルコードではFuture型のgetResultメソッドを指定してます。

 FutureBuilder<String?>(
  future: getResult(),

builder、snapshot

サンプルコードでは、getResultメソッドの状況ごとに自動的に再ビルドされます。getResultの状況はsnapshotに格納されており結果を確認できます。snapshotオブジェクト「.〇〇」のメソッドを利用することで非同期処理の通信状態やメソッドからの戻り値等を取得できます。

builder: (context, snapshot) {

              // データ取得に失敗した場合
              if(snapshot.hasError){
                // エラーメッセージの取得
                final error  = snapshot.error;
                return Text('$error', style: TextStyle(fontSize: 60,),);

              // データがある場合
              }else if (snapshot.hasData) {
                  // getResultメソッドがreturnした値を取得
                  String result = snapshot.data!;
                  return Text('$result', style: TextStyle(fontSize: 60,),);

              // データ取得中の場合
              } else {
                  return  const Text("しばらくお待ち下さい",style: TextStyle(fontSize: 30,),);
              }
            },

まとめ:Flutter入門者は非同期処理の方法:Futureは押さえておくべき!

今回の記事では、FlutterFutureとFutureBuilderにおける基本的な使い方サンプルコードデモ動画で解説しました。

非同期処理で押さえておくべきポイント

Futureで押さえておくべきポイントは以下の2点です。

async初めのawaitキーワードに行くまでに、その間にある同期処理を実行する。await前にある全ての同期コードは即時実行される。await処理が終わるまで、以降のコードは実行されない。
awaitawaitはFutureの非同期処理が完了するまで待ち、さらに非同期処理の結果を取り出してくれる
Dart 公式「Asynchronous programming: futures, async, await」

FutureBuilderで押さえておくべきポイントは以下の3点です。

futurefutureプロパティは型がFutureのメソッドまたは変数を指定
builderbuilderプロパティは非同期処理の途中で処理したいWidgetをコーディングする。
snapshotfutureで指定したメソッドの状況は第2引数のsnapshotに格納され、処理状況の変化に応じて自動的にbuilderプロパティに合致する部分が再ビルドされます。
Flutter 公式「FutureBuilder<T> class 」


Flutterエンジニアになるには?

初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。

Flutterの学習方法を知る

Flutter を動画で学ぶ(Udemy)

Flutter をスクールで学ぶ

Flutterの仕事を探す

おまけFlutter入門の完全ガイド

Flutter/Dartの基礎一覧

Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。

Widget一覧

画面レイアウト

ボタン

入力・出力

ページ遷移

状態管理

非同期処理

Dartの基本文法

ライブラリ使い方

目次