webview 访问 H5 白屏

Question

W/WindowOnBackDispatcher( 5190): OnBackInvokedCallback is not enabled for the application.
W/WindowOnBackDispatcher( 5190): Set 'android:enableOnBackInvokedCallback="true"' in the application manifest.
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.webview_flutter_android.WebView.pigeon_defaultConstructor"., null, null)
E/flutter ( 5190): #0      new WebView.<anonymous closure> (package:webview_flutter_android/src/android_webkit.g.dart:1378:9)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.webview_flutter_android.WebView.settings"., null, null)
E/flutter ( 5190): #0      WebView.pigeonVar_settings.<anonymous closure> (package:webview_flutter_android/src/android_webkit.g.dart:1562:9)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.webview_flutter_android.WebSettings.setDomStorageEnabled"., null, null)
E/flutter ( 5190): #0      WebSettings.setDomStorageEnabled (package:webview_flutter_android/src/android_webkit.g.dart:2293:7)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.webview_flutter_android.WebSettings.setJavaScriptCanOpenWindowsAutomatically"., null, null)
E/flutter ( 5190): #0      WebSettings.setJavaScriptCanOpenWindowsAutomatically (package:webview_flutter_android/src/android_webkit.g.dart:2321:7)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.webview_flutter_android.WebSettings.setSupportMultipleWindows"., null, null)
E/flutter ( 5190): #0      WebSettings.setSupportMultipleWindows (package:webview_flutter_android/src/android_webkit.g.dart:2349:7)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.webview_flutter_android.WebSettings.setLoadWithOverviewMode"., null, null)
E/flutter ( 5190): #0      WebSettings.setLoadWithOverviewMode (package:webview_flutter_android/src/android_webkit.g.dart:2491:7)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.webview_flutter_android.WebSettings.setUseWideViewPort"., null, null)
E/flutter ( 5190): #0      WebSettings.setUseWideViewPort (package:webview_flutter_android/src/android_webkit.g.dart:2520:7)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.webview_flutter_android.WebSettings.setDisplayZoomControls"., null, null)
E/flutter ( 5190): #0      WebSettings.setDisplayZoomControls (package:webview_flutter_android/src/android_webkit.g.dart:2549:7)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.webview_flutter_android.WebSettings.setBuiltInZoomControls"., null, null)
E/flutter ( 5190): #0      WebSettings.setBuiltInZoomControls (package:webview_flutter_android/src/android_webkit.g.dart:2578:7)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.webview_flutter_android.WebChromeClient.pigeon_defaultConstructor"., null, null)
E/flutter ( 5190): #0      new WebChromeClient.<anonymous closure> (package:webview_flutter_android/src/android_webkit.g.dart:4008:9)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.webview_flutter_android.WebView.setWebChromeClient"., null, null)
E/flutter ( 5190): #0      WebView.setWebChromeClient (package:webview_flutter_android/src/android_webkit.g.dart:2133:7)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.webview_flutter_android.WebSettings.setJavaScriptEnabled"., null, null)
E/flutter ( 5190): #0      WebSettings.setJavaScriptEnabled (package:webview_flutter_android/src/android_webkit.g.dart:2377:7)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.webview_flutter_android.WebView.setBackgroundColor"., null, null)
E/flutter ( 5190): #0      WebView.setBackgroundColor (package:webview_flutter_android/src/android_webkit.g.dart:2161:7)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.webview_flutter_android.WebViewClient.pigeon_defaultConstructor"., null, null)
E/flutter ( 5190): #0      new WebViewClient.<anonymous closure> (package:webview_flutter_android/src/android_webkit.g.dart:2923:9)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.webview_flutter_android.DownloadListener.pigeon_defaultConstructor"., null, null)
E/flutter ( 5190): #0      new DownloadListener.<anonymous closure> (package:webview_flutter_android/src/android_webkit.g.dart:3836:9)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.webview_flutter_android.WebViewClient.setSynchronousReturnValueForShouldOverrideUrlLoading"., null, null)
E/flutter ( 5190): #0      WebViewClient.setSynchronousReturnValueForShouldOverrideUrlLoading (package:webview_flutter_android/src/android_webkit.g.dart:3779:7)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.webview_flutter_android.WebView.setWebViewClient"., null, null)
E/flutter ( 5190): #0      WebView.setWebViewClient (package:webview_flutter_android/src/android_webkit.g.dart:2020:7)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): #1      Future.wait.<anonymous closure> (dart:async/future.dart:534:21)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): #2      AndroidWebViewController.setPlatformNavigationDelegate (package:webview_flutter_android/src/android_webview_controller.dart:489:5)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(channel-error, Unable to establish connection on channel: "dev.flutter.pigeon.webview_flutter_android.WebView.loadUrl"., null, null)
E/flutter ( 5190): #0      WebView.loadUrl (package:webview_flutter_android/src/android_webkit.g.dart:1663:7)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 
E/flutter ( 5190): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(error, java.lang.IllegalStateException: Trying to create a platform view of unregistered type: plugins.flutter.io/webview
E/flutter ( 5190): 	at io.flutter.plugin.platform.PlatformViewsController.createPlatformView(PlatformViewsController.java:509)
E/flutter ( 5190): 	at io.flutter.plugin.platform.PlatformViewsController$1.createForTextureLayer(PlatformViewsController.java:197)
E/flutter ( 5190): 	at io.flutter.embedding.engine.systemchannels.PlatformViewsChannel$1.create(PlatformViewsChannel.java:128)
E/flutter ( 5190): 	at io.flutter.embedding.engine.systemchannels.PlatformViewsChannel$1.onMethodCall(PlatformViewsChannel.java:55)
E/flutter ( 5190): 	at io.flutter.plugin.common.MethodChannel$IncomingMethodCallHandler.onMessage(MethodChannel.java:267)
E/flutter ( 5190): 	at io.flutter.embedding.engine.dart.DartMessenger.invokeHandler(DartMessenger.java:292)
E/flutter ( 5190): 	at io.flutter.embedding.engine.dart.DartMessenger.lambda$dispatchMessageToQueue$0$io-flutter-embedding-engine-dart-DartMessenger(DartMessenger.java:319)
E/flutter ( 5190): 	at io.flutter.embedding.engine.dart.DartMessenger$$ExternalSyntheticLambda0.run(Unknown Source:12)
E/flutter ( 5190): 	at android.os.Handler.handleCallback(Handler.java:959)
E/flutter ( 5190): 	at android.os.Handler.dispatchMessage(Handler.java:100)
E/flutter ( 5190): 	at android.os.Looper.loopOnce(Looper.java:232)
E/flutter ( 5190): 	at android.os.Looper.loop(Looper.java:317)
E/flutter ( 5190): 	at android.app.ActivityThread.main(ActivityThread.java:8705)
E/flutter ( 5190): 	at java.lang.reflect.Method.invoke(Native Method)
E/flutter ( 5190): 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:580)
E/flutter ( 5190): 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:886)
E/flutter ( 5190): , null, null)
E/flutter ( 5190): #0      StandardMethodCodec.decodeEnvelope (package:flutter/src/services/message_codecs.dart:648:7)
E/flutter ( 5190): #1      MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:334:18)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): #2      SurfaceAndroidViewController._sendCreateMessage (package:flutter/src/services/platform_views.dart:1040:30)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): #3      AndroidViewController.create (package:flutter/src/services/platform_views.dart:827:5)
E/flutter ( 5190): <asynchronous suspension>
E/flutter ( 5190): 

