共计 2490 个字符，预计需要花费 7 分钟才能阅读完成。
Flutter 解决主题 Theme 的一些倡议
原文 https://medium.com/@ahmed.sal…
前言
主题通过指定一套色彩和文本款式的零碎，帮忙应用程序取得结构化设计和统一性。主题使您可能疾速实现 UI，而不用强调主要细节，比方为每个 widget 指定确切的色彩。
注释
为什么抉择 Theme 主题？
- 您心愿框架与您一起工作，而不是与您作对，所以请尝试利用您领有的组件和性能
- 这将是很容易应用的光明和光线主题和切换之间
- 扭转您的应用程序的外观和感觉是很容易的，而不须要扭转您编写的每一行代码
- 所有应用程序的组件和字体都是雷同的，所以应用程序的大部分设计简直是主动就位的。
- 例如，不须要记住题目应该是 24 SP 30，或者复制每个 widget 的确切色彩
- 因为您将输出更少的代码，因而您的开发工夫将缩小
- 您将输出更少的代码，并且页面将很小，只显示组件，而不显示款式
- 例如，每当您想申明一个 TextField 时，您将每次输出这个而不是长装璜 obj，从 1 行到 45 行，它可能或多或少取决于您的款式
色调解决
Flutter 主题数据具备肯定的 gaps 和 flows，例如，并非所有的组件都利用于主题数据对象中的配色计划
看看这个例子，只定义了橙色的惟一主色值
那么我该如何克服这个问题呢？
所有这些问题都会依照这个 https://github.com/flutter/fl… 失去解决 但在此之前，我建议您应用 FlexColorScheme 包。
https://docs.flexcolorscheme….
FlexColorScheme 不仅解决了这些问题，而且还有更多的个性:
https://docs.flexcolorscheme….
- 为不同的 AppBar 款式提供一个疾速切换，而不须要每次都手动为它制作一个自定义主题，包含与 TabBar 相匹配的主题。
- 主题的 Android 零碎导航栏，以匹配您的应用程序主题，并使其局部或齐全通明。
- 在应用程序中实现多种色彩计划之间的轻松切换
- 提供一个简略的办法，使主题的次要色彩品牌和混合背景和外表。可能轻松地扭转不同外表的混合程度。
- 还有，到 playground 下来发现更多的 https://rydmike.com/flexcolor…
文本主题
应用文本主题是很艰难的，并且不倡议你更改 ThemeData 对象中的 TextTheme，因为你会意外地更改一些你不晓得的货色，例如日期选择器，除非你确切地晓得这些更改将如何影响你的应用程序。
问题是 flutter 没有记录哪个文本款式利用于哪个组件，所以你必须本人去发现它
另外，您必须晓得不能在调用 TextTheme() 构造函数时混合应用 2018 和 2021 术语。
2018 年的术语是题目 1，题目 2，题目 3，题目 4，题目 5，题目 6，字幕 1，字幕 2，body Text1，body Text2，题目，按钮，概述
而 2021 年的术语是 display Large，displayMedium，displaySmall，headline Large，headline Medium，headline Small，titleLarge，titleMedium，title Small，body Large，body Small，label Large，label Medium，label Small,
如果您抉择更改文本主题数据款式，上面是一些将受到影响的组件
- Body Large => TabBar Title, TimePicker Numbers (Clock)
- Body Medium => The Default Text, Tooltip, ListTile Subtitle, and trailing
- Body Small => The DatePicker day’s numbers (1 to 30)
- Title Large => App Bar Title, Dialog Title
- Title Medium => ListTile title, StatefulHeaderCard title, DropdownMenuItem Selected Text, Dialog Content, Am/PM inside Time Picker
- Title Small => The Month Section inside Date Picker, Error Text inside Text Field
- Display Medium => Selected Time inside Time Picker
- Headline Small => The selected date inside Date Picker
- Label Small =>‘Select Time’Text in the time picker
倡议
我发现 gkinnerTeam 解决格调的形式是最好的例子之一，特地是在 flutter-Wonder-app 中解决的形式
https://github.com/gskinnerTeam
https://github.com/gskinnerTe…
Https://github.com/gskinnerteam/flutter-wonderous-app/blob/master/lib/styles/styles.dart
参考文献
- https://docs.flexcolorscheme….
- https://material.io/blog/
- https://docs.google.com/docum…
- https://github.com/gskinnerTe…
- https://codelabs.developers.g…
- https://codelabs.developers.g…
- https://m3.material.io/styles…
- https://m3.material.io/styles…
结束语
如果本文对你有帮忙，请转发让更多的敌人浏览。
兴许这个操作只有你 3 秒钟，对我来说是一个激励，感激。
祝你有一个美妙的一天~
© 猫哥
- 微信 ducafecat
- https://wiki.ducafecat.tech
- https://video.ducafecat.tech
本文由 mdnice 多平台公布