6.1 主题与暗色模式

Flutter 的主题系统（ThemeData）提供了统一的视觉风格管理，通过 Material 3 的颜色系统和深色模式支持，可以轻松构建专业的视觉体系。

一、ThemeData 动态切换

1.1 定义双主题

classAppTheme{// 亮色主题staticThemeDatagetlightTheme=>ThemeData(useMaterial3:true,brightness:Brightness.light,colorScheme:ColorScheme.fromSeed(seedColor:constColor(0xFF6750A4),// 主色调brightness:Brightness.light,),// 文字主题textTheme:_buildTextTheme(Brightness.light),// 组件主题appBarTheme:constAppBarTheme(centerTitle:true,elevation:0,),cardTheme:CardTheme(elevation:2,shape:RoundedRectangleBorder(borderRadius:BorderRadius.circular(12)),),elevatedButtonTheme:ElevatedButtonThemeData(style:ElevatedButton.styleFrom(minimumSize:constSize.fromHeight(48),shape:RoundedRectangleBorder(borderRadius:BorderRadius.circular(12)),),),inputDecorationTheme:InputDecorationTheme(border:OutlineInputBorder(borderRadius:BorderRadius.circular(12),),filled:true,),);// 暗色主题staticThemeDatagetdarkTheme=>ThemeData(useMaterial3:true,brightness:Brightness.dark,colorScheme:ColorScheme.fromSeed(seedColor:constColor(0xFF6750A4),brightness:Brightness.dark,),textTheme:_buildTextTheme(Brightness.dark),appBarTheme:constAppBarTheme(centerTitle:true,elevation:0),cardTheme:CardTheme(elevation:4,shape:RoundedRectangleBorder(borderRadius:BorderRadius.circular(12)),),);staticTextTheme_buildTextTheme(Brightnessbrightness){finalcolor=brightness==Brightness.light?constColor(0xFF1C1B1F):constColor(0xFFE6E1E5);returnTextTheme(headlineLarge:TextStyle(fontSize:32,fontWeight:FontWeight.bold,color:color),headlineMedium:TextStyle(fontSize:24,fontWeight:FontWeight.bold,color:color),titleLarge:TextStyle(fontSize:20,fontWeight:FontWeight.w600,color:color),bodyLarge:TextStyle(fontSize:16,color:color),bodyMedium:TextStyle(fontSize:14,color:color.withOpacity(0.8)),);}}

1.2 主题切换控制器

classThemeControllerextendsChangeNotifier{ThemeMode_themeMode;ThemeController({ThemeModeinitial=ThemeMode.system}):_themeMode=initial;ThemeModegetthemeMode=>_themeMode;boolgetisDark=>_themeMode==ThemeMode.dark;voidsetThemeMode(ThemeModemode){_themeMode=mode;PreferencesService.saveThemeMode(mode.index);notifyListeners();}voidtoggleTheme(){setThemeMode(isDark?ThemeMode.light:ThemeMode.dark);}// 跟随系统voidfollowSystem()=>setThemeMode(ThemeMode.system);}// 在 App 入口ChangeNotifierProvider(create:(_)=>ThemeController(initial:ThemeMode.values[PreferencesService.getThemeMode()],),child:Consumer<ThemeController>(builder:(context,themeController,_)=>MaterialApp(theme:AppTheme.lightTheme,darkTheme:AppTheme.darkTheme,themeMode:themeController.themeMode,home:constHomePage(),),),)

二、自定义颜色与字体系统

2.1 Material 3 颜色系统

// 从种子色生成完整颜色系统finalcolorScheme=ColorScheme.fromSeed(seedColor:constColor(0xFF6750A4),brightness:Brightness.light,);// 颜色角色对应表// primary → 主要操作按钮背景// onPrimary → primary 上的文字/图标// primaryContainer → 次要容器背景// secondary → 次要操作// surface → 卡片、对话框背景// onSurface → surface 上的文字// error → 错误状态// 在 Widget 中使用Widgetbuild(BuildContextcontext){finalcolorScheme=Theme.of(context).colorScheme;returnContainer(color:colorScheme.primaryContainer,child:Text('Hello',style:TextStyle(color:colorScheme.onPrimaryContainer),),);}

2.2 扩展主题颜色（自定义颜色）

// 定义扩展颜色@immutableclassAppColorsextendsThemeExtension<AppColors>{finalColorsuccess;finalColorwarning;finalColorinfo;finalColorgradientStart;finalColorgradientEnd;constAppColors({requiredthis.success,requiredthis.warning,requiredthis.info,requiredthis.gradientStart,requiredthis.gradientEnd,});@overrideAppColorscopyWith({Color?success,Color?warning,Color?info,Color?gradientStart,Color?gradientEnd,}){returnAppColors(success:success??this.success,warning:warning??this.warning,info:info??this.info,gradientStart:gradientStart??this.gradientStart,gradientEnd:gradientEnd??this.gradientEnd,);}@overrideAppColorslerp(AppColors?other,double t){if(other==null)returnthis;returnAppColors(success:Color.lerp(success,other.success,t)!,warning:Color.lerp(warning,other.warning,t)!,info:Color.lerp(info,other.info,t)!,gradientStart:Color.lerp(gradientStart,other.gradientStart,t)!,gradientEnd:Color.lerp(gradientEnd,other.gradientEnd,t)!,);}// 亮色配置staticconstlight=AppColors(success:Color(0xFF4CAF50),warning:Color(0xFFFF9800),info:Color(0xFF2196F3),gradientStart:Color(0xFF6750A4),gradientEnd:Color(0xFF03DAC6),);// 暗色配置staticconstdark=AppColors(success:Color(0xFF81C784),warning:Color(0xFFFFB74D),info:Color(0xFF64B5F6),gradientStart:Color(0xFFD0BCFF),gradientEnd:Color(0xFF6FF7EC),);}// 注册到 ThemeDataThemeDatagetlightTheme=>ThemeData(extensions:const[AppColors.light],// ...)// 在 Widget 中使用finalappColors=Theme.of(context).extension<AppColors>()!;Container(color:appColors.success)

2.3 自定义字体

# pubspec.yamlflutter:fonts:-family:Outfitfonts:-asset:assets/fonts/Outfit-Regular.ttfweight:400-asset:assets/fonts/Outfit-Medium.ttfweight:500-asset:assets/fonts/Outfit-Bold.ttfweight:700

ThemeDatagettheme=>ThemeData(fontFamily:'Outfit',// 全局字体textTheme:constTextTheme(headlineLarge:TextStyle(fontFamily:'Outfit',fontSize:32,fontWeight:FontWeight.w700,),),)

2.4 动态主题色（用户自定义）

classDynamicThemeControllerextendsChangeNotifier{Color_seedColor=constColor(0xFF6750A4);ColorgetseedColor=>_seedColor;ThemeDatagetlightTheme=>ThemeData(useMaterial3:true,colorScheme:ColorScheme.fromSeed(seedColor:_seedColor,brightness:Brightness.light,),);ThemeDatagetdarkTheme=>ThemeData(useMaterial3:true,colorScheme:ColorScheme.fromSeed(seedColor:_seedColor,brightness:Brightness.dark,),);voidupdateSeedColor(Colorcolor){_seedColor=color;notifyListeners();}}

小结

👉 下一节：6.2 国际化（i18n）