Flutter 处理主题 Theme 的一些建议

2022-11-07 本文已影响0人独立开发者猫哥

Flutter 处理主题 Theme 的一些建议

原文 https://medium.com/@ahmed.salamay/what-to-consider-when-dealing-with-flutter-theme-ced376524a15

前言

主题通过指定一套颜色和文本样式的系统，帮助应用程序获得结构化设计和统一性。主题使您能够快速实现 UI，而不必强调次要细节，比如为每个 widget 指定确切的颜色。

正文

为什么选择 Theme 主题？

您希望框架与您一起工作，而不是与您作对，所以请尝试利用您拥有的组件和功能
这将是很容易使用的黑暗和光线主题和切换之间
改变您的应用程序的外观和感觉是很容易的，而不需要改变您编写的每一行代码
所有应用程序的组件和字体都是相同的，所以应用程序的大部分设计几乎是自动就位的。
例如，不需要记住标题应该是 24 SP 30，或者复制每个 widget 的确切颜色
由于您将输入更少的代码，因此您的开发时间将减少
您将输入更少的代码，并且页面将很小，只显示组件，而不显示样式
例如，每当您想声明一个 TextField 时，您将每次输入这个而不是长装饰 obj，从 1 行到 45 行，它可能或多或少取决于您的样式

色彩处理

Flutter 主题数据具有一定的 gaps 和 flows ，例如，并非所有的组件都应用于主题数据对象中的配色方案

看看这个例子，只定义了橙色的唯一主色值

那么我该如何克服这个问题呢？

所有这些问题都会按照这个 https://github.com/flutter/flutter/issues/91772 得到解决但在此之前，我建议您使用 FlexColorScheme 包。

https://docs.flexcolorscheme.com/

FlexColorScheme 不仅解决了这些问题，而且还有更多的特性:

https://docs.flexcolorscheme.com/

为不同的 AppBar 样式提供一个快速切换，而不需要每次都手动为它制作一个自定义主题，包括与 TabBar 相匹配的主题。
主题的 Android 系统导航栏，以匹配您的应用程序主题，并使其部分或完全透明。
在应用程序中实现多种颜色方案之间的轻松切换
提供一个简单的方法，使主题的主要颜色品牌和混合背景和表面。能够轻松地改变不同表面的混合水平。
还有，到 playground 上去发现更多的 https://rydmike.com/flexcolorscheme/themesplayground-v6/#/

文本主题

使用文本主题是很困难的，并且不建议你更改 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