Flutter_inappwebview中WebView暗黑模式适配问题解析

背景介绍

在Flutter应用开发中，使用flutter_inappwebview插件可以方便地嵌入WebView组件。随着Android系统对暗黑模式的支持越来越完善，开发者需要确保WebView内容能够正确跟随系统主题切换。然而在Android 33及以上版本中，WebView的algorithmicDarkeningAllowed属性出现了适配问题。

问题现象

当开发者尝试通过设置algorithmicDarkeningAllowed属性来控制WebView的暗黑模式时，发现该设置在Android 33+设备上失效。具体表现为：

1. 在Flutter应用中，通过flutter_inappwebview插件设置algorithmicDarkeningAllowed属性无效
2. 同样的设置在原生Android项目中却能正常工作
3. 问题仅在targetSdkVersion≥33时出现

根本原因分析

经过深入研究发现，这个问题与Android的主题机制密切相关：

1. algorithmicDarkeningAllowed属性的生效依赖于Activity的主题设置
2. 该属性需要Activity继承自AppCompatActivity才能正常工作
3. Flutter的FlutterActivity直接继承自Activity而非AppCompatActivity
4. 在Android 33+版本中，Google加强了对暗黑模式的强制适配要求

解决方案

针对这个问题，开发者可以采用以下解决方案：

方案一：修改Activity主题

通过自定义Activity主题来适配暗黑模式：

1. 在res/values/styles.xml中定义两种主题：

<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <item name="android:windowBackground">@drawable/launch_background</item>
</style>

<style name="DarkLaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
    <item name="android:windowBackground">@drawable/launch_background</item>
</style>

2. 通过原生插件动态切换主题

方案二：实现原生插件控制主题

创建一个Flutter插件来动态切换Activity主题：

1. 实现NativeThemePlugin类，继承FlutterPlugin和ActivityAware
2. 提供setDarkMode方法切换主题
3. 在Dart层调用插件接口

public void setDarkMode(@NonNull @NotNull GeneratedNativeTheme.NativeDarkMode mode) {
    if (activity == null) return;
    if (mode == GeneratedNativeTheme.NativeDarkMode.LIGHT) {
        activity.setTheme(R.style.LaunchTheme);
    } else {
        activity.setTheme(R.style.DarkLaunchTheme);
    }
}

方案三：Dart层调用示例

在Flutter代码中合理调用WebView设置和主题切换：

Future<void> _enableDarkMode() async {
    if (Platform.isAndroid) {
        await NativeThemeApi().setDarkMode(NativeDarkMode.dark);
        inAppWebViewSettings.algorithmicDarkeningAllowed = true;
        await controller?.setSettings(settings: inAppWebViewSettings);
    }
}

最佳实践建议

1. 对于新项目，建议直接采用方案二的原生插件方式
2. 确保所有Activity都使用一致的主题配置
3. 在WebView初始化前完成主题设置
4. 测试不同Android版本下的表现差异
5. 考虑用户手动切换主题的场景处理

总结

flutter_inappwebview在Android 33+上的暗黑模式适配问题，本质上是由于FlutterActivity与AppCompatActivity的继承关系差异导致的。通过合理设置Activity主题和algorithmicDarkeningAllowed属性，开发者可以完美解决这个问题，确保WebView内容在各种主题下都能正确显示。