Pull to refresh WebView in flutter

Question

I build a WebView app, and I want to pull down the screen to refresh the webpage. I use flutter_inappwebview for the webview. I try to wrap WebView inside SingleChildScrollView or ListView, but none of them work. In below code, WebView is not scrollable while swipe function works.

I have been looking for the solution for sometime, yet I couldn't find it. Any helps would be appreciate!

@override
Widget build(BuildContext context) {
return WillPopScope(
  onWillPop: () => _onBackPressed(),
  child: Scaffold(
    body: SafeArea(
      child: RefreshIndicator(
        onRefresh: () async {
          print("##Refresh");
          webview.reload();
        },
        child: SingleChildScrollView(
          physics: AlwaysScrollableScrollPhysics(),
          child: Container(
            height: MediaQuery.of(context).size.height,
            child: Center(
              child: Stack(
                children: [
                  InAppWebView(
                    gestureRecognizers: Set()
                      ..add(
                        Factory(
                            () => VerticalDragGestureRecognizer(),
                        ),
                      ),
                    initialOptions: InAppWebViewGroupOptions(
                      crossPlatform: InAppWebViewOptions(
                        debuggingEnabled: true,
                        userAgent: 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Mobile Safari/537.36',
                      ),
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      webview = controller;
                      controller.loadUrl(url: startURL);
                    },
                    onLoadStart: (InAppWebViewController controller, String url) async {
                      print("##onloadstart: " + url);
                    },
                    onLoadStop: (InAppWebViewController controller, String url) async {
                      print("##onloadstop: $url");
                    },
                    onProgressChanged: (InAppWebViewController controller, int progress) {
                      setState(() {
                        this.progress = progress / 100;
                      });
                    }
                  ),
                  Align(
                    alignment: Alignment.center,
                    child: buildProgressBar(progress),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    ),
  ),
);
}

user_4436222 · Answer

This is probably the correct answer in your case ->

child:  Scaffold(
                  body: SafeArea(
                      child: Column(children: [
                        Container(
                          padding: EdgeInsets.all(3.0),
                          child: Icon(Icons.keyboard_arrow_down),
                        ),
                        Expanded(
                          child: Container(
                            child: InAppWebView(...)

user_4436222 · Answer

its actually pretty simple if you use the pull_to_refresh package. All you have to do is look at the bottom of their demo code and replace the listview builder with your inappwebview scaffold.

child: ListView.builder(), -> child:  Scaffold(),

and dont forget to add your webView.reload(); for the pull.

Package @ https://pub.dev/packages/pull_to_refresh

#EDIT Sorry I didnt understand the issue was with scrolling in the webview. I replicated the issue, then , because I have a tabview controller, I used

gestureRecognizers: >[
new Factory(
() => new EagerGestureRecognizer(),
),
].toSet(),

this resolved the issue, and if it wasnt this then its due to using Expanded children.

Pull to refresh WebView in flutter

2 Answers