Flutter中如何通过按钮点击更改主题的主色调？

要实现按钮点击更改主题主色调，核心是通过状态管理维护全局主题配置，让应用UI能响应主题变化。以下是具体实现步骤：

1. 定义主题配置类 #

先创建一个类统一管理主题的核心参数，方便后续生成ThemeData：

class AppTheme {
  final Color primaryColor;
  final Brightness brightness;

  AppTheme({required this.primaryColor, required this.brightness});

  // 根据配置生成完整的ThemeData
  ThemeData get themeData {
    return ThemeData(
      primaryColor: primaryColor,
      brightness: brightness,
      // 可添加其他主题配置（如文字样式、按钮样式等）
    );
  }
}

2. 实现主题状态管理（以Provider为例） #

Provider是Flutter中轻量易用的状态管理方案，适合这类全局状态场景：

第一步：添加依赖 #

在pubspec.yaml中加入Provider依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

第二步：创建状态管理类 #

class ThemeProvider extends ChangeNotifier {
  // 默认主题配置
  AppTheme _currentTheme = AppTheme(
    primaryColor: Colors.blue,
    brightness: Brightness.light,
  );

  AppTheme get currentTheme => _currentTheme;

  // 修改主色调的方法
  void setPrimaryColor(Color color) {
    _currentTheme = AppTheme(
      primaryColor: color,
      brightness: _currentTheme.brightness,
    );
    notifyListeners(); // 通知所有监听组件更新UI
  }

  // 保留明暗模式切换方法
  void toggleBrightness() {
    _currentTheme = AppTheme(
      primaryColor: _currentTheme.primaryColor,
      brightness: _currentTheme.brightness == Brightness.light ? Brightness.dark : Brightness.light,
    );
    notifyListeners();
  }
}

3. 在应用入口注入状态管理 #

将整个应用包裹在ChangeNotifierProvider中，让所有子组件都能访问主题状态：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => ThemeProvider(),
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer<ThemeProvider>(
      builder: (context, themeProvider, child) {
        return MaterialApp(
          title: '动态主题示例',
          theme: themeProvider.currentTheme.themeData,
          home: const HomePage(),
        );
      },
    );
  }
}

4. 实现按钮切换主色调 #

在页面中添加按钮，调用ThemeProvider的方法即可触发主题更新：

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('主题切换')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // 注意listen: false，避免不必要的重建
                Provider.of<ThemeProvider>(context, listen: false).setPrimaryColor(Colors.red);
              },
              child: const Text('切换为红色主题'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Provider.of<ThemeProvider>(context, listen: false).setPrimaryColor(Colors.green);
              },
              child: const Text('切换为绿色主题'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Provider.of<ThemeProvider>(context, listen: false).toggleBrightness();
              },
              child: const Text('切换明暗模式'),
            ),
          ],
        ),
      ),
    );
  }
}

原理说明 #

每次点击按钮调用setPrimaryColor时，会更新ThemeProvider中的主题配置，然后通过notifyListeners()通知Consumer重新构建MaterialApp的theme属性，整个应用的UI就会同步切换到新的主色调。

内容的提问来源于stack exchange，提问作者Pramit Likhan Sarker