androidflutterdartandroid-studioflutterwebviewplugin

How to enable http sites to open in webview_flutter?


I need to open http sites in a webview in my flutter app but it's not working in adnroid. For IOS, I added keys in info.plist files but I can't find a solution for android. Is there any way to allow to open sites that are not secured?

I am using the package webview_flutter

I tried to add the following xml file to allow unsecure sites and providing it's path to AndroidManifest file but it didn't work.

android/app/src/main/res/xml/network_security_config.xml
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <!-- You can add trusted certificates here if needed -->
        </trust-anchors>
    </base-config>
</network-security-config>

This is my manifest file:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.webview_demo">

<uses-permission android:name="android.permission.INTERNET" />
<application
    android:name="${applicationName}"
    android:icon="@mipmap/ic_launcher"
    android:label="webview_demo"
    android:networkSecurityConfig="@xml/network_security_config"
    android:usesCleartextTraffic="true">
    <activity
        android:name=".MainActivity"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
        android:exported="true"
        android:hardwareAccelerated="true"
        android:launchMode="singleTop"
        android:theme="@style/LaunchTheme"
        android:windowSoftInputMode="adjustResize">
        <!-- Specifies an Android theme to apply to this Activity as soon as
             the Android process has started. This theme is visible to the user
             while the Flutter UI initializes. After that, this theme continues
             to determine the Window background behind the Flutter UI. -->
        <meta-data
            android:name="io.flutter.embedding.android.NormalTheme"
            android:resource="@style/NormalTheme" />
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
    <!-- Don't delete the meta-data below.
         This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
    <meta-data
        android:name="flutterEmbedding"
        android:value="2" />
</application>

My webview code:

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebviewScreen extends StatefulWidget {
  final String url;

  const WebviewScreen({Key? key, required this.url}) : super(key: key);

  @override
  State<WebviewScreen> createState() => _WebviewScreenState();
}

class _WebviewScreenState extends State<WebviewScreen> {
  WebViewController? webViewController;

  @override
  void initState() {
    super.initState();
    loadWebView();
  }

  loadWebView() {
    webViewController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(Colors.white)
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageStarted: (String url) {
            log('Page started loading: $url');
          },
          onProgress: (int progress) {
            log('WebView is loading (progress : $progress%)');
          },
          onPageFinished: (String url) {
            log('Page finished loading: $url');
          },
          onWebResourceError: (WebResourceError error) {
            log('Webview resource error $error');
          },
          onNavigationRequest: (NavigationRequest request) {
            if (request.url.contains("http:/")) {
              log("first redirection ${request.url}");
              return NavigationDecision.navigate;
            }
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadRequest(
        Uri.parse(widget.url),
      );
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
        onWillPop: () async {
          return true;
        },
        child: Scaffold(
          appBar: AppBar(
            leading: const BackButton(),
            title: const Text('Webview'),
            centerTitle: true,
          ),
          body: SafeArea(
            bottom: false,
            child: Column(
              children: [
                Expanded(
                  child: WebViewWidget(
                    controller: webViewController!,
                  ),
                )
              ],
            ),
          ),
        ));
  }
}

enter code here

Solution

  • Android

    Add a piece of code in label application on AndroidManifst.xml file

    android:networkSecurityConfig="@xml/network_security_config"
    android:usesCleartextTraffic="true"
    

    Add a file named network_security_config.xml in res/xml directory, The content of the file is

    <?xml version="1.0" encoding="utf-8"?>
    <network-security-config>
        <base-config cleartextTrafficPermitted="true" />
    </network-security-config>
    

    iOS

    Add a piece of code in label dict on Info.plist file

    <key>NSAppTransportSecurity</key>  
    <dict>  
        <key>NSAllowsArbitraryLoads</key><true/>  
    </dict>