【Flutter】go_routerで前画面に戻ったことの検知&前画面に値を返却

タイトルの通りで、Flutterアプリにてよく利用されるクライアントサイドルーティングライブラリの 「go_router」で、前画面に戻ったことを検知し、それを契機に前画面側で処理をキックしたいというシーンに出くわしたが、意外とやり方が分からなかったので自分用メモ。

ついでに遷移先画面から遷移元画面に値を渡す方法も。

結論

こう。

final res = await context.push('/second_page');

このように書くと、second_pageから自身のpageに戻ってきた時にawaitの行以降が動き出すので、そのまま処理を書いていけば前画面に戻ったことを契機に自身のpage側の処理をキックすることが出来る。

resとして値を受け取っているが、呼び出された側の画面(遷移先の画面)でpop時に何某かの値を設定していれば、それをresとして受け取ることが出来る。

context.pop('SecondPage Button A Pressed!!');

なお、次画面側からヘッダーナビゲーションの戻るボタン等で前画面に戻ってきた場合は、await context.push~の値はnullとなる。

「なんかぱっとググっても(海外含)全然情報無いなあ...」と思っていたが、go_router公式のReturning valuesの項に普通に書いてあって泣いた。

まずは公式を熟読せよ、そういうことである。

参考ソース

my_home_page.dart

// 遷移元画面
import 'package:flutter/material.dart';
import 'package:flutter_application_1/router/router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

class MyHomePage extends HookConsumerWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context, WidgetRef ref) {

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(title),
      ),
      body: Center(
        child: 
            ElevatedButton(
              onPressed: () async {
                final res = await context.push('/second_page');
                print('response from next page=$res');
              },
              child: const Text('Move2NextPage'),
            ),
        ),
      ),
    );
  }
}

second_page.dart

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:go_router/go_router.dart';

class SecondPage extends HookConsumerWidget {
  const SecondPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          const Text('This is SecondPage!!'),
          ElevatedButton(
              onPressed: () {
                context.pop('SecondPage Button A Pressed!!');
              },
              child: const Text('Back2FirstPage Button A'),
            ),
          ElevatedButton(
              onPressed: () {
                context.pop('SecondPage Button B Pressed!!');
              },
              child: const Text('Back2FirstPage Button B'),
            ),
        ],
      ),
    );
  }
}