如何切换ThemeData后重绘整个Flutter应用？

这个问题其实很常见——你已经切换了主题开关，但应用没反应，因为MaterialApp的主题只在初始化时被设置了一次。要解决这个问题，核心是让MaterialApp能感知到主题状态的变化并重新构建，下面给你两种实用的方法：

方法一：用回调函数+根StatefulWidget（适合小型应用） #

思路是把MaterialApp放到一个StatefulWidget的build方法里，将主题状态（applyDarkTheme）存在根组件的state中，然后通过回调函数让子页面的开关能触发根组件的setState，从而重建MaterialApp更新主题。

步骤1：改造根组件为StatefulWidget #

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 主题状态存在根组件的state里
  bool applyDarkTheme = false;

  // 定义切换主题的回调方法
  void toggleTheme(bool value) {
    setState(() {
      applyDarkTheme = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test Application',
      // 把回调和当前主题状态传递给首页
      home: MyHomePage(
        title: 'Test app',
        onThemeToggle: toggleTheme,
        currentThemeIsDark: applyDarkTheme,
      ),
      // 这里会在setState后重新计算主题
      theme: applyDarkTheme ? AppThemes.dark : AppThemes.light,
      routes: _routes,
    );
  }
}

步骤2：修改首页接收回调并更新开关 #

class MyHomePage extends StatelessWidget {
  final String title;
  final ValueChanged<bool> onThemeToggle;
  final bool currentThemeIsDark;

  const MyHomePage({
    super.key,
    required this.title,
    required this.onThemeToggle,
    required this.currentThemeIsDark,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: ListView(
        children: [
          SwitchListTile(
            value: currentThemeIsDark,
            title: const Text('Apply dark theme?'),
            // 触发根组件的回调方法
            onChanged: onThemeToggle,
          ),
        ],
      ),
    );
  }
}

这样切换开关时，会触发根组件的setState，MaterialApp会重新构建，整个应用的主题就会立刻更新。

方法二：用状态管理库（适合复杂应用） #

如果你的应用页面较多、状态复杂，推荐用状态管理库（比如Provider、Riverpod）来管理主题状态，避免层层传递回调的麻烦。这里以Provider为例：

步骤1：创建主题状态Provider #

import 'package:flutter/material.dart';

class ThemeProvider extends ChangeNotifier {
  bool _isDarkMode = false;

  bool get isDarkMode => _isDarkMode;

  // 切换主题的方法，通知监听者状态变化
  void toggleTheme() {
    _isDarkMode = !_isDarkMode;
    notifyListeners();
  }
}

步骤2：在runApp中注入Provider #

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

步骤3：根组件通过Consumer监听主题变化 #

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

  @override
  Widget build(BuildContext context) {
    return Consumer<ThemeProvider>(
      builder: (context, themeProvider, child) {
        return MaterialApp(
          title: 'Test Application',
          home: const MyHomePage(title: 'Test app'),
          // 实时获取最新的主题状态
          theme: themeProvider.isDarkMode ? AppThemes.dark : AppThemes.light,
          routes: _routes,
        );
      },
    );
  }
}

步骤4：首页中调用Provider切换主题 #

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: ListView(
        children: [
          SwitchListTile(
            value: themeProvider.isDarkMode,
            title: const Text('Apply dark theme?'),
            onChanged: (value) {
              themeProvider.toggleTheme();
            },
          ),
        ],
      ),
    );
  }
}

这种方式下，主题状态被集中管理，任何页面都可以轻松访问和修改，扩展性更强。

为什么原来的代码不生效？ #

你之前的代码中，MaterialApp的theme只在应用初始化时被计算一次，后续切换开关时，虽然applyDarkTheme的值变了，但没有触发MaterialApp的重新构建，所以主题不会更新。上面的两种方法都是通过让MaterialApp感知到状态变化并重新build，从而实现主题的实时切换。

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