Flutter主题与样式详解

张

张建站

2026/4/15 3:46:13

10分钟阅读

Flutter主题与样式详解什么是Flutter主题Flutter主题是一种统一应用外观的方式它定义了应用中各种UI组件的默认样式如颜色、字体、按钮样式等。通过使用主题我们可以确保应用的视觉一致性同时也方便进行全局样式的修改。主题的层次结构Flutter中的主题有两个层次全局主题通过MaterialApp的theme属性设置应用于整个应用局部主题通过Theme组件设置只应用于特定的 widget 子树全局主题1. 基本设置MaterialApp( theme: ThemeData( // 主色 primaryColor: Colors.blue, // 次要色 secondaryHeaderColor: Colors.green, // 背景色 scaffoldBackgroundColor: Colors.white, // 卡片颜色 cardColor: Colors.white, // 分割线颜色 dividerColor: Colors.grey[200], ), home: HomePage(), );2. 文本主题MaterialApp( theme: ThemeData( textTheme: TextTheme( // 标题文本 headline1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold), headline2: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), headline3: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), // 正文文本 bodyText1: TextStyle(fontSize: 16), bodyText2: TextStyle(fontSize: 14), // 按钮文本 button: TextStyle(fontSize: 16, fontWeight: FontWeight.bold), // 提示文本 caption: TextStyle(fontSize: 12, color: Colors.grey), ), ), home: HomePage(), );3. 按钮主题MaterialApp( theme: ThemeData( buttonTheme: ButtonThemeData( // 按钮最小宽度 minWidth: 88, // 按钮高度 height: 36, // 按钮文本主题 textTheme: ButtonTextTheme.primary, // 按钮形状 shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), ), ), ), home: HomePage(), );4. 输入框主题MaterialApp( theme: ThemeData( inputDecorationTheme: InputDecorationTheme( // 边框样式 border: OutlineInputBorder( borderRadius: BorderRadius.circular(8), ), // 聚焦时的边框样式 focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.blue, width: 2), borderRadius: BorderRadius.circular(8), ), // 标签样式 labelStyle: TextStyle(color: Colors.grey), // 提示文本样式 hintStyle: TextStyle(color: Colors.grey[400]), ), ), home: HomePage(), );5. 卡片主题MaterialApp( theme: ThemeData( cardTheme: CardTheme( // 卡片边距 margin: EdgeInsets.all(8), // 卡片圆角 shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), ), // 卡片阴影 elevation: 2, ), ), home: HomePage(), );局部主题1. 覆盖全局主题Theme( data: ThemeData( primaryColor: Colors.red, accentColor: Colors.yellow, ), child: Container( child: Text(Red Theme), ), );2. 扩展全局主题Theme( data: Theme.of(context).copyWith( primaryColor: Colors.green, ), child: Container( child: Text(Green Theme), ), );自定义主题1. 使用ThemeData构造器final customTheme ThemeData( // 颜色 primaryColor: Color(0xFF4285F4), secondaryHeaderColor: Color(0xFF34A853), scaffoldBackgroundColor: Color(0xFFF5F5F5), // 文本 textTheme: TextTheme( headline1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Color(0xFF333333)), bodyText1: TextStyle(fontSize: 16, color: Color(0xFF666666)), ), // 按钮 buttonTheme: ButtonThemeData( buttonColor: Color(0xFF4285F4), textTheme: ButtonTextTheme.primary, ), ); MaterialApp( theme: customTheme, home: HomePage(), );2. 使用颜色方案final colorScheme ColorScheme( primary: Color(0xFF4285F4), primaryVariant: Color(0xFF3367D6), secondary: Color(0xFF34A853), secondaryVariant: Color(0xFF2D8448), background: Color(0xFFF5F5F5), surface: Color(0xFFFFFFFF), error: Color(0xFFEA4335), onPrimary: Color(0xFFFFFFFF), onSecondary: Color(0xFFFFFFFF), onBackground: Color(0xFF333333), onSurface: Color(0xFF333333), onError: Color(0xFFFFFFFF), brightness: Brightness.light, ); final customTheme ThemeData.from(colorScheme: colorScheme); MaterialApp( theme: customTheme, home: HomePage(), );主题切换1. 亮色/暗色主题MaterialApp( theme: ThemeData.light(), darkTheme: ThemeData.dark(), themeMode: ThemeMode.system, // 跟随系统设置 home: HomePage(), );2. 手动切换主题class MyApp extends StatefulWidget { override _MyAppState createState() _MyAppState(); } class _MyAppState extends StateMyApp { bool _isDarkMode false; void toggleTheme() { setState(() { _isDarkMode !_isDarkMode; }); } override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData.light(), darkTheme: ThemeData.dark(), themeMode: _isDarkMode ? ThemeMode.dark : ThemeMode.light, home: HomePage(toggleTheme: toggleTheme), ); } } class HomePage extends StatelessWidget { final VoidCallback toggleTheme; const HomePage({Key? key, required this.toggleTheme}) : super(key: key); override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text(Theme Demo)), body: Center( child: ElevatedButton( onPressed: toggleTheme, child: Text(Toggle Theme), ), ), ); } }样式的应用1. 使用主题中的颜色Container( color: Theme.of(context).primaryColor, child: Text( Hello, style: TextStyle( color: Theme.of(context).colorScheme.onPrimary, ), ), );2. 使用主题中的文本样式Text( Hello World, style: Theme.of(context).textTheme.headline1, ); Text( This is a paragraph, style: Theme.of(context).textTheme.bodyText1, );3. 自定义文本样式Text( Custom Text, style: Theme.of(context).textTheme.headline1?.copyWith( color: Colors.red, fontSize: 20, ), );4. 使用主题中的按钮样式ElevatedButton( onPressed: () {}, child: Text(Button), style: ElevatedButton.styleFrom( primary: Theme.of(context).primaryColor, onPrimary: Theme.of(context).colorScheme.onPrimary, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(8), ), ), );高级主题技巧1. 使用InheritedWidget可以创建自定义的InheritedWidget来管理主题状态。class ThemeProvider extends InheritedWidget { final ThemeData themeData; final Function(ThemeData) changeTheme; const ThemeProvider({ Key? key, required this.themeData, required this.changeTheme, required Widget child, }) : super(key: key, child: child); static ThemeProvider of(BuildContext context) { final provider context.dependOnInheritedWidgetOfExactTypeThemeProvider(); assert(provider ! null, No ThemeProvider found in context); return provider!; } override bool updateShouldNotify(ThemeProvider oldWidget) { return themeData ! oldWidget.themeData; } } // 使用 class MyApp extends StatefulWidget { override _MyAppState createState() _MyAppState(); } class _MyAppState extends StateMyApp { ThemeData _themeData ThemeData.light(); void _changeTheme(ThemeData theme) { setState(() { _themeData theme; }); } override Widget build(BuildContext context) { return ThemeProvider( themeData: _themeData, changeTheme: _changeTheme, child: MaterialApp( theme: _themeData, home: HomePage(), ), ); } } // 在widget中使用 class HomePage extends StatelessWidget { override Widget build(BuildContext context) { final themeProvider ThemeProvider.of(context); return Scaffold( appBar: AppBar(title: Text(Theme Demo)), body: Center( child: ElevatedButton( onPressed: () { themeProvider.changeTheme(ThemeData.dark()); }, child: Text(Switch to Dark Theme), ), ), ); } }2. 使用Provider包使用Provider包来管理主题状态更加方便。// 安装provider包 // dependencies: // provider: ^6.0.0 class ThemeModel extends ChangeNotifier { ThemeData _themeData ThemeData.light(); ThemeData get themeData _themeData; void setTheme(ThemeData theme) { _themeData theme; notifyListeners(); } void toggleDarkMode() { _themeData _themeData.brightness Brightness.light ? ThemeData.dark() : ThemeData.light(); notifyListeners(); } } // 在main.dart中 void main() { runApp( ChangeNotifierProvider( create: (context) ThemeModel(), child: MyApp(), ), ); } class MyApp extends StatelessWidget { override Widget build(BuildContext context) { return ConsumerThemeModel( builder: (context, themeModel, child) { return MaterialApp( theme: themeModel.themeData, home: HomePage(), ); }, ); } } // 在widget中使用 class HomePage extends StatelessWidget { override Widget build(BuildContext context) { final themeModel Provider.ofThemeModel(context); return Scaffold( appBar: AppBar(title: Text(Theme Demo)), body: Center( child: ElevatedButton( onPressed: themeModel.toggleDarkMode, child: Text(Toggle Theme), ), ), ); } }3. 主题数据持久化使用shared_preferences包来持久化主题设置。// 安装shared_preferences包 // dependencies: // shared_preferences: ^2.0.0 class ThemeModel extends ChangeNotifier { ThemeData _themeData; final SharedPreferences _prefs; ThemeModel(this._prefs) { // 从存储中加载主题 final isDarkMode _prefs.getBool(isDarkMode) ?? false; _themeData isDarkMode ? ThemeData.dark() : ThemeData.light(); } ThemeData get themeData _themeData; void toggleDarkMode() async { final isDarkMode _themeData.brightness Brightness.light; _themeData isDarkMode ? ThemeData.dark() : ThemeData.light(); // 保存主题设置 await _prefs.setBool(isDarkMode, isDarkMode); notifyListeners(); } } // 在main.dart中 void main() async { WidgetsFlutterBinding.ensureInitialized(); final prefs await SharedPreferences.getInstance(); runApp( ChangeNotifierProvider( create: (context) ThemeModel(prefs), child: MyApp(), ), ); }主题最佳实践保持一致性使用主题确保应用的视觉一致性使用语义化颜色使用colorScheme中的语义化颜色如primary、secondary等避免硬编码避免在代码中硬编码颜色和样式使用主题中的值支持暗色模式为应用提供暗色模式支持主题持久化保存用户的主题偏好设置测试不同主题确保应用在不同主题下都能正常显示常见问题与解决方案1. 主题不生效原因可能是主题设置的位置不正确或者被局部主题覆盖。解决方案确保主题设置在MaterialApp中检查是否有局部主题覆盖了全局主题确保使用Theme.of(context)获取主题数据2. 暗色模式切换问题原因可能是暗色主题的设置不完整或者切换逻辑有问题。解决方案确保同时设置了theme和darkTheme正确设置themeMode测试不同场景下的主题切换3. 主题数据持久化失败原因可能是shared_preferences的使用方式不正确。解决方案确保在使用shared_preferences前初始化正确处理异步操作检查权限设置总结Flutter主题是一种强大的工具可以帮助我们创建具有一致视觉风格的应用。通过合理设置全局主题和局部主题我们可以确保应用在不同设备和场景下都能提供良好的用户体验。同时通过支持暗色模式和主题持久化我们可以进一步提升用户体验让用户根据自己的偏好定制应用的外观。希望本文对你理解和应用Flutter主题与样式有所帮助