Flutter webview fails to load Urls with error 'ERR_INVALID_RESPONSE' on Android but works on iOS

Question

I've been using flutter_inappwebview package which is a wrapper for flutter webview. I have been developing app on an iOS simulator mainly but after upgrading Flutter to the latest version I wanted to test it on an Android emulator and it doesn't work. It used to work on both Android and iOS before upgrading. It still works on iOS but it gets ERR_INVALID_RESPONSE error only on Android when I try to open a webpage using webview.

Making HTTP requests works fine and even Headless Browser from flutter_inappwebview works fine. only the InAppWebView doesn't work.

Please help.

Machine

Apple M3 Pro
14.4 (23E214)

Flutter version

Flutter 3.19.3 • channel stable • https://github.com/flutter/flutter.git Framework • revision ba39319843 (2 weeks ago) • 2024-03-07 15:22:21 -0600 Engine • revision 2e4ba9c6fb Tools • Dart 3.3.1 • DevTools 2.31.1

Settings for InAppWebView in Flutter

InAppWebView(
  initialSettings: InAppWebViewSettings(
    useShouldInterceptRequest: true,
    thirdPartyCookiesEnabled: true,
    iframeAllowFullscreen: false,
    userAgent: userAgent,
    javaScriptCanOpenWindowsAutomatically: false,
    useShouldOverrideUrlLoading: true,
    mediaPlaybackRequiresUserGesture: true,
    allowsPictureInPictureMediaPlayback: false,
    allowsLinkPreview: false,
    allowsBackForwardNavigationGestures: true,
  ),
)

pubspec.yaml

environment:
  sdk: '>=3.1.2 <4.0.0'

dependencies:
  collection: ^1.17.2
  flutter:
    sdk: flutter
  flutter_inappwebview: ^6.0.0
// .. and so on

android/app/scr/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:label="myapp"
        android:name="${applicationName}"
        android:usesCleartextTraffic="true" 
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            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>
    <!-- Required to query activities that can process text, see:
         https://developer.android.com/training/package-visibility?hl=en and
         https://developer.android.com/reference/android/content/Intent#ACTION_PROCESS_TEXT.

         In particular, this is used by the Flutter engine in io.flutter.plugin.text.ProcessTextPlugin. -->
    <queries>
        <intent>
            <action android:name="android.intent.action.PROCESS_TEXT"/>
            <data android:mimeType="text/plain"/>
        </intent>
    </queries>
</manifest>

android/app/build.gradle

plugins {
    id "com.android.application"
    id "kotlin-android"
    id "dev.flutter.flutter-gradle-plugin"
}

def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
    localPropertiesFile.withReader('UTF-8') { reader ->
        localProperties.load(reader)
    }
}

def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
    flutterVersionCode = '1'
}

def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
    flutterVersionName = '1.0'
}

android {
    namespace "com.example.myapp"
    compileSdk flutter.compileSdkVersion
    ndkVersion flutter.ndkVersion

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = '1.8'
    }

    sourceSets {
        main.java.srcDirs += 'src/main/kotlin'
    }

    defaultConfig {
        applicationId "com.example.myapp"
        minSdkVersion 19
        targetSdkVersion 34
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        multiDexEnabled true
    }

    buildTypes {
        release {
            signingConfig signingConfigs.debug
        }
    }
}

flutter {
    source '../..'
}

dependencies {}

Tried flutter clean
Tried removing the entire /android folder and then ran flutter create
Upgraded Android Gradle Plugin to 8.2.2 from 7.4.2 using Upgrade Assistant in Android Studio, then reverted it because it won't compile.

Answer 1

Op here. Actually found the answer. It was due to the webview and the websites behaving differently on each OS. ShouldIntercept was blocking something on Android but not on iOS so I removed that code and it works now