非同期処理をすると、エラー：LateInitializatioinError が解消できません。

Question

Andoroid Studioで、Flutter（Dart）を用いて簡単なアプリを作っています。

サイトなどを参考にして、
画面遷移後、すでに前のページで作成済みのデータベースのテーブルからレコードを取得して、その値をTextに表示させたいのですが、表題の通り、LateInitializatioinErrorが出ます。

自分としては、「 late Map<String,dynamic>? gotMap;」の記述で初期化をしているつもりなのですが、何がいけないのでしょうか。

実現したいこと

すでに作成済みのデータベースのテーブルからレコードを取得してその値をTextに表示させたい。

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

LateInitializationError: Field 'getedMap' has not been initialized.

該当のソースコード

表示させたいページ。initState()でメソッド呼び出しをしました。

class WorkingState extends StatefulWidget {
  final int? id;
  final int? time;
  const WorkingState({Key? key, required this.id, required this.time})
      : super(key: key);
  @override
  State<WorkingState> createState() => _WorkingStateState(id,time);
}

class _WorkingStateState extends State<WorkingState>{
  final int? _id;
  final int? _time;
  _WorkingStateState(this._id, this._time);

  late String todo;
  //これは初期化ではない？
  late Map<String,dynamic>? gotMap;

  @override
  void initState() {
    super.initState();
 
    //メソッドの呼び出し
    getNogoMap();
    todo = gotMap!["TODO"];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('hello appbar!'),
      ),
      body: Center(
        child: Column(
          children: [
            const Text("やること"),
            Text(todo?? ""),
          ],
        ),
      ),
    );
  }

  //DbHelperを利用して、データベースからレコードをMapを取得しようとしています。
  getNogoMap() async{
    gotMap = await DbHelper.instance.getMap(_id);
  }
}

DbHelperクラスのメソッド

//データベースからレコードを取得。レコードは1件なので、中身をMapにして返しています。
  Future<Map<String, dynamic>> getNogoMap(int? id) async {
    final db = await database;
    List<Map<String,dynamic>> results = await db.query("NO_GO_RECORDS",
        where: "_id=?",
        whereArgs: [id]);
    Map<String, dynamic> map = results[0];
    return map;
  }

試したこと

上記記述の変数の初期化のところで、
late Map<String,dynamic>? gotMap;
↑これを、↓のように変えて
late Future<Map<String,dynamic>>? gotMap;

さらに、メソッドの呼び出しのところで、
getNogoMap();
↑これを、↓のように変えて
gotMap = getNogoMap();

メソッドの方を、

  Future<Map<String,dynamic>> getNogoMap() async{
    Map<String,dynamic> map;
    map = await DbHelper.instance.getNogoMap(_id);
    return map;
  }

としますと、Mapから値を取り出すところで
下記エラーメッセージが出てコンパイルが通りません。

The operator '[]' isn't defined for the type 'Future<Map<String, dynamic>>'.

正直言って、非同期処理を行った場合の戻り値の型の意味が分かっていません。
そもそも Future型とはなんなのでしょうか？

また、本やサイトをみると、データベースから取得したListをクラスのリストにして戻しているようなのですが、そうしないとだめなのでしょうか。
もう、考えれば考えるほど分からなくなってきます。

どのようにしたら意図したとおりの動きをしてくれるのか、ご教示いただけたら幸いです。

Answer 1

LateInitializationErrorで出ているのはgetedMapです。
ただ、説明文等に出てくる名称はgotMapとなってます。なので途中で変数名を変更したソースコードだと仮定して記述します。

Flutterでは非同期処理を行った結果を使いWidgetを表示するにはFutureBuilderを使うのが一般的な解です。

ToDoを取得するためのFutureを作成し、それをFutureBuilderに渡しデータが確定したらそのデータでテキストを表示するというのが流でしょうか。

なおLateInitializationErrorが出たの以下の理由からです。

initStateでgetNogoMapを呼び出した時点ではまだgotMapは確定していません。
これはgetNogoMapがasyncな関数なので、この時点でgetNogoMap内の処理が走っていないからです。そのためgetNogoMapの下にあるtodo = gotMap!["TODO"];でgotMapが確定していないというエラーになりました。

私はDartの非同期処理を次のように考えるようにしています。

• asyncが付いている関数を呼び出すと、それは実行待機のキューに入れられる。
  この時点でasync内の処理は実行されない。
• 現在実行している処理でawaitがあると、この時点までの状態で実行待機のキューに入れられる。
  この時点で実行している処理がないので、キューに入っている処理のうち実行可能なものを選び実行する。

で、この実行待機のキューに入れる単位がFutureといった感じです。
それを踏まえれば、LateInitializationErrorが発生した理由もなんとなく分かるのではないでしょうか。

以下の実装はFutureBuilderを使ったらこんな感じになるかなという例です。
実行していないので、エラー等あったら適宜修正してください。

class _WorkingStateState extends State<WorkingState> {
  final int? _id;
  final int? _time;
  _WorkingStateState(this._id, this._time);

  Future<String> getToDo() async {
    final gotMap = await DbHelper.instance.getMap(_id);
    return gotMap!["TODO"];
  }

  late Future<String> future;

  @override
  void initState() {
    super.initState();
    future = getToDo();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('hello appbar!'),
      ),
      body: Center(
        child: Column(
          children: [
            const Text("やること"),
            FutureBuilder<String>(
                future: future,
                builder: (context, snap) {
                  return Text(snap.data ?? "");
                }),
          ],
        ),
      ),
    );
  }
}

Comments

[hojo2021]

ta.fu様、ご回答ありがとうございます！
＞途中で変数名を変更したソースコードだと仮定して記述します。
その通りです。質問をするにあたって修正しながらコピペしていったところ、
間違えたままの部分を残してしまっていました。わかりにくくさせてしまって申し訳なかったです。

載せていただいたコードで意図通りの表示をさせることができました！

また、詳しい非同期処理に関するご説明もありがとうございます。
呼び出した、getNogoMap()の中にawaitがあるのでその後の処理も待ってくれているのかな、と勝手に思っていました。
Futureがどういったものなのかも、おぼろげながら分かってきました。
ただコードはまるっと、ta.fu様のコピペなので、これからFutureBuilderを調べると共に
コードを読み解いて勉強していこうと思います。

この度は本当にありがとうございました！