Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@1d7678174656

【Flutter】非同期処理を伴うデータ初期化の話

前書き

Flutterで初期データを非同期処理で取ってくる場合にどう書けばいいか悩んだのでまとめておきます。登場するのは主にinitStateFutureBuilderです。追加情報をいただければ随時書き足しますので、コメントよろしくお願いします。

サンプルコード

今回の検証コードのベースには、よくあるカウンターアプリの簡易版を使います。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

counter_app.dart

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          '$_counter',
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}


実行画面はこんな感じ。「+ボタン」を押すと数字が一つずつ上がっていく。

Simulator Screen Shot - iPhone SE (2nd generation) - 2020-08-23 at 13.48.23.png

以下では、このコードにデータ初期化処理を追加して、検証していきます。

検証: 非同期なデータ取得処理をinitStateに書いてみる

先にいいますがこれは失敗パターンです。データ取得はビルド前に済ませてしまいたいのでinitState()に非同期なデータ取得処理を書いたとしましょう。

コード

  • _MyHomePageStateにinitStateMethodと、その中で呼ぶための非同期処理を追加。
counter_app.dart
class _MyHomePageState extends State<MyHomePage> {

//略

  @override
  void initState() {
    super.initState();
    asyncSampleMethod();
  }

  // 非同期でデータを取ってくるサンプルメソッド
  Future<int> asyncSampleMethod() async{
    await Future.delayed(const Duration(seconds: 5), (){
      _counter = 99;
    });
    return _counter;
  }

//略

非同期処理は5秒待ったあと_counterの値を99にするというものです。データベースとの通信に5秒かかったというのを想定しています。

結果

予想できる通りasyncSampleMethodの完了を待たずにビルドされてしまうので実行結果は0から始まって5秒後に99が代入されるという形になる。

タイトルなし.gif

asyncSampleMethodの完了を待たないので、_counterは0のままビルドされ、5秒後asyncSampleMethodが完了した際に99が代入されるという仕組みです。ちなみにinitStateにasyncを付けようとするとエラーが出ます。

_MyHomePageState.initState() returned a Future.
State.initState() must be a void method without an `async` keyword.

検証: FutureBuilderを使う

こちらも失敗パターンです。FutureBuilderはfuture引数に書いた非同期な処理の完了前と後に分けてウィジェットを書ける便利な関数です。データ取得処理にはFutureBuilderを使うといいよと書いてあったので、何も考えずとりあえず使ってみましょう。

コード

counter_app.dart
class _MyHomePageState extends State<MyHomePage> {

//略

// さっきのinitStateは一旦コメントアウト
// @override
//  void initState() {
//    super.initState();
//    asyncSampleMethod();
//  }

//略

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // FutureBuilderを使って書き換える
        child: FutureBuilder(
            future: asyncSampleMethod(),
            builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
              Widget childWidget;
              if (snapshot.hasData) {
                childWidget = Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                );
              } else {
                childWidget = const CircularProgressIndicator();
              }
              return childWidget;
            }),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

今回はFutureBuilderのfutureに渡したasyncSampleMethod()が完了する前はCircularProgressIndicator()(グルグル)を表示して、完了後はTextウィジェットで数字を表示するようにしています。

実行結果

タイトルなし23.gif

futureに渡した非同期処理が完了して99が表示され、「+ボタン」を押すと1ずつ上がっていくので一見大丈夫そうに見えます。しかし、setStateで状態が変わる(「+ボタン」を押す)度にFutureBuilderのfutureに渡した非同期な初期化処理が行われ、5秒後に値が99に戻ってしまいます。

setStateとFutureBuilderを両方使う

これなら正しく動作します。

コード

counter_app.dart
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter;
  Future<int> _future;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  void initState() {
    _future = asyncSampleMethod();
    super.initState();
  }

  Future<int> asyncSampleMethod() async {
    await Future.delayed(const Duration(seconds: 5), () {
      _counter = 99;
    });
    return _counter;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FutureBuilder(
            future: _future,
            builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
              Widget childWidget;
              if (snapshot.hasData) {
                childWidget = Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                );
              } else {
                childWidget = const CircularProgressIndicator();
              }
              return childWidget;
            }),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

ポイントは、initStateで一度だけ実行する非同期なデータ取得処理の返り値を格納するための変数(ここでは_future)を用意して、FutureBuilderからはその変数を参照するようにします。こうすることでFutureBuilderがリビルドされても、データ取得処理が再度呼ばれることはなくなります。

実行結果

z.gif

うまく動作しました!

まとめ

データ初期化処理について悩んだところをまとめました。少しでも誰かの参考になれば幸いです。今回は、FutureBuilderとsetStateを使いましたが他にも実装方法はあると思います。他の書き方があればコメントに書いていただけると助かります!

5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1d7678174656
Flutterで個人開発をしている情報系院生です. Twitter覗いてみてくださいーー

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?