How to fix 'net::ERR_CLEARTEXT_NOT_PERMITTED' in 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.

Answer 6

Implemented webView in Flutter, Try flutter_inappwebview: flutter_inappwebview: ^6.0.0 https://pub.dev/packages/flutter_inappwebview

Getting Started: https://inappwebview.dev/docs/intro

Requirements:

Dart sdk: ">=2.17.0 <4.0.0" Flutter: ">=3.0.0" Android: minSdkVersion >= 19, compileSdk >= 34, AGP version >= 7.3.0 (use Android Studio - Android Gradle plugin Upgrade Assistant for help), support for androidx (see AndroidX Migration to migrate an existing app) iOS 9.0+: --ios-language swift, Xcode version >= 14.3 MacOS 10.11+: Xcode version >= 14.3