Flutter WebView夜间模式教程 黑暗模式支持

如何在Flutter的WebView中实现夜间模式？我的应用需要根据系统设置自动切换黑暗模式，但WebView内容始终保持明亮色调。尝试过使用WebView的javascript接口注入CSS，但效果不理想，部分元素无法正确变色。有没有成熟的方案可以：1) 跟随系统主题自动切换；2)确保WebView内所有元素（包括动态加载内容）都能适配黑暗主题？最好能提供具体代码示例和兼容性处理方案。

3 回复

要在Flutter的WebView中实现夜间模式（黑暗模式）支持，首先确保你的Flutter版本是2.5及以上，因为从这个版本开始原生支持了系统主题颜色。

  1. 配置Android原生支持：修改android/app/src/main/java/com/yourcompany/yourapp/MainActivity.java文件，在onCreate方法中添加以下代码：
WebSettings settings = webView.getSettings();
settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
  1. iOS配置：在ios/Runner/Info.plist中加入以下代码：
<key>UIUserInterfaceStyle</key>
<string>Dark</string>
  1. 使用插件如flutter_inappwebview，它可以自动检测系统主题并调整WebView的显示模式。在pubspec.yaml中添加依赖：
dependencies:
  flutter_inappwebview: ^5.0.0
  1. 初始化时设置支持夜间模式：
InAppWebView(
  initialOptions: InAppWebViewGroupOptions(
    crossPlatform: InAppWebViewOptions(
      javaScriptEnabled: true,
      preferredContentSize: const Size(360, 640),
      useWideViewPort: true,
      cacheEnabled: true,
      mediaPlaybackRequiresUserGesture: false,
    ),
  ),
)

这样，WebView就能根据设备的夜间模式自动切换样式了。

更多关于Flutter WebView夜间模式教程 黑暗模式支持的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


以下是一个简单的 Flutter 使用 WebView 实现夜间模式的教程：

  1. 引入依赖
    在 pubspec.yaml 中添加 webview_flutter 和 flutter_inappwebview：

    dependencies:
  webview_flutter: ^4.0.0
  flutter_inappwebview: ^5.7.0

  2. 创建 WebView
    创建一个带夜间模式功能的 WebView 小部件。通过 InAppWebViewController 设置 JavaScript 代码来切换主题：

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

class MyWebView extends StatefulWidget {
  @override
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  late InAppWebViewController webView;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("WebView 夜间模式"),
        actions: [
          IconButton(
            onPressed: () async {
              await webView.evaluateJavascript(
                source: "document.body.style.backgroundColor='black'; document.body.style.color='white';",
              );
            },
            icon: Icon(Icons.dark_mode),
          ),
        ],
      ),
      body: InAppWebView(
        initialUrlRequest: URLRequest(url: Uri.parse("https://example.com")),
        onWebViewCreated: (controller) {
          webView = controller;
        },
      ),
    );
  }
}

  3. 运行项目
    运行应用后，点击右上角的月亮图标即可切换到黑暗模式。

注意事项：某些网站可能需要调整 CSS 或 JavaScript 来适配黑暗模式，具体实现需根据目标网页定制。

以下是如何在Flutter WebView中实现夜间/黑暗模式的步骤：

  1. 使用webview_flutter插件（最新版本）
import 'package:webview_flutter/webview_flutter.dart';
  1. 基本WebView实现：
WebView(
  initialUrl: 'https://example.com',
  javascriptMode: JavascriptMode.unrestricted,
)
  1. 夜间模式实现方案：

方案A：通过CSS注入（推荐）

WebViewController? _controller;

WebView(
  onWebViewCreated: (controller) {
    _controller = controller;
    _enableDarkMode();
  },
)

Future<void> _enableDarkMode() async {
  await _controller?.evaluateJavascript('''
    document.body.style.backgroundColor = '#121212';
    document.body.style.color = '#FFFFFF';
    // 或注入完整CSS
    var style = document.createElement('style');
    style.innerHTML = ':root { color-scheme: dark; } body { background: #121212 !important; color: white !important; }';
    document.head.appendChild(style);
  ''');
}

方案B：使用媒体查询检测系统暗黑模式

// 在Flutter中监听系统主题
bool isDarkMode = MediaQuery.of(context).platformBrightness == Brightness.dark;

// 然后通知WebView
if(isDarkMode) {
  _controller?.evaluateJavascript('''
    document.documentElement.classList.add('dark-mode');
  ''');
}
  1. 完整示例代码：
WebView(
  initialUrl: 'https://example.com',
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (controller) {
    if(MediaQuery.of(context).platformBrightness == Brightness.dark) {
      controller.evaluateJavascript('''
        document.body.style.backgroundColor = '#121212';
        document.body.style.color = '#FFFFFF';
      ''');
    }
  },
)

注意事项：

  1. 某些网站可能有自己的黑暗模式实现
  2. JavaScript必须启用才能注入CSS
  3. 效果可能因网站结构而异
  4. iOS和Android的实现方式相同

如需更完美的黑暗模式支持，建议让后端提供专门的黑暗样式或API参数。

回到顶部