LaVOZs

The World’s Largest Online Community for Developers

'; android - Flutter - pull to refresh on a webview? - LavOzs.Com

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();
        },
      ),
    ),
        ),
      );
  }
}

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(),
  ),
),
Related
How to refresh Android listview?
Android Calling JavaScript functions in WebView
How to implement Android Pull-to-Refresh
Android webview & localStorage
Adding pull to refresh on webview for refreshing
Is there WebView in Flutter?
Rounded Corners Image in Flutter
sweep down to refresh WebView app in flutter
Flutter Sliver pull to refresh