How to reload webview in Flutter?

Question

In a Flutter app, I would like to reload the Webview page when I press the refresh icon button on the appbar. I am using the official webview_flutter and do not want to use

Answer 1

You can try to use re render all widget. In my case the widget is HomePage. With Naviagator.push method you can refresh all widget.

floatingActionButton: FloatingActionButton(
          child: Icon(Icons.refresh),
          backgroundColor: Colors.blueAccent,
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => HomePage()),
            );
          }),

Answer 2

First you have to obtain WebViewController and store it. To do it move the WebView to StatefulWidget (let's name it WebViewContainer) and pass onWebViewCreated callback to it.

Now you are able to reload WebView by calling webViewController.reload() method.

Second thing to do is to make reload trigger from outside. There are multiple ways to do it, I think the easiest option would be to use GlobalKey. So you need to create a final webViewKey = GlobalKey<WebViewContainerState>(). Pass the webViewKey to WebViewContainer constructor. After that you'll be able to access WebViewContainerState through webViewKey.currentState.

Example code:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

final webViewKey = GlobalKey<WebViewContainerState>();

class WebViewPage extends StatefulWidget {
  @override
  WebViewPageState createState() => WebViewPageState();
}

class WebViewPageState extends State<WebViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("WebView example"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: () {
              // using currentState with question mark to ensure it's not null
              webViewKey.currentState?.reloadWebView();
            },
          )
        ],
      ),
      body: WebViewContainer(key: webViewKey),
    );
  }
}

class WebViewContainer extends StatefulWidget {
  WebViewContainer({Key key}) : super(key: key);

  @override
  WebViewContainerState createState() => WebViewContainerState();
}

class WebViewContainerState extends State<WebViewContainer> {
  WebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return WebView(
      onWebViewCreated: (controller) {
        _webViewController = controller;
      },
      initialUrl: "https://stackoverflow.com",
    );
  }

  void reloadWebView() {
    _webViewController?.reload();
  }
}