Flutter中如何根据语言与明暗模式加载不同本地HTML文件？

原代码存在的问题 #

• initState中直接调用Theme.of(context)不安全，此时组件上下文尚未完全初始化，可能触发异常
• 德语场景逻辑冗余，无论明暗模式都加载同一文件，无需拆分两次判断
• 缺失非德语场景的处理逻辑，未实现"明暗模式对应英语文件"的核心需求
• 未监听主题/语言变化，切换系统明暗模式或语言时，WebView不会自动更新内容

最优实现代码 #

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

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

  @override
  State<LocalizedHtmlWebView> createState() => _LocalizedHtmlWebViewState();
}

class _LocalizedHtmlWebViewState extends State<LocalizedHtmlWebView> {
  late WebViewController _controller;

  @override
  void initState() {
    super.initState();
    // 提前初始化WebViewController，避免空指针异常
    _controller = WebViewController();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 获取当前系统语言代码
    final languageCode = Localizations.localeOf(context).languageCode;
    // 判断当前主题明暗模式
    final isDarkMode = Theme.of(context).brightness == Brightness.dark;

    // 根据规则确定要加载的HTML路径
    final htmlPath = languageCode == 'de'
        ? 'assets/html/heading_de.html'
        : isDarkMode
            ? 'assets/html/heading_en_dark.html'
            : 'assets/html/heading_en_light.html';

    // 加载对应本地HTML资源
    _controller.loadFlutterAsset(htmlPath);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: WebViewWidget(controller: _controller),
    );
  }
}

关键说明 #

1. 生命周期选择：使用didChangeDependencies替代initState，该方法会在系统语言、主题发生变化时自动触发，确保WebView能动态响应这些变更
2. 逻辑简化：直接通过语言代码判断是否加载德语文件，非德语场景再根据明暗模式选择对应英语文件，逻辑清晰无冗余
3. 空安全处理：提前在initState初始化WebViewController，避免build时出现空指针异常
4. 资源配置：确保在pubspec.yaml中正确声明HTML资源路径：

   flutter:
     assets:
       - assets/html/
   

内容的提问来源于stack exchange，提问作者Petra Ritter