pull to refresh freezes the WebView scrolling in flutter

Question

After implementing the pull to refresh button on webview I'm facing the screen scrolling issue on webview. When I try to scroll the screen upwards or downwards then it's just cannot scroll.

As you can see in the webview unable to scroll downwards but when I try to scroll upwards, the pull to refresh button trigged.

Main.dart

int currentIndex = 0;
  @override
  Widget build(BuildContext context) {
//Including Dart Webview pages
    final screens = [
      HomeClass(),
      ProfileClass(),
      CartClass()
    ];

    return Scaffold(
      resizeToAvoidBottomInset: true,
      appBar: null,
      body: SafeArea(child: screens[currentIndex]),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.pink,
        currentIndex: currentIndex,
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.white60,
        onTap: (index) {
          setState(() => currentIndex = index);
          Get.find<NavigationController>().controller.value?.reload();
        },
        items: const [
          BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.home),
              label: 'Home',
              backgroundColor: Colors.pink),
          BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.profile_circled),
              label: 'Profile',
              backgroundColor: Colors.red),
          BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.cart),
              label: 'Cart',
              backgroundColor: Colors.pink)
        ],
      ),
    );
  }

Navigation_contoller.dart

import 'package:get/get.dart';
import 'package:webview_flutter/webview_flutter.dart';

class NavigationController extends GetxController {
  Rx<WebViewController?> controller = null.obs;
}

Home_page.dart

class Homestate extends State<HomeClass> with TickerProviderStateMixin {
  late WebViewController _controller;
  final Completer<WebViewController> _controllerCompleter =
      Completer<WebViewController>();

  final RefreshController _refreshController =
      RefreshController(initialRefresh: false);

  late AnimationController animController;

  @override
  void initState() {
    super.initState();
    animController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1200),
    );
  }

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

  //Make sure this function return Future<bool> otherwise you will get an error
  Future<bool> _onWillPop(BuildContext context) async {
    if (await _controller.canGoBack()) {
      _controller.goBack();
      return Future.value(false);
    } else {
      return Future.value(true);
    }
  }

  bool isLoading = false;
  final key = UniqueKey();
  int position = 0;
//Build function
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () => _goBack(context),
      child: Scaffold(
        appBar: null,
        body: SmartRefresher(
          controller: _refreshController,
          enablePullDown: true,
          onRefresh: () {
            Get.find<NavigationController>().controller.value?.reload();
            _refreshController.refreshCompleted();
          },
          child: IndexedStack(
            index: position,
            children: [
              WebView(
                initialUrl: 'https://canada.ca',
                javascriptMode: JavascriptMode.unrestricted,
                key: key,
                onPageStarted: (value) {
                  setState(() {
                    position = 1;
                  });
                },
                onPageFinished: (value) {
                  setState(() {
                    position = 0;
                  });
                },
                onWebViewCreated: (WebViewController webViewController) {
                  _controllerCompleter.future
                      .then((value) => _controller = value);
                  _controllerCompleter.complete(webViewController);
                  Get.find<NavigationController>().controller =
                      webViewController.obs;
                },
              ),
              Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                color: Colors.white.withOpacity(0.5),
                child: Center(
                  child: SpinKitDualRing(
                    color: Colors.pinkAccent,
                    size: 45.0,
                    controller: animController,
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

//Go back coding
  Future<bool> _goBack(BuildContext context) async {
    if (await _controller.canGoBack()) {
      _controller.goBack();
      return Future.value(false);
    } else {
      showDialog(
          context: context,
          builder: (context) => AlertDialog(
                title: const Text('Do you want to exit from Foodrive?'),
                actions: <Widget>[
                  TextButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: const Text('No'),
                  ),
                  TextButton(
                    onPressed: () {
                      SystemNavigator.pop();
                    },
                    child: const Text('Yes'),
                  ),
                ],
              ));
      return Future.value(true);
    }
  }
}