Ignore Pointer make list view non scrollable in flutter

Question

I am making an application that is using webviews (flutter_inappwebview: 5.7.2+3) and need to apply refresh indicator to refresh the page. There are two cases that i want to work together. But when i fix one case other case not working. Can anyone provide me a better solution for achieving this. I am sharing the code with you.

Case 1: When I use ignore pointer with listview, ListView dont scroll and refresh indicator not work.

Case 2: If i dont use ignore pointer, then click buttons (menu Icon) behind listview not clicked.

Note: I just comment out the IgnorePointer widget in below code

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

void main() => runApp(
    MaterialApp(debugShowCheckedModeBanner: false, home: WebViewWidget()));

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

  @override
  State<WebViewWidget> createState() => _WebViewWidgetState();
}

class _WebViewWidgetState extends State<WebViewWidget> {
  late InAppWebViewController inAppWebViewController;
  Color ACCENT_COLOR = Colors.black;
  Color SECOND_ACCENT_COLOR = Colors.orange;
  late PullToRefreshController pullToRefreshController;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: RefreshIndicator(
          color: ACCENT_COLOR,
          onRefresh: () {
            print("Reload");
            return Future.delayed(Duration(seconds: 1), () {
              inAppWebViewController.reload();
            });
          },
          child: Stack(
            children: [
              InAppWebView(
                // pullToRefreshController: pullToRefreshController,
                initialUrlRequest: URLRequest(
                    url: Uri.parse("https://flutter.dev/development")),
                initialOptions: InAppWebViewGroupOptions(
                  crossPlatform: InAppWebViewOptions(
                    useShouldOverrideUrlLoading: true,
                    // useOnLoadResource: true,
                  ),
                ),
                onLoadStart: (con, uri) {
                  print("on Load Start ${uri.toString()}");
                },
                onLoadStop: (con, uri) {
                  print("on Load Stop ${uri.toString()}");
                },
                onUpdateVisitedHistory: (con, link, cond) {
                  print("onUpdateVisitedHistory");
                },
                shouldOverrideUrlLoading: (controller, navigationAction) async {
                  final currentUrl = navigationAction.request.url.toString();
                  print("Do navigation");
                  return NavigationActionPolicy.ALLOW;
                },
                onWebViewCreated: (InAppWebViewController controller) {
                  inAppWebViewController = controller;
                },
                onProgressChanged:
                    (InAppWebViewController controller, int progress) {
                  // print("Progress: $_progress");
                },
              ),
              //TODO Implement refresh indicator
// IgnorePointer(
              //   child:
              ListView(
                padding: EdgeInsets.zero,
                shrinkWrap: true,
                children: [
                  Container(
                    color: Colors.transparent,
                    height: MediaQuery.of(context).size.height / 8,
                  )
                ],
              ),
              // ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

Why are you doing all these things when you just want to refresh the webPage, You can just use the built-in refresh controller of the InAppWebView with pullToRefreshController parameter, just add the below code in your InAppWebView:

pullToRefreshController: PullToRefreshController(
   onRefresh: () => inAppWebViewController.reload(),
),

See here i've just called the PullToRefreshController class and reloaded the webPage with inAppWebViewController.reload() in onRefresh

You also make a separate controller for it of type PullToRefreshController but there's no need for that.