flutter 主題色彩管理組件 flex_color_scheme

前言

原文 https://ducafecat.com/blog/flutter-flex-color-scheme

平時我們做樣式適配關(guān)心幾個方面:

• 設(shè)計稿顏色
• 標(biāo)記尺寸大小、比例
• 全局修改為主
• 快速可修改

今天將會介紹一個快速調(diào)整主題色彩樣式的三方組件 flex_color_scheme

https://pub-web.flutter-io.cn/packages/flex_color_scheme

這個組件已經(jīng)支持了 flutter 3.10 和 Material 3

參考

Flex color scheme

https://pub-web.flutter-io.cn/packages/flex_color_scheme

https://docs.flexcolorscheme.com/

https://rydmike.com/flexcolorscheme/themesplayground-v7-1/

Material 3

https://m3.material.io/

https://m3.material.io/theme-builder

https://space.bilibili.com/389903587/channel/collectiondetail?sid=246709

本機(jī)環(huán)境

??flutter?--version
Flutter?3.10.5???channel?stable???https://github.com/flutter/flutter.git
Framework???revision?796c8ef792?(2?天前)???2023-06-13?15:51:02?-0700
Engine???revision?45f6e00911
Tools???Dart?3.0.5???DevTools?2.23.1

步驟

第一步：配置依賴

pubspec.yaml

dependencies:
??flutter:
????sdk:?flutter
??...

??flex_color_scheme:?^7.1.2

第二步：打開樣式定制器

https://rydmike.com/flexcolorscheme/themesplayground-v7-1/

第三步：復(fù)制樣式代碼

lib/main.dart

??//?This?widget?is?the?root?of?your?application.
??@override
??Widget?build(BuildContext?context)?{
????return?MaterialApp(
??????title:?'Flutter?Demo',

??????//?Theme?config?for?FlexColorScheme?version?7.1.x.?Make?sure?you?use
??????//?same?or?higher?package?version,?but?still?same?major?version.?If?you
??????//?use?a?lower?package?version,?some?properties?may?not?be?supported.
??????//?In?that?case?remove?them?after?copying?this?theme?to?your?app.
??????theme:?FlexThemeData.light(
????????colors:?const?FlexSchemeColor(
??????????primary:?Color(0xff065808),
??????????primaryContainer:?Color(0xff9ee29f),
??????????secondary:?Color(0xff365b37),
??????????secondaryContainer:?Color(0xffaebdaf),
??????????tertiary:?Color(0xff2c7e2e),
??????????tertiaryContainer:?Color(0xffb8e6b9),
??????????appBarColor:?Color(0xffb8e6b9),
??????????error:?Color(0xffb00020),
????????),
????????surfaceMode:?FlexSurfaceMode.levelSurfacesLowScaffold,
????????blendLevel:?7,
????????appBarStyle:?FlexAppBarStyle.material,
????????appBarOpacity:?0.87,
????????transparentStatusBar:?false,
????????appBarElevation:?12.5,
????????subThemesData:?const?FlexSubThemesData(
??????????useTextTheme:?true,
??????????useM2StyleDividerInM3:?true,
??????????tabBarIndicatorWeight:?5,
??????????tabBarIndicatorTopRadius:?6,
????????),
????????keyColors:?const?FlexKeyColors(
??????????useSecondary:?true,
??????????useTertiary:?true,
????????),
????????visualDensity:?FlexColorScheme.comfortablePlatformDensity,
????????useMaterial3:?true,
????????swapLegacyOnMaterial3:?true,
????????//?To?use?the?Playground?font,?add?GoogleFonts?package?and?uncomment
????????//?fontFamily:?GoogleFonts.notoSans().fontFamily,
??????),
??????darkTheme:?FlexThemeData.dark(
????????colors:?const?FlexSchemeColor(
??????????primary:?Color(0xff629f80),
??????????primaryContainer:?Color(0xff274033),
??????????secondary:?Color(0xff81b39a),
??????????secondaryContainer:?Color(0xff4d6b5c),
??????????tertiary:?Color(0xff88c5a6),
??????????tertiaryContainer:?Color(0xff356c50),
??????????appBarColor:?Color(0xff356c50),
??????????error:?Color(0xffcf6679),
????????),
????????surfaceMode:?FlexSurfaceMode.levelSurfacesLowScaffold,
????????blendLevel:?13,
????????transparentStatusBar:?false,
????????subThemesData:?const?FlexSubThemesData(
??????????useTextTheme:?true,
??????????useM2StyleDividerInM3:?true,
??????????tabBarIndicatorWeight:?5,
??????????tabBarIndicatorTopRadius:?6,
????????),
????????keyColors:?const?FlexKeyColors(
??????????useSecondary:?true,
??????????useTertiary:?true,
????????),
????????visualDensity:?FlexColorScheme.comfortablePlatformDensity,
????????useMaterial3:?true,
????????swapLegacyOnMaterial3:?true,
????????//?To?use?the?Playground?font,?add?GoogleFonts?package?and?uncomment
????????//?fontFamily:?GoogleFonts.notoSans().fontFamily,
??????),

??????//?If?you?do?not?have?a?themeMode?switch,?uncomment?this?line
??????//?to?let?the?device?system?mode?control?the?theme?mode:
??????themeMode:?ThemeMode.system,

??????home:?const?MyHomePage(title:?'Flutter?Demo?Home?Page'),
????);
??}

