How to fix 'net::ERR_CLEARTEXT_NOT_PERMITTED' in flutter - flutter

Question

I have implemented webView in flutter but it is not opening my php website which is on server what I'm doing wrong.
I am new to flutter and tried webview to integrate my website webpage in my application but no luck.
Widget build(BuildContext context) {
// TODO: implement build
return WebviewScaffold(
appBar: AppBar(iconTheme:IconThemeData(color: Colors.white),title: Text("Intake Form",style:new TextStyle(color: Colors.white,fontWeight: FontWeight.bold)),backgroundColor:Colors.indigoAccent,automaticallyImplyLeading: false),
url: url,
//url: "http://xxxxxxxx/",
withJavascript: true,
supportMultipleWindows: true,
withLocalStorage: true,
allowFileURLs: true,
enableAppScheme: true,
appCacheEnabled: true,
hidden: false,
scrollBar: true,
geolocationEnabled: false,
clearCookies: true,
// usesCleartextTraffic="true"
);
}
I expect the output as running webview but error is thrown.

Answer 1

In main directory of your Flutter project you have three main folders:
- lib = your Dart code
- ios = generated structure for iOS platform
- android = generated structure for Android platform
We are interested in android directory.
When you open it, you will see "typical Android app structure".
So you have to do 2 things:
1) Add new file in res
Go to directory:
my_flutter_project/android/app/src/main/res/
Create xml directory (in res!)
And inside xml add new file with name: network_security_config.xml and content:
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<base-config cleartextTrafficPermitted="true">
<trust-anchors>
<certificates src="system" />
<certificates src="user" />
</trust-anchors>
</base-config>
</network-security-config>
network_security_config.xml should be located in path:
my_flutter_project/android/app/src/main/res/xml/network_security_config.xml
Here you can find more information about this file:
https://developer.android.com/training/articles/security-config
2) Modify AndroidManifest.xml
Go to:
flutter_project/android/app/src/main/AndroidManifest.xml
AndroidManifest.xml is XML file, with structure:
<manifest>
<application>
<activity>
...
</activity>
<meta-data >
</application>
</manifest>
So for <application> PROPERTIES you have to add 1 line:
android:networkSecurityConfig="#xml/network_security_config"
Remember that you have to add it as property (inside application opening tag):
<application
SOMEWHERE HERE IS OK
>
Not as a tag:
<application> <--- opening tag
HERE IS WRONG!!!!
<application/> <--- closing tag

Answer 2

set usesCleartextTraffic property to true in your AndroidManifest file, like below.
<application
....
android:usesCleartextTraffic="true"
....>

Answer 3

Android:
In flutter_project/android/app/src/main/AndroidManifest.xml
Add
<application
....
android:usesCleartextTraffic="true"
....>
IOS:
In flutter_project/ios/Runner/info.plist
Add
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
Run flutter clean.Then, run the app.

Answer 4

For ios modify info.plist ./ios/Runner/info.plist
Add the following:
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
and run flutter clean before spinning up the app again

Answer 5

make network_security_config.xml file.
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<base-config cleartextTrafficPermitted="true">
<trust-anchors>
<certificates src="system" />
</trust-anchors>
</base-config>
</network-security-config>
add this two line in Manifest file in Application tag.