Flutter使用flutter_inappwebview创建WebView出现空白屏问题

云原生阿岚

2026-7-1

解决flutter_inappwebview显示空白屏的问题

以下是几种能解决空白屏问题的具体方案，按步骤排查即可：

检查平台权限配置
安卓端必须在android/app/src/main/AndroidManifest.xml里添加网络权限，否则WebView无法联网：
```
<uses-permission android:name="android.permission.INTERNET" />
```
iOS端若访问HTTPS网站一般无问题，但若加载异常，可在ios/Runner/Info.plist中添加以下配置允许任意网络请求：
```
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
```

确认依赖版本与初始化
先将pubspec.yaml里的flutter_inappwebview更新至最新稳定版：

dependencies:
  flutter_inappwebview: ^6.0.0

安卓端部分旧版本需在MainActivity.kt中手动初始化插件，若仍有问题可添加这段代码：

import com.pichillilorenzo.flutter_inappwebview.InAppWebViewFlutterPlugin

class MainActivity : FlutterActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    InAppWebViewFlutterPlugin.initialize(this)
  }
}

添加调试监听排查错误
给WebView加上错误和控制台日志监听，能直接看到加载失败的具体原因：

onLoadError: (controller, url, code, message) {
  print("加载错误: $message, 错误码: $code");
},
onConsoleMessage: (controller, consoleMessage) {
  print("控制台日志: ${consoleMessage.message}");
},

调整UserAgent配置
你代码里设置的userAgent: 'random'可能被目标网站识别为异常请求，先注释掉该配置，用默认UserAgent测试：
```
crossPlatform: InAppWebViewOptions(
  javaScriptEnabled: true,
  // userAgent: 'random', // 先注释掉测试
),
```
开启安卓混合渲染
安卓端开启混合渲染模式可解决不少兼容性问题，在initialOptions中添加：
```
android: AndroidInAppWebViewOptions(
  useHybridComposition: true,
),
```

修改后的完整测试代码：

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

class MyWebView extends StatefulWidget {
  const MyWebView({super.key});

  @override
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  late InAppWebViewController _webViewController;
  int _progress = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("My WebView"),
      ),
      body: Stack(
        children: [
          InAppWebView(
            initialUrlRequest: URLRequest(
              url: Uri.parse("https://google.com"),
            ),
            initialOptions: InAppWebViewGroupOptions(
              android: AndroidInAppWebViewOptions(
                useHybridComposition: true,
              ),
              crossPlatform: InAppWebViewOptions(
                javaScriptEnabled: true,
                // userAgent: 'random',
              ),
            ),
            onWebViewCreated: (controller) {
              _webViewController = controller;
            },
            onProgressChanged: (controller, progress) {
              setState(() {
                _progress = progress;
              });
            },
            onLoadError: (controller, url, code, message) {
              print("加载错误: $message, 错误码: $code");
            },
            onConsoleMessage: (controller, consoleMessage) {
              print("控制台日志: ${consoleMessage.message}");
            },
          ),
          if (_progress < 100)
            LinearProgressIndicator(
              value: _progress / 100,
              backgroundColor: Colors.transparent,
              color: Colors.blue,
            ),
        ],
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Pratham Dave