Search code examples
androidflutterdartwebview

Flutter WebView Plugin error on android 9

I am Developing an android app which has a Flutter WebView Plugin to show a web page. It works perfectly on my phone (Android 8.1 LG V20). but on my friends phone (Android 9 xiaomi note 7 pro) it shows this error: The webView error

My Code: flutter_webview_plugin: ^0.3.8

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

 class WebPage extends StatefulWidget {
  final String url;

  WebPage({
    this.url,
  });
  @override
  _WebPageState createState() => _WebPageState();
}

class _WebPageState extends State<WebPage> {
  @override
  void initState() {
    super.initState();
    print('url = ' + widget.url);
  }
  @override
  Widget build(BuildContext context) {
    String link = widget.url;
    return WebviewScaffold(
      url: link,
      appBar: new AppBar(
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
      displayZoomControls: true,
    );
  }
}

Any help would be appreciated.

Solution

  • Your friend is seeing this error because as standard on Android 9 and up it has been made illegal to connect to http domains, which Google deems unsafe.
    Instead you have 3 options.

    https

    Use the https variant of your site.
    Instead of loading http://window.arian.co.ir load https://window.arian.co.ir

    Opt out for your domain.

    You can opt out of the security check for the window.arian domain.

    Make a file called network_security_config.xml and place it in the res/xml/ folder of the android folder.

    <?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">window.arian.co.ir</domain>
    </domain-config>
</network-security-config>

    Opt out entirely

    If you want you can opt out of this security check for all the sites inside the WebView by placing the android:usesCleartextTraffic="true" on the Application tag.

    In your android folder navigate to the AndroidManifest.xml

    <application
        android:name="io.flutter.app.FlutterApplication"
        android:icon="@mipmap/ic_launcher"
        android:usesCleartextTraffic="true">

    See documentation: