Flutter运行时点击按钮实现全应用widget持久化颜色全局更新咨询

你当前实现的核心问题是没有全局的状态变更通知机制。你修改themeIsDark后仅调用了当前页面的setState，只会触发当前页面的widget重建，其他页面的widget没有感知到变量变更，自然不会更新颜色。你已经实现了持久化存储，所以重启后所有页面初始化时读取最新的存储值，颜色就能正确切换。

核心思路是引入可监听的状态管理，主题变更时通知全应用所有依赖主题的widget自动重建，这里以Provider状态管理为例，实现步骤如下：

1. 定义可监听的主题管理类 #

继承ChangeNotifier，封装主题状态、持久化逻辑、状态变更通知逻辑，代码示例：

import 'package:flutter/foundation.dart';

class ThemeProvider extends ChangeNotifier {
  static final ThemeProvider _instance = ThemeProvider._internal();
  factory ThemeProvider() => _instance;
  ThemeProvider._internal();

  bool _isDarkMode = false;
  bool get isDarkMode => _isDarkMode;

  // 初始化读取本地存储的主题配置
  Future<void> init() async {
    _isDarkMode = AppPreferences.instance().themeIsDark ?? false;
    notifyListeners();
  }

  // 切换主题方法
  void toggleTheme(bool value) {
    _isDarkMode = value;
    // 保存到持久化存储
    AppPreferences.instance().themeIsDark = value;
    AppPrefFlutterStorage.saveAppPrefToFlutterStorage(AppPreferences.instance());
    // 通知所有监听的组件更新
    notifyListeners();
  }

  // 原AppTheme的颜色配置迁移到此处
  Color get myWhite => _isDarkMode ? const Color(0xFFFFFFFF) : const Color(0xFF000000);
  Color get notWhite => _isDarkMode ? const Color(0xFFECF0F1) : const Color(0xFF1A1A1A);
  Color get nearlyWhite => _isDarkMode ? const Color(0xFFFEFEFE) : const Color(0xFF222222);
  Color get myGray1 => _isDarkMode ? const Color(0xFFC1C1C1) : const Color(0xFF333333);
  Color get myGray5 => _isDarkMode ? const Color(0xFF767676) : const Color(0xFF4F4F4F);
  Color get myGray2 => _isDarkMode ? const Color(0xFF4F4F4F) : const Color(0xFF767676);
  Color get myGray4 => _isDarkMode ? const Color(0xFF333333) : const Color(0xFFC1C1C1);
  Color get myGray3 => _isDarkMode ? const Color(0xFF222222) : const Color(0xFFFEFEFE);
  Color get myNotBlack => _isDarkMode ? const Color(0xFF1A1A1A) : const Color(0xFFECF0F1);
  Color get myBlack => _isDarkMode ? const Color(0xFF000000) : const Color(0xFFFFFFFF);
}

2. 顶层注入主题管理实例 #

在应用入口将ThemeProvider注册到顶层，保证全应用都可以访问到同一个实例：

import 'package:provider/provider.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 初始化主题状态
  await ThemeProvider().init();
  runApp(
    ChangeNotifierProvider.value(
      value: ThemeProvider(),
      child: const MyApp(),
    ),
  );
}

3. 修改颜色引用方式 #

所有使用主题颜色的地方，改为监听ThemeProvider获取颜色：

// 在widget的build方法中获取实例
final themeProvider = Provider.of<ThemeProvider>(context);

// 颜色使用示例
Container(
  color: themeProvider.myWhite,
  child: Text('测试文本', style: TextStyle(color: themeProvider.myBlack)),
)

4. 修改开关的切换逻辑 #

开关无需再调用当前页面的setState，直接调用ThemeProvider的切换方法即可：

Consumer<ThemeProvider>(
  builder: (context, themeProvider, child) {
    return Switch(
      value: themeProvider.isDarkMode,
      onChanged: (value) {
        themeProvider.toggleTheme(value);
      },
      activeTrackColor: themeProvider.myBlue,
      activeColor: themeProvider.myGray1,
      inactiveThumbColor: themeProvider.myGray1,
    );
  }
)

• 如果你不想引入Provider，也可以用ValueNotifier+ValueListenableBuilder实现相同的通知逻辑，核心原理都是通过观察者模式通知所有依赖组件重建。
• 调用toggleTheme时如果不需要监听状态变化，可以加listen: false参数减少不必要的重建：Provider.of<ThemeProvider>(context, listen: false).toggleTheme(value)

内容的提问来源于stack exchange，提问作者Vitalie Andries