Flutter入门者求助：如何在运行时切换应用亮色/暗色主题

嘿，作为Flutter入门开发者，实现主题切换其实挺直观的，我来带你一步步搞定这个功能！

第一步：先修正主题变量命名（小细节优化） #

先提个小建议：你当前的变量名有点容易混淆——dTheme是亮色主题，lTheme是暗色主题，改成更清晰的命名会更方便后续维护，比如lightTheme和darkTheme，后续代码我会用这个更直观的命名：

// 亮色主题
final ThemeData lightTheme = ThemeData(
  primarySwatch: Colors.orange,
  primaryColor: Colors.orangeAccent[100],
  primaryColorBrightness: Brightness.light,
);

// 暗色主题
final ThemeData darkTheme = ThemeData(
  primarySwatch: Colors.indigo,
  primaryColor: Colors.indigoAccent[100],
  primaryColorBrightness: Brightness.dark,
);

第二步：用StatefulWidget管理主题状态 #

主题切换需要实时更新UI，所以我们用StatefulWidget来维护当前的主题模式，这是核心实现代码：

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 默认启用亮色主题
  bool _isDarkMode = false;

  // 主题切换方法
  void _toggleTheme() {
    setState(() {
      _isDarkMode = !_isDarkMode;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Theme Switch Demo',
      // 根据_isDarkMode的值切换对应主题
      theme: _isDarkMode ? darkTheme : lightTheme,
      home: Scaffold(
        appBar: AppBar(title: const Text('主题切换演示')),
        body: const Center(child: Text('点击按钮切换主题试试！')),
        // 添加主题切换按钮到右下角
        floatingActionButton: FloatingActionButton(
          onPressed: _toggleTheme,
          child: Icon(_isDarkMode ? Icons.light_mode : Icons.dark_mode),
        ),
      ),
    );
  }
}

第三步：测试功能 #

运行你的应用，点击右下角的浮动按钮，就能看到整个应用在亮色和暗色主题之间无缝切换啦！所有使用了主题颜色的组件（比如AppBar、文本、按钮等）都会自动适配当前主题。

进阶小技巧：记住用户的主题选择（可选） #

如果想让应用重启后保持用户上次选择的主题，可以用shared_preferences包来持久化状态：

1. 先添加依赖到pubspec.yaml：

dependencies:
  flutter:
    sdk: flutter
  shared_preferences: ^2.2.2

2. 修改状态管理代码，初始化时读取保存的设置，切换时同步保存：

class _MyAppState extends State<MyApp> {
  bool _isDarkMode = false;
  late SharedPreferences _prefs;

  @override
  void initState() {
    super.initState();
    _loadSavedTheme();
  }

  // 加载本地保存的主题设置
  Future<void> _loadSavedTheme() async {
    _prefs = await SharedPreferences.getInstance();
    setState(() {
      _isDarkMode = _prefs.getBool('isDarkMode') ?? false;
    });
  }

  // 切换主题并保存设置
  void _toggleTheme() async {
    setState(() {
      _isDarkMode = !_isDarkMode;
    });
    await _prefs.setBool('isDarkMode', _isDarkMode);
  }

  // 其余代码保持不变...
}

这样你的主题切换功能就更完善了，不仅能实时切换，还能记住用户的选择！

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