webview_flutter打包APK后黑屏问题求助（附报错日志）

问题现象 #

使用webview_flutter在模拟器调试模式下展示HTML内容功能正常，但打包发布APK后出现黑屏，同时抛出以下报错日志：

it is showing the black screen when the html page is
I/flutter (16317): #0      Element._debugCheckStateIsActiveForAncestorLookup.<anonymous closure> framework.dart:4334
I/flutter (16317): #1      Element._debugCheckStateIsActiveForAncestorLookup framework.dart:4348
I/flutter (16317): #2      Element.dependOnInheritedWidgetOfExactType framework.dart:4368
I/flutter (16317): #3      MediaQuery.maybeOf media_query.dart:925
I/flutter (16317): #4      _InkResponseState._shouldShowFocus ink_well.dart:1021
I/flutter (16317): #5      _InkResponseState.updateFocusHighlights ink_well.dart:1037
I/flutter (16317): #6      _InkResponseState.handleFocusHighlightModeChange.<anonymous closure> ink_well.dart:1016
I/flutter (16317): #7      State.setState framework.dart:1133
I/flutter (16317): #8      _InkResponseState.handleFocusHighlightModeChange ink_well.dart:1015
I/flutter (16317): #9      FocusManager.notifyHighlightModeListeners (package:flutter/src/widgets/focus

解决方法 #

• 确保WebView处于MaterialApp/CupertinoApp上下文内
  检查Widget树结构，WebView所在页面必须被MaterialApp或CupertinoApp包裹——MediaQuery依赖这些根Widget提供的上下文。示例结构：

  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          body: WebView(
            initialUrl: 'your_html_url_or_local_path',
            javascriptMode: JavascriptMode.unrestricted,
          ),
        ),
      );
    }
  }
  

• 配置必要的Android权限
  若加载远程HTML，在android/app/src/main/AndroidManifest.xml中添加网络权限：

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

  若加载本地HTML，确认文件路径正确，且发布模式下资源未被压缩丢失。

• 排查代码混淆问题
  打开android/app/build.gradle，临时将发布模式下的混淆开关关闭测试：

  buildTypes {
    release {
      minifyEnabled false
      shrinkResources false
      signingConfig signingConfigs.release
    }
  }
  

  若问题消失，说明混淆误删了webview_flutter核心代码，添加规则到android/app/proguard-rules.pro：

  -keep class io.flutter.plugins.webviewflutter.** { *; }
  -keep class com.google.android.gms.** { *; }
  

• 延迟WebView初始化
  在initState中延迟初始化WebView，确保上下文状态稳定：

  class _WebViewPageState extends State<WebViewPage> {
    WebViewController? controller;
  
    @override
    void initState() {
      super.initState();
      Future.delayed(const Duration(milliseconds: 200), () {
        controller = WebViewController()
          ..setJavaScriptMode(JavascriptMode.unrestricted)
          ..loadRequest(Uri.parse('your_html_content'));
        setState(() {});
      });
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: controller != null 
          ? WebViewWidget(controller: controller!) 
          : const Center(child: CircularProgressIndicator()),
      );
    }
  }
  

• 更新webview_flutter版本
  升级pubspec.yaml中的webview_flutter到最新稳定版，旧版本可能存在发布模式兼容性问题：

  dependencies:
    webview_flutter: ^4.4.0 # 替换为最新版本
  

内容的提问来源于stack exchange，提问作者piyush bisht