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 the flutter_webview_plugin as I have a side drawer. Any ideas as to how to refresh the webview page?

I've tried using setState() to rebuild the same page but the app doesn't rebuild itself. I've also tried using navigator.push() but this directs to a fullscreen webview and covers the drawer and appbar.

Widget build(BuildContext context){
return Scaffold(
  appBar: AppBar(
    title: Text(widget.drawerItems[_selectedDrawerIndex].title, style: TextStyle(
      shadows: <Shadow>[
        Shadow(
          offset: Offset(1.0, 1.0),
          blurRadius: 10.0,
          color: Color(0xff185B1E),
        ),
      ],
      color: Colors.white,
    ),
  ),
    backgroundColor: Color(0xff9ABDFF),
    iconTheme: IconThemeData(color: Colors.white),
    actions: <Widget>[

      IconButton(
        icon: Icon(Icons.refresh), 
        color: Colors.white,
        onPressed: () {
          setState((){
            _selectedDrawerIndex = 3;
            //refresh webview here
          });   
        },
      ),
    ]
    body: _getDrawerItemWidget(_selectedDrawerIndex),
    //_getDrawerItemWidget refers to a webview page
  ),
}

Below is my webview widget:

class Web1 extends StatelessWidget{
  @override

  Widget build(BuildContext ctxt) {
    return WebView(
        key: UniqueKey(),
        javascriptMode: JavascriptMode.unrestricted,
        initialUrl: 'http://www.google.com',
    );
  }
}

Answer 1

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