flutterwebviewflutter-inappwebview

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


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