title: How to display a local image before webview is successfully loaded in Flutter?
body: <p>In Flutter, I would like to display a local image before my webview is loaded. In case the user hasn't turn on their wifi, an image will be shown instead of a blank white screen(ios) or an error message saying cannot connect to said webpage(android).</p>
  
  <p>I am using the official webview_flutter package for this app.</p>
  
  <p>Below is the code that I've tried, but it works on ios but doesn't work on android. In Android, when I turned off the wifi and launch the app, an error message which displays the webview link is shown.</p>
  
  <p>Edit: Does not change from image to webview after wifi is connected and pressed the reload button.</p>
  
  <pre><code>final webViewKey1 = GlobalKey&lt;WebViewContainerState&gt;();
  var _url = 'http://www.google.com';
  final _key = UniqueKey();
  bool _isLoadingPage;
  
  class WebViewPage extends StatefulWidget {
    @override
    WebViewPageState createState() =&gt; WebViewPageState();
  }
  
  class WebViewPageState extends State&lt;WebViewPage&gt; {
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Screen 1'),
          leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: (){
              Scaffold.of(context).openDrawer();
            },
          ),
          actions: &lt;Widget&gt;[
            IconButton(
              icon: Icon(Icons.refresh), 
              color: Colors.white,
              onPressed: () {
                webViewKey1.currentState?.reloadWebView();
              },
            ),
          ]
        ),
        body: 
            WebViewContainer(key: webViewKey1),   
      );
    }
  }
  
  class WebViewContainer extends StatefulWidget {
    WebViewContainer({Key key}) : super(key: key);
  
    @override
    WebViewContainerState createState() =&gt; WebViewContainerState();
  }
  
  class WebViewContainerState extends State&lt;WebViewContainer&gt; {
    WebViewController _webViewController;
  
    void initState() {
      super.initState();
      _isLoadingPage = true;
    }
  
    @override
    Widget build(BuildContext context) {
      return Stack(
          children: &lt;Widget&gt;[
            Opacity(opacity: _isLoadingPage?0:1, child: WebView(
              key: _key,
              initialUrl: _url,
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (controller) {
                _webViewController = controller;
              },
              onPageFinished: (finish) {
                setState(() {
                  _isLoadingPage = false;
                });
              },
            ),
            ),
            _isLoadingPage
              ? Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/images/fail.png'),
                    fit: BoxFit.fill,
                  ),
                ),
              )
              : Container(
                color: Colors.transparent,
              ),
          ],
        );
    }
  
    void reloadWebView() {
      _webViewController?.reload();
    }
  }
  </code></pre>