Flutter 动态主题切换与自定义主题

大家好，欢迎来到IT知识分享网。

1. 简介

Flutter 是一个跨平台的开发框架，支持多种平台的 UI 开发。在现代应用中，用户对个性化体验的需求越来越高，因此支持多种主题模式的应用成为了标准。在这篇文章中，我们将通过代码示例，演示如何实现 Flutter 中的动态主题切换，包括亮色模式、深色模式以及自定义主题模式，带你深入理解如何灵活控制应用的外观风格。

2. 效果图

3. Flutter 中的主题系统

Flutter 提供了强大的主题系统，使用 ThemeData 类可以定义应用的全局外观风格。配合 ThemeMode，你可以轻松实现多种主题切换。

• ThemeData：用于定义具体的颜色、字体、按钮样式等。

• ThemeMode：控制当前主题模式，有三种值：

• ThemeMode.light：强制应用亮色主题。

• ThemeMode.dark：强制应用深色主题。

• ThemeMode.system：根据系统的主题设置自动切换。

3. 定义

自定义颜色这里我举例用的是scaffoldBackgroundColor作为背景颜色，如果想要对应的按钮、字体、分割线等等颜色 可以进去ThemeData里面看对应的名称，想要的东西对应的都有

4. 使用

把背景颜色改成我们刚才定义的scaffoldBackgroundColor

5. 完整代码

import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { ThemeMode _themeMode = ThemeMode.system; // 默认跟随系统 bool _isCustomTheme = false; // 是否启用自定义主题 @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Dynamic Theme', theme: _isCustomTheme ? _customTheme() : ThemeData.light(), darkTheme: ThemeData.dark(), themeMode: _themeMode, home: HomePage( onThemeChanged: (ThemeMode themeMode) { setState(() { _themeMode = themeMode; }); }, onCustomThemeChanged: () { setState(() { _isCustomTheme = !_isCustomTheme; }); }, ), ); } //自定义主题 ThemeData _customTheme() { if (!_isCustomTheme) { return ThemeData.light(); } return ThemeData( scaffoldBackgroundColor: Colors.yellow, ); } } class HomePage extends StatelessWidget { final Function(ThemeMode) onThemeChanged; final VoidCallback onCustomThemeChanged; const HomePage( {super.key, required this.onThemeChanged, required this.onCustomThemeChanged}); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Theme.of(context).scaffoldBackgroundColor, appBar: AppBar(title: Text('动态主题切换')), body: Column( children: [ ElevatedButton( onPressed: () => onThemeChanged(ThemeMode.light), child: Text('切换到亮色模式'), ), ElevatedButton( onPressed: () => onThemeChanged(ThemeMode.dark), child: Text('切换到深色模式'), ), ElevatedButton( onPressed: () => onThemeChanged(ThemeMode.system), child: Text('跟随系统设置'), ), ElevatedButton( onPressed: onCustomThemeChanged, child: Text('切换到自定义主题'), ), ], ), ); } }