Flutter: 非同期処理で取得したデータを使用してwidgetを生成する

プログラミング
スポンサーリンク




こんにちは、おみです。

Flutterで、非同期処理で取得したデータを使用して、Widgetを生成したいことがあります。

そんな時に使用できるのが、FutureBuilderです。

今回は、FutureBuilderを使用して、非同期処理でWidgetを生成する方法について、解説していきます。

 

 

スポンサーリンク

ソースコード

今回は、CSVファイルを読み込み、内容をListViewで一覧表時します。

CSVファイルを読み込む処理は、過去に作成したものを使いたいと思います。

↓解説はこちら

Flutter: assetsを使用してCSVファイルを読み込む
こんにちは、おみです。 Flutterを使用していると、あらかじめ用意したCSVデータを使用したいというときがあります。 今回は、Flutterでcsvファイルを読み込む方法について、解説していきたいと思います。 ソー...

 

実行すると、下記のような画面が表示されます。

 

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:keyaki_app/data/CsvData.dart';
import 'package:keyaki_app/module/MainModule.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'リストビューを表示',
      home: MyHomePage(title: 'リストビューを表示'),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: FutureBuilder(
          future: getCsvData("assets/keyaki.csv"),
          builder: (BuildContext context, AsyncSnapshot<List<CsvData>> snapshot) {
            if (!snapshot.hasData) {
              return Text("データを取得中");
            }

            if (snapshot.data.length == 0) {
              return Text("データが存在しませんでした。");
            }

            return ListView.builder(
              padding: EdgeInsets.all(10.0),
              itemCount: snapshot.data.length,
              itemBuilder: (context, index) => _buildListView(snapshot.data[index]),
            );
          },
        ));
  }

  // 一覧表示
  Widget _buildListView(CsvData data) {
    return Card(
        child: ListTile(
      title: Text(data.name),
      subtitle: Text(data.birthday),
    ));
  }
}

 

 

解説

FutureBuilderは、だいたい下記のような構成になります。

FutureBuilder(
  future: [非同期処理を行う関数]
  builder: (BuildContext context, AsyncSnapshot<[非同期処理を行う関数の戻り値]> xxx) {
    if (xxx.hasData) {
      // データ取得中の時に、画面に表示するWidgetを記述
    }

    // 非同期処理で取得したデータを使用して、 Widgetを生成する
  }
}

 

今回引数futureで使用する関数は、引数で指定したCSVファイルを読み込み、 List<CsvData>形式で返却する関数なので、builderの第2引数は

AsyncSnapshot<List<CsvData>

を指定します。

 

FutureBuilderは、非同期処理が完了するのを待つわけではないので、

  1. 非同期処理が完了するまで表示しておくWidget
  2. 非同期処理が完了したときに表示するWidget

を指定する必要があります。

非同期処理が完了したかしていないかは、

[builderの第2引数].hasData

で確認できます。

 

 

 

 

 

 

 

 

 

 

 

 

 

コメント

タイトルとURLをコピーしました