Flutter - pull to refresh on a webview?

Question

Hi I just wanna ask if its possible to reload a WebView in Flutter? I searched around and most of them are using the FAB (Floating Action Button) to reload a website but its little to none when it comes to WebViews, most of it are for ListViews.

Is there anyway to do it in a WebView Screen?

What I tried so far is: SwipeDetector package and Pull-to-refresh package both which doesn't work, pull to refresh almost works but it closes my app entirely (I've followed the documentation but it seems it works fine on listviews only)

my code is like this in case you want to see:

class _HomePageState extends State<HomePage> {
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();
  WebViewController myController;
  final flutterWebviewPlugin = new WebView();

  _exitApp(BuildContext context, Future<WebViewController> controller) async {
    controller.then((data) async {
      WebViewController controller = data;
      var goBack = await controller.canGoBack();
      if (goBack == true) {
        print("onwill go back");
        controller.goBack();
      } else {
        print("onwill not go back");
        Navigator.pop(context);
      }
    });
  }

  @override
  void initState() {
    super.initState();
    firebaseCloudMessagingListeners();
  }

  void firebaseCloudMessagingListeners() {
    if (Platform.isIOS) iOSPermission();

    _firebaseMessaging.getToken().then((token) {
      print(token);
    });

    _firebaseMessaging.configure(
      onMessage: (Map<String, dynamic> message) async {
        setState(() {
          print("${message['data']['url']}");
          Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (BuildContext context) => NotificationClicked()));
        });
      },
      onResume: (Map<String, dynamic> message) async {
        print("${message['data']['url']}");
      },
      onLaunch: (Map<String, dynamic> message) async {
        print("${message['data']['url']}");
      },
    );
  }

  void iOSPermission() {
    _firebaseMessaging.requestNotificationPermissions(
        IosNotificationSettings(sound: true, badge: true, alert: true));
    _firebaseMessaging.onIosSettingsRegistered
        .listen((IosNotificationSettings settings) {
      print("Settings registered: $settings");
    });
  }

  Completer<WebViewController> _controller = Completer<WebViewController>();


  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        onWillPop: () => _exitApp(context, _controller.future),
        child: SafeArea(
    child: Scaffold(
      body: WebView(
          initialUrl: 'https://syncshop.online/en/',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (controller) {
            _controller.complete(controller);
          },
          onPageFinished: (controller) async {
            (await _controller.future).evaluateJavascript(
        "document.getElementsByClassName('footer-container')[0].style.display='none';");
            (await _controller.future).evaluateJavascript(
        "document.getElementById('st_notification_1').style.display='none';");
            (await _controller.future).evaluateJavascript(
        "document.getElementById('sidebar_box').style.display='none';");
          },
        ),
      floatingActionButton: FutureBuilder<WebViewController>(
        future: _controller.future,
        builder: (BuildContext context,
            AsyncSnapshot<WebViewController> controller) {
          if (controller.hasData) {
            return FloatingActionButton(
              onPressed: () {
                controller.data.reload();
              },
              child: Icon(Icons.refresh),
            );
          }
          return Container();
        },
      ),
    ),
        ),
      );
  }
}

I would love to help you, but my Android emulator crashes with just PullToRefresh and WebView widgets in the same tree. — J. S., Jan 15 '20 at 20:44
hey this is probably what you you guys need KDC & @JoãoSoares https://stackoverflow.com/questions/57656045/sweep-down-to-refresh-webview-app-in-flutter — leemuljadi, Jan 16 '20 at 10:06
@leemuljadi I thnk i will try that again. If I remember correctly, I tried that last time but Im not exactly sure what to put in the onSwipe: () {} since the answer is using a WebviewScaffold from a different pluin rather than just the WebView() that Im using (from flutter team) — KDC, Jan 16 '20 at 10:24

leemuljadi · Answer 1 · 2020-01-16T09:58:36.630

0

Maybe you can try using RefreshIndicator, I personally haven't try in WebView but hopefully it works.

return Scaffold(
  body: RefreshIndicator(
    onRefresh: () => _controller.reload(),
    child: Webview(),
  ),
),

edited Jan 16 '20 at 09:58

answered Jan 15 '20 at 04:41

leemuljadi

410
1
3
14

Hi just saw your answer I would like to ask is if its okay to use a different name for the ```void``` function? since I already have initState declared. I've also updated my code – KDC Jan 16 '20 at 03:47
Also, ```_setupFeed() async { await controller.data.reload(); setState(() { WebView(); }); } ``` gives an error saying the controller is not defined – KDC Jan 16 '20 at 04:10
Hi, so basically the code above is just to show the idea of how it works, then you have to modified the code above according to your condition, as I've mentioned before that I have never use it for WebView. So the idea _setupFeed() method is when you drag down the screen it triggers that method which will refresh the page. Maybe change await controller.data.reload() with method that you use to retrieve the data from the web. The idea of why you put _setupFeed(); in the initState is to call it whenever the widget builds for the first time so you can just put in inside your initState method. – leemuljadi Jan 16 '20 at 09:33
maybe ignore the initState & _setupFeed() and try this instead: return Scaffold( body: RefreshIndicator( onRefresh: () => _controller.reload(), child: Webview(), ), ), – leemuljadi Jan 16 '20 at 09:42
Hi I've tried and modified what you said but I think its the limit of webview but i will still look for solutions. Thank you – KDC Jan 16 '20 at 09:46
You can try what he did here: https://stackoverflow.com/questions/57215843/how-to-reload-webview-in-flutter then implement it using the RefreshIndicator(). hope this helps – leemuljadi Jan 16 '20 at 09:49

Flutter - pull to refresh on a webview?

1 Answers1