Answer 1

CrazyCodeBoy 2025-02-12 23:20:59

你的问题是 Flutter WebView 在 Android 端白屏，且报错 Unable to establish connection on channel，这是 webview_flutter 在 Android 端的 PlatformView 没有正确初始化导致的。

可能的原因：

1. WebView 依赖未正确初始化


2. WebView 插件版本不兼容


3. Android 平台 PlatformView 没有正确注册


4. WebView 权限或设置问题


5. 缺少 android:enableOnBackInvokedCallback="true"



解决方案：

1. 确保 webview_flutter 插件的版本兼容

请确保 webview_flutter 相关插件是最新的，特别是 webview_flutter_android 和 webview_flutter_platform_interface：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.4
  webview_flutter_android: ^3.10.4
  webview_flutter_wkwebview: ^3.10.4

然后运行：

flutter clean
flutter pub get

2. 在 AndroidManifest.xml 里添加 WebView 权限

打开 android/app/src/main/AndroidManifest.xml，确保你添加了 WebView 相关权限：

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

并且在 <application> 标签内添加：

<application
    android:usesCleartextTraffic="true"
    android:enabledOnBackInvokedCallback="true">
</application>

3. 确保 WebView 组件已正确初始化

在 main.dart 的 main() 方法里添加：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  WebView.platform = SurfaceAndroidWebView();  // 重要
  runApp(MyApp());
}

4. 使用 WebViewWidget 而不是 WebView

从 webview_flutter 4.x 版本开始，建议使用 WebViewWidget 代替 WebView：

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

class WebViewExample extends StatefulWidget {
  @override
  State<WebViewExample> createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late final WebViewController controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(const Color(0x00000000))
      ..loadRequest(Uri.parse('https://www.example.com'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('WebView Test')),
      body: WebViewWidget(controller: controller),
    );
  }
}

5. 在 Android 端使用 onAttachedToActivity

如果你在 webview_flutter 插件中发现 PlatformException(channel-error, Unable to establish connection) 相关错误，可以尝试在 MainActivity.kt 里初始化： 修改 android/app/src/main/kotlin/com/example/yourapp/MainActivity.kt

package com.example.yourapp

import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.GeneratedPluginRegistrant

class MainActivity: FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        GeneratedPluginRegistrant.registerWith(flutterEngine)
    }
}

6. 在 gradle.properties 启用多进程

打开 android/gradle.properties 并添加：

android.enableJetifier=true
android.useAndroidX=true

7. 关闭 WebView 硬件加速

某些情况下，硬件加速会导致 WebView 白屏，可以尝试禁用：

<application
    android:hardwareAccelerated="false">
</application>

总结

更新 webview_flutter 相关依赖

在 main.dart 初始化 WebView.platform = SurfaceAndroidWebView();

确保 AndroidManifest.xml 添加 INTERNET 权限

在 Android 端正确注册 FlutterActivity

尝试 WebViewWidget 代替 WebView

在 gradle.properties 启用 Jetifier 和 AndroidX


你可以先试试这些方法，看看能否解决问题，如果仍然不行，可以提供你的 Flutter doctor -v 和 webview_flutter 版本信息，以便进一步排查问题！