Flutter点击切换按钮主题未变更问题求助

核心问题 #

你的App是无状态组件（StatelessWidget），当themeManager.themeMode变化时，MaterialApp不会自动重新构建，导致主题无法更新。另外全局的themeManager没有让上层组件感知到状态变化。

修复方案 #

方案1：把App改成有状态组件，监听主题管理器变化

修改main.dart，让App成为StatefulWidget并监听themeManager的状态变更：

ThemeManager themeManager = ThemeManager();

class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  void initState() {
    super.initState();
    // 监听主题变化，触发组件重建
    themeManager.addListener(() => setState(() {}));
  }

  @override
  void dispose() {
    themeManager.removeListener(() => setState(() {}));
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        Provider(create: (_) => AuthBloc(uid: '')),
        Provider(
            create: (_) => GroupModel(
                id: 'id',
                name: 'name',
                leader: 'leader',
                groupCreate: Timestamp.now(),
                members: ['members'])),
        Provider(
            create: (_) => UserModel(
                uid: 'uid',
                email: 'email',
                fullName: 'fullName',
                provider: 'provider',
                groupId: 'groupId',
                groupName: 'groupName',
                groupLeader: 'groupLeader',
                accountCreated: Timestamp.now())),
        Provider(create: (_) => User),
      ],
      child: MaterialApp(
        title: 'Dover Tree',
        theme: lightTheme,
        darkTheme: darkTheme,
        themeMode: themeManager.themeMode,
        home: const LoginScreen(),
        debugShowCheckedModeBanner: false,
      ),
    );
  }
}

方案2：用Provider管理主题管理器（更规范）

既然已经在用MultiProvider，直接把themeManager纳入状态管理体系，让整个应用能感知其变化：

1. 更新main.dart的providers列表：

providers: [
  // 新增主题管理器的Provider
  ChangeNotifierProvider(create: (_) => ThemeManager()),
  Provider(create: (_) => AuthBloc(uid: '')),
  // ...其他原有Provider
],

2. 修改MaterialApp的构建方式，通过Consumer监听主题变化：

child: Consumer<ThemeManager>(
  builder: (context, themeManager, child) {
    return MaterialApp(
      title: 'Dover Tree',
      theme: lightTheme,
      darkTheme: darkTheme,
      themeMode: themeManager.themeMode,
      home: const LoginScreen(),
      debugShowCheckedModeBanner: false,
    );
  },
),

3. 更新theme_screen.dart，从Provider获取主题管理器：

class _ThemeScreenState extends State<ThemeScreen> {
  late ThemeManager themeManager;

  @override
  void dispose() {
    themeManager.removeListener(themeListener);
    super.dispose();
  }

  @override
  void initState() {
    themeManager = Provider.of<ThemeManager>(context, listen: false);
    themeManager.addListener(themeListener);
    super.initState();
  }

  themeListener() {
    if (mounted) setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        iconTheme: const IconThemeData(color: Colors.black),
        title: const Text('Theme'),
        centerTitle: true,
        titleTextStyle: const TextStyle(color: Colors.black),
        backgroundColor: Colors.white,
        elevation: 0.0,
        actions: [
          Consumer<ThemeManager>(
            builder: (context, themeManager, child) {
              return Switch(
                value: themeManager.themeMode == ThemeMode.dark,
                onChanged: themeManager.toggleTheme,
              );
            },
          )
        ],
      ),
      // ...其他页面代码
    );
  }
}

额外优化提示 #

你theme_screen.dart里的AppBar样式是硬编码的（比如固定白色背景），切换主题后这部分不会跟着变化，建议改成从主题中获取样式：

backgroundColor: Theme.of(context).scaffoldBackgroundColor,
titleTextStyle: Theme.of(context).appBarTheme.titleTextStyle,
iconTheme: Theme.of(context).appBarTheme.iconTheme,

内容的提问来源于stack exchange，提问作者It'sPhil