運行

通過 FlexSchemeColor 自定義顏色

const?FlexSchemeData?_myFlexScheme?=?FlexSchemeData(
??name:?'Midnight?blue',
??description:?'Midnight?blue?theme,?custom?definition?of?all?colors',
??light:?FlexSchemeColor(
????primary:?Color(0xFF00296B),
????primaryContainer:?Color(0xFFA0C2ED),
????secondary:?Color(0xFFD26900),
????secondaryContainer:?Color(0xFFFFD270),
????tertiary:?Color(0xFF5C5C95),
????tertiaryContainer:?Color(0xFFC8DBF8),
??),
??dark:?FlexSchemeColor(
????primary:?Color(0xFFB1CFF5),
????primaryContainer:?Color(0xFF3873BA),
????secondary:?Color(0xFFFFD270),
????secondaryContainer:?Color(0xFFD26900),
????tertiary:?Color(0xFFC9CBFC),
????tertiaryContainer:?Color(0xFF535393),
??),
);

FlexThemeData 是對 ThemeData 擴(kuò)展

///
///?However,?Dart?does?not?yet?support?such?extensions,?see:
///?https://github.com/dart-lang/language/issues/723
extension?FlexThemeData?on?ThemeData?{
??///?Returns?a?[ThemeData]?object?defined?by?factory?[FlexColorScheme.light]
??///?and?its?[FlexColorScheme.toTheme]?method.
??static?ThemeData?light({
????///?The?[FlexSchemeColor]?that?will?be?used?to?create?the?light
????///?[FlexColorScheme].
????///
????///?You?can?use?predefined?[FlexSchemeColor]?values?from?[FlexColor]?or
????///?[FlexColor.schemes]?map?or?define?your?own?colors?with
????///?[FlexSchemeColor]?or?[FlexSchemeColor.from].
????///
????///?For?using?built-in?color?schemes,?the?convenience?shortcut?to?select
????///?it?with?the?[scheme]?property?is?recommended?and?leaving?[colors]
????///?undefined.?If?both?are?specified?the?scheme?colors?defined?by?[colors]
????///?are?used.?If?both?are?null?then?[scheme]?defaults?to
????///?[FlexScheme.material],?thus?defining?the?resulting?scheme.
????final?FlexSchemeColor??colors,

FlexThemeData.light 返回的還是 ThemeData ，所以你可以加入自己的內(nèi)容。

加入自定義樣式定義

??????//?Theme?config?for?FlexColorScheme?version?7.1.x.?Make?sure?you?use
??????//?same?or?higher?package?version,?but?still?same?major?version.?If?you
??????//?use?a?lower?package?version,?some?properties?may?not?be?supported.
??????//?In?that?case?remove?them?after?copying?this?theme?to?your?app.
??????theme:?FlexThemeData.light(
????????colors:?const?FlexSchemeColor(
??????????primary:?Color(0xff065808),
??????????primaryContainer:?Color(0xff9ee29f),
??????????secondary:?Color(0xff365b37),
??????????secondaryContainer:?Color(0xffaebdaf),
??????????tertiary:?Color(0xff2c7e2e),
??????????tertiaryContainer:?Color(0xffb8e6b9),
??????????appBarColor:?Color(0xffb8e6b9),
??????????error:?Color(0xffb00020),
????????),
????????surfaceMode:?FlexSurfaceMode.levelSurfacesLowScaffold,
????????blendLevel:?7,
????????appBarStyle:?FlexAppBarStyle.material,
????????appBarOpacity:?0.87,
????????transparentStatusBar:?false,
????????appBarElevation:?12.5,
????????subThemesData:?const?FlexSubThemesData(
??????????useTextTheme:?true,
??????????useM2StyleDividerInM3:?true,
??????????tabBarIndicatorWeight:?5,
??????????tabBarIndicatorTopRadius:?6,
????????),
????????keyColors:?const?FlexKeyColors(
??????????useSecondary:?true,
??????????useTertiary:?true,
????????),
????????visualDensity:?FlexColorScheme.comfortablePlatformDensity,
????????useMaterial3:?true,
????????swapLegacyOnMaterial3:?true,
????????//?To?use?the?Playground?font,?add?GoogleFonts?package?and?uncomment
????????//?fontFamily:?GoogleFonts.notoSans().fontFamily,
??????).copyWith(
????????elevatedButtonTheme:?ElevatedButtonThemeData(
??????????style:?ElevatedButton.styleFrom(
????????????foregroundColor:?Colors.white,
????????????backgroundColor:?Colors.red,
????????????shape:?RoundedRectangleBorder(
??????????????borderRadius:?BorderRadius.circular(10),
????????????),
????????????padding:?const?EdgeInsets.symmetric(vertical:?16,?horizontal:?24),
??????????),
????????),
??????),

通過 copyWith 的方式

FlexSubThemesData 子主題重寫

????///?Activate?using?FlexColorScheme?opinionated?component?sub-themes?by
????///?passing?in?a?default?`FlexSubThemesData()`.
????///
????///?To?further?configure?the?sub-themes,?change?the?simple?flat?value
????///?properties?as?desired?in?`FlexSubThemesData()`.
????///
????///?By?default?[FlexThemeData.light],?[FlexThemeData.dark]?and
????///?[FlexColorScheme.toTheme],?do?as?little?as?they?need?to?just
????///?provide?a?consistent?Material?2?color?schemed?theme.?The?additions?they
????///?do?are?described?in?[FlexColorScheme.toTheme].
????///
????///?The?original?purpose?of?the?opinionated?sub-themes?was?to?make?it?easy
????///?to?add?themed?corner?radius?to?all?Widgets?that?support?it,?and?to
????///?provide?a?consistent?look?on?all?buttons,?including?[ToggleButtons].
????///
????///?Therefore?the?sub?themes?are?a?convenient?way?to?opt-in?on?customized
????///?corner?radius?on?Widgets?using?above?themes.?By?opting?in?you?can?set
????///?corner?radius?for?all?covered?Widgets?to?same?corner?radius?in?one?go.
????///?There?are?also?properties?to?override?the?global?default?for?each?widget
????///?to?set?different?rounding?per?widget?if?so?desired.
????///
????///?By?default,?if?a?`defaultRadius`?is?not?specified,?each?widgets?corner
????///?radius?and?some?other?styling?take?inspiration?from?the?Material?3?(M3)
????///?specification?https://m3.material.io/?and?uses?its?specifications?as
????///?defaults?when?it?is?possible?to?do?so?in?Flutter?SDK?theming?when?using
????///?Material2?mode?and?via?defaults?also?in?Material?3?mode.
????///
????///?Starting?from?version?5,?by?opting?in?via?a?default?[subThemesData]?you
????///?get?an?extensive?set?of?widget?component?sub?themes?applied.
????///?They?can?be?customized?via?the?[subThemesData]?property,?that?has
????///?quick?and?flat?sub?theme?configuration?values?in?the?data?class
????///?[FlexSubThemesData].
????///
????///?Customizable?sub-themes?are?available?for:
????///
????///?*?[AppBarTheme]?for?[AppBar]?via?[FlexSubThemes.appBarTheme].
????///?*?[BottomAppBarTheme]?for?[BottomAppBar]?via
????///???[FlexSubThemes.bottomAppBarTheme].
????///?*?[BottomNavigationBarThemeData]?for?[BottomNavigationBar]?via
????///???[FlexSubThemes.bottomNavigationBar].
????///?*?[BottomSheetThemeData]?for?[BottomSheet]?via
????///???[FlexSubThemes.bottomSheetTheme].
????///?*?[ButtonThemeData]?for?old?deprecated?buttons,?via
????///???[FlexSubThemes.buttonTheme].
????///?*?[CardTheme]?for?[Card]?via?[FlexSubThemes.cardTheme].
????///?*?[CheckboxThemeData]?for?[Checkbox]?via?[FlexSubThemes.checkboxTheme].
????///?*?[ChipThemeData]?for?[Chip]?via?[FlexSubThemes.chipTheme].
????///?*?[DatePickerThemeData]?for?[DatePicker]?via
????///???[FlexSubThemes.datePickerTheme].
????///?*?[DialogTheme]?for?[Dialog]?via?[FlexSubThemes.dialogTheme].
????///?*?[DrawerThemeData]?for?[Drawer]?via?[FlexSubThemes.drawerTheme].
????///?*?[DropdownMenuThemeData]?for?[DropDownMenu]?via
????///???[FlexSubThemes.dropdownMenuTheme].
????///?*?[ElevatedButtonThemeData]?for?[ElevatedButton]?via
????///???[FlexSubThemes.elevatedButtonTheme].
????///?*?[FilledButtonThemeData]?for?[FilledButton]?via
????///???[FlexSubThemes.filledButtonTheme].
????///?*?[FloatingActionButtonThemeData]?for?[FloatingActionButton]?via
????///???[FlexSubThemes.floatingActionButtonTheme].
????///?*?[IconButtonThemeData]?for?[IconButton]?via
????///???[FlexSubThemes.iconButtonTheme].
????///?*?[InputDecorationTheme]?for?[InputDecoration]?via
????///???[FlexSubThemes.inputDecorationTheme].
????///?*?[MenuBarThemeData]?for?[MenuBar]?via?[FlexSubThemes.menuBarTheme].
????///?*?[MenuButtonThemeData]?for?[MenuButton]?via
????///???[FlexSubThemes.menuButtonTheme].
????///?*?[MenuThemeData]?for?[MenuBar],?[MenuAnchor]?and?[DropDownMenu]?via
????///???[FlexSubThemes.menuTheme].
????///?*?[ListTileThemeData]?for?[ListTile]?via
????///???[FlexSubThemes.listTileTheme].
????///?*?[NavigationBarThemeData]?for?[NavigationBar]?via
????///???[FlexSubThemes.navigationBarTheme].
????///?*?[NavigationDrawerThemeData]?for?[NavigationDrawer]?via
????///???[FlexSubThemes.navigationDrawerTheme].
????///?*?[NavigationRailThemeData]?for?[NavigationRail]?via
????///???[FlexSubThemes.navigationRailTheme].
????///?*?[OutlinedButtonThemeData]?for?[OutlinedButton]?via
????///???[FlexSubThemes.outlinedButtonTheme].
????///?*?[PopupMenuThemeData]?for?[PopupMenuButton]?via
????///???[FlexSubThemes.popupMenuTheme].
????///?*?[RadioThemeData]?for?[Radio]?via?[FlexSubThemes.radioTheme].
????///?*?[SliderThemeData]?for?[Slider]?via?[FlexSubThemes.sliderTheme].
????///?*?[SnackBarThemeData]?for?[SnackBar]?via?[FlexSubThemes.snackBarTheme].
????///?*?[SwitchThemeData]?for?[Switch]?via?[FlexSubThemes.switchTheme].
????///?*?[TabBarTheme]?for?[TabBar]?via?[FlexSubThemes.tabBarTheme].
????///?*?[TextButtonThemeData]?for?[TextButton]?via
????///???[FlexSubThemes.textButtonTheme].
????///?*?[TimePickerThemeData]?for?[TimePickerDialog]?via
????///???[FlexSubThemes.timePickerTheme].
????///?*?[ToggleButtonsThemeData]?for?[ToggleButtons]?via
????///???[FlexSubThemes.toggleButtonsTheme].
????///?*?[TooltipThemeData]?for?[Tooltip]?via?[FlexSubThemes.tooltipTheme].
????///
????///?Defaults?to?null,?resulting?in?FlexColorScheme?not?using?any?extra
????///?sub-theming?in?addition?to?those?described?in?[FlexColorScheme.toTheme].
????final?FlexSubThemesData??subThemesData,

subThemesData 中羅列了常見的樣式屬性

代碼

https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_flex_color_scheme

小結(jié)

flex_color_scheme 是一個快速的樣式設(shè)置工具，還修復(fù)了 flutter sdk 中的一些組件顏色不到位的缺陷，趕快用上吧。

感謝閱讀本文

如果我有什么錯？請在評論中讓我知道。我很樂意改進(jìn)。

? 貓哥 ducafecat.com

end