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: <Widget>[
                  InAppWebView(
                    gestureRecognizers: Set()
                      ..add(
                        Factory<VerticalDragGestureRecognizer>(
                            () => 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),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    ),
  ),
);
}

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. — brigitte18, Sep 23 '20 at 11:54
child: Scaffold( body: SafeArea( child: Column(children: [ Container( padding: EdgeInsets.all(3.0), child: Icon(Icons.keyboard_arrow_down), ), Expanded( child: Container( child: InAppWebView( — brigitte18, Sep 23 '20 at 13:19

score 1 · Answer 1 · answered Sep 23 '20 at 13:18

1

This is probably the correct answer in your case ->

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

answered Sep 23 '20 at 13:18

brigitte18

145
3
16

1

In this case, how do you get trigger pull to refresh action? – Kimhak Sep 24 '20 at 03:41
void _onRefresh() async { if (webView != null) { webView.reload(); } await Future.delayed(Duration(milliseconds: 1000)); _refreshController.refreshCompleted(); } – brigitte18 Sep 26 '20 at 15:09
I am confused with your comments. In the above you use Tabview + gestureRecognizers. How about this one? And Do you use RefreshIndicator or pull_to_refresh package? – Kimhak Sep 28 '20 at 03:12
I am using pull_to_refresh, and replaced their example listview.builder with the inappwebview scaffold. So just copy the example they give you, replace the listview with this scaffold on this answer. – brigitte18 Sep 28 '20 at 17:30
You solutions indeed help me. But it's not work if we want to trigger pull to refresh by pulling from webview. Anyway, thank you so much! – Kimhak Sep 30 '20 at 08:48
Yes, this is more of a bypass workaround which helped me as well so you should probably mark this answer so other people can work around the issue. – brigitte18 Oct 01 '20 at 12:44

brigitte18 · Answer 2 · 2020-09-23T11:54:05.253

0

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: <Factory<OneSequenceGestureRecognizer>>[
new Factory<OneSequenceGestureRecognizer>(
() => new EagerGestureRecognizer(),
),
].toSet(),

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

edited Sep 23 '20 at 11:54

answered Sep 23 '20 at 10:14

brigitte18

145
3
16

1

child: Scaffold( body: SafeArea( child: Column(children: [ Container( padding: EdgeInsets.all(3.0), child: Icon(Icons.keyboard_arrow_down), ), Expanded( child: Container( child: InAppWebView( – brigitte18 Sep 23 '20 at 13:20
The scrollview is work, but pull to refresh is not working in this case. – Kimhak Sep 24 '20 at 01:43
void _onRefresh() async { if (webView != null) { webView.reload(); } await Future.delayed(Duration(milliseconds: 1000)); _refreshController.refreshCompleted(); } – brigitte18 Sep 26 '20 at 15:09
Pull to refresh [does not support webview](https://github.com/peng8350/flutter_pulltorefresh/issues/278) – Michiel Mar 08 '22 at 08:46

Pull to refresh WebView in flutter

2 Answers2