FlutterでNavigatorでの遷移で戻り値を受け取る

下記環境でFlutterアプリを開発中です。

ツールなど	バージョンなど
MacBook Air Early2015	macOS Mojave 10.14.5
Android Studio	3.6.1
Java	1.8.0_131
Flutter	1.12.13+hotfix.5
Dart	2.7.0

リスト画面-詳細(編集画面)-戻って画面更新、という非常によくあるパターンで、Navigator.pushで起動した画面から、結果を戻す方法についての調査メモ。

戻るときの値セット

Navigator.popで戻る時に、値をセットする方法です。

Navigator.pop(context, 戻したい値/オブジェクト);

とするだけ。

受け取る方法

起動元で、結果を受け取る方法です。

1.通常

特に複雑なことをしないで、普通にNavigator.pushしている場合です。
あるボタンでpushしている例です。

RaisedButton(
  child: Text('Next'),
  onPressed: () async {
      final result = await Navigator.pushNamed(context, '/next');
      debugPrint(result.toString); // 結果を処理
    );
  }

Navigator.pushを呼ぶ関数は、非同期処理としてasyncを付けます。
その中では、pushが戻ってくるのを待つという意味で、await Navigator.pushとします。
Navigator.pushが値を返してくれるので、それを受け取って処理をすれば良いです。

2.NavigationServiceを使っている場合

以下の記事で紹介した方法を使っている場合です。
Flutter/Navigator遷移にBuildContextを不要にする/遷移のWidgetTest

基本的にやることは同じですが、コードのサンプルとして残します。

NavigationService.dart

class NavigationService {
  final GlobalKey<NavigatorState> navigatorKey =
      new GlobalKey<NavigatorState>();

  Future<dynamic> navigateTo(String routeName, {Object args}) async {
    return navigatorKey.currentState.pushNamed(routeName, arguments: args);
  }

  bool goBack() {
    return navigatorKey.currentState.pop();
  }
}

navigateToにasyncを付けます。

class MyViewModel with ChangeNotifier{
  void navigateNextPage(final LogData data) async {
       // ルート遷移
      final NavigationService _navigationService = locator<NavigationService>();
      final result =
          await _navigationService.navigateTo('/next', args: data);
      if (result) {
        // trueなら更新があったのでウィジェットを再ビルドしなければならない
        notifyListeners();
      }
  }
}

pushを呼んでいる関数をasyncにしています。
NavigationService#navigateToをawaitで待って、結果を受け取ってます。
このクラスはChangeNotifierで、更新があったら再描画させたいためnotifyListenersを呼んでいます。

これで、Flutter 画面遷移でデータを渡すと合わせると、Androidでいう

• Intentで次の画面にデータを投げる
• その画面でデータを書き換える
• 呼び出し元の画面にそのデータを返す

というのと同じことが出来るようになりました。

参考サイト

FlutterのNavigatorの使い方と仕組み
https://qiita.com/heavenosk/items/9e43298955a371221393