Search code examples
flutterwebview-flutter

Loading url in flutter using webview_flutter does not load images

I am developing a flutter app and I want to load static urls e.g. "About Us" page from the website. I am able to load the page but I have noticed that images are not fetching. I also suspect, the webview is not loading css and js assets. See the image below:

enter image description here

I have created the controller as shown below:

@override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageStarted: (url) {
            setState(() {
              loadingPercentage = 0;
            });
          },
          onProgress: (progress) {
            setState(() {
              loadingPercentage = progress;
            });
          },
          onPageFinished: (url) {
            setState(() {
              loadingPercentage = 100;
            });
          },
          onWebResourceError: (WebResourceError error) {},
        ),
      )
      ..loadRequest(Uri.parse(widget.url));
  }

on the page body, I have the following Stack:

Stack(
        children: [
          WebViewWidget(controller: controller),
          if (loadingPercentage < 100)
            LinearProgressIndicator(
              color: accentColor,
              backgroundColor: primaryLight,
              value: loadingPercentage / 100.0,
            ),
        ],
      )
Solution

  • The issue was caused by a misconfiguration of SSL certificate. The error I was getting that was stopping it from loading is as shown below:

    I/cr_X509Util(19621): Failed to validate the certificate chain, error: java.security.cert.CertPathValidatorException: Trust anchor for certification path not found. E/chromium(19621): [ERROR:ssl_client_socket_impl.cc(970)] handshake failed; returned -1, SSL error code 1, net_error -202

    However, I am still wondering why even with the error, IOS devices are displaying the pages but Android devices are not.