乐趣区

关于程序员:Flutter-处理主题-Theme-的一些建议

jiezi

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 多平台公布

退出移动版