flutterでのアプリ立ち上げ時のデータ取得

Question

実現したいこと

flutterでアプリ立ち上げ時csvファイルを取得して、
ListViewで表示したい

概要

flutterで非同期通信をしてデータを取得して、ウェジットに反映させたいのですが、
「初期化していない！」というメッセージが出てしまします。
解決策を調べてみたのですが、どれもいまいちうまくいかなかったので質問いたします

発生している問題・エラーメッセージ

//load_csv.dart

import 'package:flutter/services.dart';

Future<List> getTitleCsvData(String path) async {

  String csv = await rootBundle.loadString(path);
  String titledata = csv.split("\n")[0];

  List titleList = titledata.split(',');

  return titleList;

}

//title_app.dart

import 'package:flutter/material.dart';
import 'package:selectquiz/load_csv.dart';


class QuizApp extends StatelessWidget {
  QuizApp({Key? key}) : super(key: key);
  //この変数でのエラー
  late List titleList;

　//ここで、上記のload_csvのメソッドを使っている
  void getTitle() async{
    titleList=await(getTitleCsvData('assets/titledata.csv'));
  }

//ここで最初に実行したい
  @override
  void initState() {
    getTitle();
  }


  @override
  Widget build (BuildContext context) {

    return Scaffold(
      body: ListView.builder(
        itemCount: titleList.length,
        itemBuilder: (context,index){
          return ListTile(
            title: Text(titleList[index]),
            onTap: (){
              //goToQuizApp(context); //クイズアプリへ遷移するQuizApp関数がよばれる}
            },
          );
        },
      )
    );
  }
}

//assets/titledata.csv

title1,title2,title3,title4,title5,title6,title7

試したこと

Widgetの生成を遅らせるとよいと思いますが、調べて実行しても同様なエラーがでてしまいます。

コードはすべて同階層
csvはassetsに入れており、pabspec.yamlにも記入済みです
ご教授のほうをよろしくお願いにいれいたします

Answer 1

新しくgetFutureListFuncを作り、futurebuilderで呼ぶとうまくいきました。

//簡略

 @override
  Widget build (BuildContext context) {
    return Scaffold( 
      body: FutureBuilder<List>(
        future:getFutureListFunc(),
        builder:(context,snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(snapshot.data![index]),
                  onTap: () {
                    //goToQuizApp(context); //クイズアプリへ遷移するQuizApp関数がよばれる}
                  },
                );
              },
            );
          }else{
            return Text("えらーでおます");
          }
        },
      )
    );
  }


  Future<List> getFutureListFunc() async {
    return Future.delayed(new Duration(seconds: 1), () {
      titleList=getTitleCsvData('assets/titledata.csv');
      return titleList;
    });
  }
}

Answer 2

Futureの結果を使いウィジェットをビルドする場合は、FutureBuilderを使用するのが王道です。

https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html

提示されたコードだと、titleListをlate指定にしていて、initStateでgetTitleを呼び出しているのでbuild呼び出し前には確定しるのでは？とお思いですが、getTitleがasyncなのでこの処理は非同期処理としてスケジューラーに登録され、現在の同期処理が完了するまで、実行が待機されます。

そのため、build時にはtitleListが確定されず、該当するエラーが出たということになります。

titleListはFuture<List>としinitStateでgetTitleCsvDataで代入。
ListView.builderをFutureBuilderでラップしてtitleListを取り扱うといった感じかな。

Comments

[Nanmotsu]

futurebuilderを活用するとうまくいきました。
ご回答ありがとうございます。