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.

Boken · Answer 1 · 2020-02-14T13:26:02.930

128

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

edited Feb 14 '20 at 13:26

answered Feb 12 '20 at 15:43

Boken

4,825
10
32
42

21

What a wonderful answer with every step explained with complete clarity! – DroidOS Apr 06 '20 at 14:16
3

I can't understand why topic starter hasn't accepted this answer. It really works! Thanks, and take my upvote – Konstantin Oct 07 '20 at 05:06
3

The answer is correct here is my perception according to the question is that when a developer implement an site with http:// then this security file is needed else if you just change the url with https:// you will not get any error in the web view – Osama Buzdar Dec 30 '20 at 14:40
1

it is wonderful example and explained simple and very easy working method, thank you. – ViKi Vyas Mar 21 '22 at 10:53
Don't forget to restart the app for the changes to take effect – TOPKAT Jun 03 '22 at 13:32
does anyone know how to enable this in **development** only? – Sang Jun 06 '22 at 06:06
@transang would you like to use `productFlavors` (e.g. "test", "internal", "paid", "free" etc.) or `buildTypes` ("debug" / "release")? – Boken Jun 06 '22 at 10:28
in my case, I want the `buildTypes`. In local dev, I want to connect to the LAN host that is HTTP, while in production build, it is https – Sang Jun 06 '22 at 18:36
1

this is most elaborate answer ever!!! thanks – Kavishka Rajapakshe Apr 01 '23 at 06:28

score 86 · Answer 2 · answered Apr 10 '19 at 04:30

86

set usesCleartextTraffic property to true in your AndroidManifest file, like below.

<application
....
android:usesCleartextTraffic="true"
....>

answered Apr 10 '19 at 04:30

Nimit Khandelwal

902
5
5

7

Even with this option, it doesn't work :/ I had to run `flutter clean` and then rerun the project again – Ionel Lupu Aug 01 '19 at 12:49
3

@lonelLupu Possible no need for cleaning. Seems that stop the whole app and *rebuild* it is enough. The reason is that, the AndroidManifest does not reload with Flutter's hot reload/restart. – ch271828n Oct 12 '20 at 03:20
Simple and very easy working method. – ViKi Vyas Mar 21 '22 at 10:51
I personally think setting this to true goes against Android best practices related network security; https://developer.android.com/guide/topics/manifest/application-element . From Android 8 this property is false by default. – Jun 01 '22 at 07:56

Muktadir Sony · Answer 3 · 2022-05-30T10:01:56.343

22

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.

edited May 30 '22 at 10:01

answered Nov 28 '21 at 09:25

Muktadir Sony

344
4
9

score 3 · Answer 4 · answered Feb 23 '21 at 12:17

3

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

answered Feb 23 '21 at 12:17

Andre Haueisen

468
2
8
20

score 1 · Answer 5 · answered Nov 26 '19 at 13:49

1

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.

answered Nov 26 '19 at 13:49

Mihir Akoliya

166
1
7

Where exactly this file needs to be placed? – akifquddus Feb 07 '20 at 21:58
in res folder make xml folder and then put this .xml file. – Mihir Akoliya Feb 08 '20 at 07:58
I am working in flutter, so there is no res folder in there. – akifquddus Feb 08 '20 at 13:02
According to docs: This flag is ignored on Android 7.0 (API level 24) and above if an Android Network Security Config is present. – Martin Berger Nov 23 '22 at 15:02

How to fix 'net::ERR_CLEARTEXT_NOT_PERMITTED' in flutter

5 Answers5

1) Add new file in `res`

2) Modify AndroidManifest.xml

Remember that you have to add it as property (inside `application` opening tag):

Linked

How to fix 'net::ERR_CLEARTEXT_NOT_PERMITTED' in flutter

5 Answers5

1) Add new file in res

2) Modify AndroidManifest.xml

Remember that you have to add it as property (inside application opening tag):

Linked

1) Add new file in `res`

Remember that you have to add it as property (inside `application` opening tag):