やりたいこと
``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()でページを戻す
後は、読み込み時処理に動作させないようにすることと
他の部品の高さを差し引いたコンテナにする。
コンテナ透明にする。
コンテナが大きすぎるとユーザーが利用しずらくなっちゃうので、
どのくらいの大きさにしようか検討中、、、
なんだか他にもっと良いやり方だったり書き方があると思うので、
わかる人がいたら是非！教えてください(｀・ω・´)ゞ