popして戻った際に画面更新をする

はじめに

遷移先の画面から戻った際にStateなどの更新をして描画させたい場合があると思います。
方法は色々とあると思いますが、今回は簡単そうな方法で実装してみました。

やったこと

方法としては、

1. onPressed などで画面遷移をする処理を async で記述する。(pop した際はここに戻る)
2. await で Navigator.push()を呼ぶことで、画面が戻ってくるまでここで待ち続ける。
3. 戻ってきたら、setState や notifyListeners()で再描画を行う

実装

Navigator.of(context).push を await で実装する。

  void textEditorPageWithReloadByReturn(BuildContext context) async {
    final result = await Navigator.of(context)
        .push(MaterialPageRoute(builder: (context) => const TextEditorPage()));
    if (result != null) {
      refreshList();
    }
  }

  onPressed: () {
    textEditorPageWithReloadByReturn();
  },

pop で true を渡す。

  Future<void> _docSave(QuillController controller, context) async {
    final db = Localstore.instance;

    final json = controller.document.toDelta().toJson();
    final id = db.collection('doc').doc().id;
    final flag = controller.document.toPlainText().trim().isEmpty;

    await db.collection('todos').doc(id).set(json[0]);
    Fluttertoast.showToast(msg: '保存しました。$flag');
    Navigator.of(context).pop(true); //popに返却する値を引数に渡せる。
  }

まとめ

Navigator.popから値を返すことができるのを初めて知りました。
オプションの選択で画面遷移した後に、反映した状態で元の画面に戻るなどの時にこの方法は使えそう。