Flutter WebView Plugin error on android 9

Question

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:

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:

• https://developer.android.com/training/articles/security-config#CleartextTrafficPermitted

Comments

[Richard Heap]

Don't use http in the URL. Change to HTTPS.

[Arash Mohammadi]

I need the http to work, the website does not have https. thanks for making me realize the problem @RichardHeap

[Arash Mohammadi]

Wow! This works man, perfect and quick :). Thanks! I used the third one cause I have so many http in my app.

[Lalana Chamika]

The third option worked for me setting usesCleartextTraffic="true". Thanks