GestureDetector中使用void函数时ThemeMode无法切换求助

核心问题分析 #

你的代码存在三个关键问题导致主题切换失效：

1. home_page.dart重复定义了ThemeServices类，与services层的类冲突，导致逻辑混乱
2. ThemeServices的切换方法未持久化主题状态，且未同步更新存储值
3. MaterialApp未监听主题状态变化，初始化后不会响应后续切换操作

分步修复代码 #

1. 修复services.dart（ThemeServices类）

实现单例模式并完善主题切换逻辑，确保状态持久化：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get_storage/get_storage.dart';

class ThemeServices {
  // 单例模式，全局唯一实例
  static final ThemeServices _instance = ThemeServices._internal();
  factory ThemeServices() => _instance;
  ThemeServices._internal();

  final _box = GetStorage();
  final _key = "isDarkMode";

  bool _loadThemeFromBox() => _box.read(_key) ?? false;

  ThemeMode get theme => _loadThemeFromBox() ? ThemeMode.dark : ThemeMode.light;

  void switchTheme() {
    // 取反当前主题状态
    final newIsDark = !_loadThemeFromBox();
    // 持久化到存储
    _box.write(_key, newIsDark);
    // 切换主题模式
    Get.changeThemeMode(newIsDark ? ThemeMode.dark : ThemeMode.light);
  }
}

2. 修复main.dart（MaterialApp监听状态）

用GetBuilder包裹MaterialApp，监听主题状态变化：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get_storage/get_storage.dart';
import 'package:remaider_app/services/theme_services.dart';
import 'package:remaider_app/ui/home_page.dart';
import 'package:remaider_app/ui/theme.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await GetStorage.init();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return GetBuilder<ThemeServices>(
      init: ThemeServices(),
      builder: (themeService) {
        return MaterialApp(
          title: 'Flutter Demo',
          debugShowCheckedModeBanner: false,
          theme: Themes.light,
          darkTheme: Themes.dark,
          themeMode: themeService.theme,
          home: const Homepage(),
        );
      },
    );
  }
}

3. 修复home_page.dart（删除重复类并实现切换按钮）

删除重复的ThemeServices定义，导入services层的类并添加切换按钮：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:remaider_app/services/theme_services.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('提醒应用'),
        actions: [
          GestureDetector(
            onTap: () {
              // 调用单例的切换方法
              ThemeServices().switchTheme();
            },
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Icon(
                ThemeServices().theme == ThemeMode.dark 
                    ? Icons.light_mode 
                    : Icons.dark_mode,
              ),
            ),
          )
        ],
      ),
      body: const Center(child: Text('主题切换测试')),
    );
  }
}

修复说明 #

• 单例模式确保全局使用同一个ThemeServices实例，避免状态不一致
• 切换主题时先更新存储再切换模式，保证重启后主题状态保留
• GetBuilder监听状态变化，触发MaterialApp重新build以应用新主题

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