👏

InAppWebViewでスクロール検知👆

2023/08/10に公開2件

Flutter

やりたいこと

InAppWebViewで表示している画面で、特定のスクロール位置を検知してボタンの活性/非活性の制御をしたい。

なぜwebview_flutterではないのか

現時点でwebview_flutterにスクロール位置を検知するメソッドがなさそう。
どうしてもの場合はアプリ-Web間はJavaScriptチャネルを介してWebviewのイベントを検知することができるが、そもそもWeb側からチャンネルに通知>アプリからイベントを検知するという仕組みが必要で、今回の仕様に適していなかったため。

sample.dart

..addJavaScriptChannel(
              ‘ScrollChannel’,
              onMessageReceived: (message) {
                if (message.message == ‘reachedBottom’) {
                  reachedBottom.value = true;
                }
              },
            )

使用したライブラリ

対応と説明

sample.dart

      child: InAppWebView(
        gestureRecognizers: {}..add(
            const Factory<VerticalDragGestureRecognizer>( 
              VerticalDragGestureRecognizer.new, //縦方向のスワイプジェスチャーを認識
            ),
          ),
        onScrollChanged: (controller, x, y) async {
	  // スクロールが変化したときに実行されるコールバック関数
          final height = await controller.getContentHeight() ?? 0;
          if (Platform.isAndroid) {
            if (y.h >= height.h) {
              // イベント
            }
          } else if (Platform.isIOS) {
            if (y.h >= height.h / 2) {
              // イベント
            }
          }
        },
        initialUrlRequest: URLRequest(
          url: Uri.parse(
            'https://www.sample.com',
          ),
        ),
      ),