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:
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,
),
],
)
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.