Androidでもスワイプで戻る処理を実現したい

Question

実現したいこと

Androidでもスワイプで戻る処理を実現したい

前提

Flutterで以下のような実装をしました。
iOSでは、画面左側をスワイプをすると、Page2からPage1に戻ることができます。

どのように実装すれば、AndroidでもiOSと同様に、スワイプで戻る処理を実現できるでしょうか？

試したこと

cupertino_back_gestureを使用して、iOSではスワイプで戻る処理を実現できました。
しかし、AndroidではiOSと同様の動作が行われません。
https://pub.dev/packages/cupertino_back_gesture

該当のソースコード

import 'package:flutter/material.dart';
import 'package:cupertino_back_gesture/cupertino_back_gesture.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return BackGestureWidthTheme(
      backGestureWidth: BackGestureWidth.fraction(0.5),
      child: MaterialApp(
        theme: ThemeData(
          pageTransitionsTheme: const PageTransitionsTheme(
            builders: {
              TargetPlatform.android:
                  CupertinoPageTransitionsBuilderCustomBackGestureWidth(),
              TargetPlatform.iOS:
                  CupertinoPageTransitionsBuilderCustomBackGestureWidth(),
            },
          ),
        ),
        home: DefaultTabController(
          length: 3,
          child: Scaffold(
            appBar: AppBar(
              title: const Text('Pages'),
              bottom: const TabBar(
                tabs: [
                  Tab(text: 'TabA'),
                  Tab(text: 'TabB'),
                  Tab(text: 'TabC'),
                ],
              ),
            ),
            body: TabBarView(
              children: [
                Navigator(
                  onGenerateRoute: (_) => MaterialPageRoute(
                    builder: (_) => Page1(),
                  ),
                ),
                const Center(
                  child: Text('TabB'),
                ),
                const Center(
                  child: Text('TabC'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class Page1 extends StatelessWidget {
  const Page1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('Page1'),
            const SizedBox(height: 10),
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => Page2(),
                  ),
                );
              },
              child: const Text('Go to Page2'),
            ),
          ],
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  const Page2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page2'),
      ),
      body: const Center(
        child: Text('Page2'),
      ),
    );
  }
}

Answer 1

画面の構造が変わっちゃうけど、Page1の上のNavigatorを取っ払うしかないのかな。

              children: [
                Navigator(
                  onGenerateRoute: (_) => MaterialPageRoute(
                    builder: (_) => Page1(),
                  ),
                ),

この部分を以下の様な感じに。

              children: [
               Page1(),

iOSでうまくいく理由は不明だけど、Android版を見ると左から右のジェスチャーが、TabBarViewのとpop用の2つで競合しTabBarView側のが勝ってしまっている。なのでpop用のジェスチャー動作が動かない結果になってるみたい。
どちらのジェスチャー処理も内部実装の物を使っているようなので、そちらを変更するのは難しいのではと思う。
現状の解決策としては、ジェスチャー動作が競合しないように、TabBarView内にページがpushされて表示されないようにするしかないと思われます。

なおジェスチャーの競合状態はrunAppの前にdebugPrintGestureArenaDiagnostics = true;を置くと見ることができます。

Comments

[rdt]

ご回答ありがとうございます。
難しそうですね、、勉強になりました。