Flutter中如何使用主题切换

在Flutter中，使用主题切换可以让用户在不同的颜色、字体等样式之间进行切换。以下是实现主题切换的步骤：

1. 创建一个ThemeData对象，用于存储不同的主题样式。

final ThemeData lightTheme = ThemeData(
  primarySwatch: Colors.blue,
  appBarTheme: AppBarTheme(
    color: Colors.white,
  ),
  textTheme: TextTheme(
    headline6: TextStyle(fontSize: 24),
  ),
);

final ThemeData darkTheme = ThemeData(
  primarySwatch: Colors.deepPurple,
  appBarTheme: AppBarTheme(
    color: Colors.black,
  ),
  textTheme: TextTheme(
    headline6: TextStyle(fontSize: 24),
  ),
);

2. 在MaterialApp或CupertinoApp中设置默认的主题。

MaterialApp(
  theme: lightTheme,
  home: MyHomePage(),
)

3. 创建一个状态管理器（例如GlobalKey）来保存当前的主题状态。

final GlobalKey<ThemeDataState> themeKey = GlobalKey<ThemeDataState>();

4. 创建一个ThemeDataState类，用于管理主题状态。

class ThemeDataState with ChangeNotifier {
  ThemeData _currentTheme = lightTheme;

  ThemeData get currentTheme => _currentTheme;

  void toggleTheme() {
    _currentTheme = _currentTheme == lightTheme ? darkTheme : lightTheme;
    notifyListeners();
  }
}

5. 在MaterialApp中使用themeMode属性，并将其绑定到状态管理器的主题状态。

MaterialApp(
  themeMode: ThemeMode.system, // 使用系统主题模式
  theme: Provider.of<ThemeDataState>(context).currentTheme,
  home: MyHomePage(),
)

6. 在需要切换主题的地方，调用状态管理器的toggleTheme方法。

ElevatedButton(
  onPressed: () {
    Provider.of<ThemeDataState>(context, listen: false).toggleTheme();
  },
  child: Text('切换主题'),
)

7. 如果你使用了ChangeNotifierProvider，请确保在main.dart文件中包裹整个应用。

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

现在，你的应用应该可以在亮色和暗色主题之间进行切换了。你可以根据需要自定义更多的主题样式。