Flutter WebView スワイプで戻る

やりたいこと

webview_flutterを利用してスワイプで戻るを実現するために調べてみました。
ですが、そう簡単にはいかず、これといったやり方を見つけることができませんでした。
数日、試行錯誤して何とかできたけれども、他のやり方だったりもっと良いやり方などあれば教えてほしいのです。

試したこと

・gestureRecognizersを利用してみる。
・PageViewを利用してみる。
・Dismissibleを利用してみる。
・GestureDetectorを利用してみる。

初学者の僕に理解するには難しかった、、、

その中で選ばれたのはGestureDetectorでした。

コード

import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }

  late WebViewController _webViewController;
  double _currentPositionX = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          WebView(
            initialUrl: 'https://flutter.dev',
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController controller) async {
              _webViewController = controller;
            },
          ),
          GestureDetector(
            onHorizontalDragUpdate: (details) {
              _currentPositionX = details.primaryDelta!.toDouble();
            },
            onHorizontalDragEnd: (details) async {
              print(_currentPositionX);
              if (_currentPositionX > 0) {
                if (await _webViewController.canGoBack()) {
                  await _webViewController.goBack();
                  print('もどる');
                }
              }
            },
            child: Container(width: 50, color: Colors.green),
          ),
        ],
      ),
    );
  }
}

やり方と感想

WebViewの上にContainerを配置
onHorizontalで水平スクロールを感知
details.primaryDeltaで　どっちのスワイプかを知る。
正の値だったら左から右
負の値だったら右から左
になります。

そしてgoBack()でページを戻す

後は、読み込み時処理に動作させないようにすることと
他の部品の高さを差し引いたコンテナにする。
コンテナ透明にする。
コンテナが大きすぎるとユーザーが利用しずらくなっちゃうので、
どのくらいの大きさにしようか検討中、、、

なんだか他にもっと良いやり方だったり書き方があると思うので、
わかる人がいたら是非！教えてください(｀・ω・´)ゞ

参考URL

https://www.youtube.com/watch?v=RA-vLF_vnng
https://pub.dev/packages/webview_flutter
https://cbtdev.net/flutter-gesture-detector/
https://nobushiueshi.com/flutterwebview%E3%81%A7%E8%89%B2%E3%80%85%E3%81%AA%E6%93%8D%E4%BD%9C%E3%82%92%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95%E9%80%B2%E3%82%80%E3%80%81%E6%88%BB%E3%82%8B%E3%80%81%E3%83%AA%E3%83%AD%E3%83%BC/