No web page scroll when InAppWebview is inside NestedScrollView (android only)

[artemave]

• [x] I have read the Getting Started section
• [x] I have already searched for the same problem

Environment

Technology	Version
Flutter version	3.19.5
Plugin version	6.0.0
Android version	34.0.0

Device information: Android emulator Pixel 5 API 34, Pixel 6 API 34.

Description

On Android, when InAppWebview is inside NestedScrollView, web page scrolling doesn't work. On ios it works as expected.

I also noticed, that removing SliverAppBar widget "fixes" the problem.

Expected behavior:

When scrolling down, after the SliverAppBar widget is no longer visible, web page starts scrolling. Here it is in action on ios:

https://github.com/pichillilorenzo/flutter_inappwebview/assets/23721/8f5993eb-bcce-4d05-9a6e-512aec396f31

Current behavior:

Web page scroll doesn't work on Android.

Steps to reproduce

Check out this repo with minimal reproducible code.

Code:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const WebViewPage(),
    );
  }
}

class WebViewPage extends StatefulWidget {
  const WebViewPage({super.key});

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  final GlobalKey webViewKey = GlobalKey();

  InAppWebViewController? webViewController;
  bool _enableWebViewGesture = false;
  late ScrollController _scrollController;

  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController();
    _scrollController.addListener(_scrollListener);
  }

  void _scrollListener() {
    if (_scrollController.hasClients) {
      final offset = _scrollController.offset;

      // Determine if the app bar is fully collapsed and update state accordingly
      if (offset >= kToolbarHeight) {
        setState(() { _enableWebViewGesture = true; });
      } else {
        setState(() { _enableWebViewGesture = false; });
      }
    }
  }

  @override
  Widget build(BuildContext context) {

    var topBarWidget = FlexibleSpaceBar(
      title: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          return const Text(
            'TITLE',
            overflow: TextOverflow.ellipsis,
            softWrap: false,
          );
        }
      ),
      titlePadding: const EdgeInsetsDirectional.only(start: 0, bottom: 16),
      background: DecoratedBox(
        decoration: BoxDecoration(
          color: Theme.of(context).colorScheme.inversePrimary
        ),
      ),
    );

    return NestedScrollView(
      controller: _scrollController,
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            pinned: false,
            snap: false,
            floating: false,
            expandedHeight: kToolbarHeight,
            flexibleSpace: topBarWidget,
          ),
        ];
      },
      body: InAppWebView(
        key: webViewKey,
        initialUrlRequest: URLRequest(url: WebUri('https://en.m.wikipedia.org')),
        gestureRecognizers: _enableWebViewGesture
          ? (Set()..add(Factory<VerticalDragGestureRecognizer>(() => VerticalDragGestureRecognizer())))
          : null,
        onWebViewCreated: (controller) async {
          webViewController = controller;
          webViewController?.addJavaScriptHandler(handlerName: 'scrollToTopHandler', callback: (args) {
            setState(() { _enableWebViewGesture = false; });
          });
        },
        onLoadStop: (controller, url) {
          controller.evaluateJavascript(source: """
            window.onscroll = function() {
              if (window.pageYOffset === 0) {
                window.flutter_inappwebview.callHandler('scrollToTopHandler');
              }
            };
          """);
        },
      ),
    );
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }
}

[github-actions[bot]]

👋 @artemave

NOTE: This comment is auto-generated.

Are you sure you have already searched for the same problem?

Some people open new issues but they didn't search for something similar or for the same issue. Please, search for it using the GitHub issue search box or on the official inappwebview.dev website, or, also, using Google, StackOverflow, etc. before posting a new one. You may already find an answer to your problem!

If this is really a new issue, then thank you for raising it. I will investigate it and get back to you as soon as possible. Please, make sure you have given me as much context as possible! Also, if you didn't already, post a code example that can replicate this issue.

In the meantime, you can already search for some possible solutions online! Because this plugin uses native WebView, you can search online for the same issue adding android WebView [MY ERROR HERE] or ios WKWebView [MY ERROR HERE] keywords.

Following these steps can save you, me, and other people a lot of time, thanks!

[FaFre]

@artemave did you find a solution for this?

[artemave]

@artemave did you find a solution for this?

I didn't. Let me know if you do/did.

[FaFre]

No I actually think it is not possible and gave up on it.

[artemave]

No I actually think it is not possible and gave up on it.

What makes you think it's not possible?

[FaFre]

No I actually think it is not possible and gave up on it.

What makes you think it's not possible?

There is a way via gesture override but it becomes very buggy and unreliable, sometimes it scrolls, sometimes not. You can find some stack overflow questions with bounties that haven't come to a solution.

[raegtime]

+1