Flutter明暗主题切换功能失效问题求助

你的代码存在两个核心问题，导致主题切换失效且背景色显示默认值：

1. 上下文（Context）获取错误 #

你在Scaffold和AppBar中使用Theme.of(context)时，这个context属于HomeScreen组件，而MaterialApp是HomeScreen的子组件。Flutter的Theme.of(context)会向上查找最近的MaterialApp/Theme，但此时HomeScreen的上下文在MaterialApp之上，所以获取到的是默认主题（也就是你看到的0xfffafafa背景色），而非你自定义的亮色/暗色主题。

2. 多余的setState调用 #

你在切换主题时调用了setState，但ValueListenableBuilder已经会监听themeNotifier的变化并自动重建UI，setState不仅多余，还可能干扰正常的更新逻辑。

修复后的代码 #

import 'package:flutter/material.dart';
import 'package:pomodoro_app/widget/sidebar_widget.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final ValueNotifier<ThemeMode> themeNotifier = ValueNotifier(ThemeMode.dark);

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<ThemeMode>(
      valueListenable: themeNotifier,
      builder: (_, ThemeMode currentMode, __) {
        return MaterialApp(
          title: 'Flutter Demo',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            brightness: Brightness.light,
            scaffoldBackgroundColor: const Color(0xFFE7626C),
            textTheme: const TextTheme(
              displayLarge: TextStyle(color: Color(0xFF232B55)),
              displaySmall: TextStyle(color: Color(0xFF232B55)),
            ),
            cardColor: const Color(0xFFF4EDDB),
          ),
          darkTheme: ThemeData(
            brightness: Brightness.dark,
            scaffoldBackgroundColor: const Color(0xFF232B55),
            cardColor: const Color(0xFFF4EDDB),
            textTheme: const TextTheme(
              displayLarge: TextStyle(color: Color(0xFFE7626C)),
              displaySmall: TextStyle(color: Colors.white),
            ),
          ),
          themeMode: currentMode,
          home: Builder( // 使用Builder获取MaterialApp上下文
            builder: (materialContext) {
              return Scaffold(
                appBar: AppBar(
                  backgroundColor: Theme.of(materialContext).scaffoldBackgroundColor,
                  elevation: 0,
                  leading: Builder(
                    builder: (context) => IconButton(
                      onPressed: () => Scaffold.of(context).openDrawer(),
                      icon: const Icon(Icons.menu_rounded, color: Color(0xFFF4EDDB)),
                    ),
                  ),
                  actions: [
                    IconButton(
                      icon: Icon(currentMode == ThemeMode.light
                          ? Icons.dark_mode
                          : Icons.light_mode),
                      onPressed: () {
                        themeNotifier.value = currentMode == ThemeMode.light
                            ? ThemeMode.dark
                            : ThemeMode.light;
                        // 移除多余的setState
                      },
                    ),
                  ],
                ),
                drawer: const SideBar(),
                backgroundColor: Theme.of(materialContext).scaffoldBackgroundColor,
                body: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [Text("Hello")],
                ),
              );
            },
          ),
        );
      },
    );
  }
}

关键修复点说明 #

• 使用Builder包裹Scaffold，通过materialContext获取MaterialApp内部的主题上下文，确保Theme.of()能拿到你自定义的亮色/暗色主题。
• 移除切换主题时的setState调用，仅更新themeNotifier.value即可触发ValueListenableBuilder重建UI。
• 将themeNotifier的static修饰符移除（静态变量会导致状态在组件重建时保留，但这里不需要静态，反而可能引发意外问题）。

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