Flutter InAppWebView loads the page but doesn't show the content

Question

I'm using InAppWebView in Flutter It's for a hybrid simple application, which is only a webview, some services, and flutter_native_slpah Sometimes the web page won't load, but when I turn the screen off and on again, or as soon as I push back button (which triggers a confirmation dialog) the whole page is shown.

InAppWebView(
    initialUrlRequest: URLRequest(
    url: Uri.parse(base + 'login')
    ),
    initialOptions: InAppWebViewGroupOptions(
      android: AndroidInAppWebViewOptions(
        disableDefaultErrorPage: false,
        // useHybridComposition: true,
        supportMultipleWindows: false,
        cacheMode: AndroidCacheMode.LOAD_DEFAULT,
      ),
      crossPlatform: InAppWebViewOptions(
        javaScriptEnabled: true,
        mediaPlaybackRequiresUserGesture: false,
        // debuggingEnabled: true,
      ),
    ),
    onWebViewCreated: (InAppWebViewController controller) {
      webViewController = controller;
      controller.addJavaScriptHandler(handlerName: 'FLUTTER', callback: (args) {
        final Map<String, dynamic> data = json.decode(args[0]);
        handler(data);
      });
    },
    onLoadStop: (InAppWebViewController controller, Uri uri) {
      // FlutterNativeSplash.remove();
    },
    androidOnPermissionRequest: (InAppWebViewController controller, String origin, List<String> resources) async {
      return PermissionRequestResponse(resources: resources, action: PermissionRequestResponseAction.GRANT);
    }
);

I've tried updating url after it's loaded by the controller, still the problem remains after splash.

The webview is wrapped like below in widget:

return WillPopScope(
    child: Scaffold(
        body: Column(children: <Widget>[Expanded(child: webView)])
    ),
    onWillPop: _goBack
);

Solution

You can use the IndexedStack widget to show a loading widget when your WebView has not loaded the URL yet and then when loading WebView is finished show the InAppWebView widget.

Here I created a sample code to show what I mean:

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

class InAppWebViewPage extends StatefulWidget {
  final String title, uri;

  const InAppWebViewPage({Key? key, required this.title, required this.uri})
      : super(key: key);

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

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  int _stackIndex = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: EdgeInsets.all(12),
        child: Expanded(
          child: IndexedStack(
            index: _stackIndex,
            children: [
              InAppWebView(
                initialUrlRequest: URLRequest(url: Uri.parse(widget.uri)),
                initialOptions: InAppWebViewGroupOptions(
                  crossPlatform:
                      InAppWebViewOptions(useShouldOverrideUrlLoading: true),
                ),
                onLoadStop: (_, __) {
                  setState(() {
                    _stackIndex = 0;
                  });
                },
                onLoadError: (_, __, ___, ____) {
                  setState(() {
                    _stackIndex = 0;
                  });
                  //TODO: Show error alert message (Error in receive data from server)
                },
                onLoadHttpError: (_, __, ___, ____) {
                  setState(() {
                    _stackIndex = 0;
                  });
                  //TODO: Show error alert message (Error in receive data from server)
                },
              ),
              const SizedBox(
                height: 50,
                child: CircularProgressIndicator(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}