关于flutter:Flutter-设计-使您的主题同质化

如果你和我一样长期面对电脑，分享几个对眼睛有益处的教训

竟可能的室内用自然光，关掉多余的光源
显示器分辨率比例调小，字体大些
如果你须要更多屏幕空间，能够加一个辅助屏幕
可能的话去缓缓适应暗色主题
色彩调的对比度低些
间断工作 2 小时，起来走走让眼睛瞭望下远方

当然并不是所有人都适宜，让本人的眼睛难受就行

这篇文章是通知你如何通过 ThemeData 来全局治理 Flutter 的界面款式。

有一次我我的项目做完，曾经通过了评审，而后产品和我说要调下款式，刷的一下，给我了一个新的 sketch 设计稿，我的心田是抗拒的，然而只能急躁的去剖析这个新版的款式规范，幸好设计师是一个设计学科的硕士做事还算标准。

而后我通过 ThemeData 解决了 90% 的问题，因为我在代码中尽可能的用官网组件，这样在 ThemeData 中还能找到这个对象。

剩下的自定义组件，应为我有抽取公共组件，所以改改就实现了。

浏览倡议，你能够通过我的译文大抵的理解内容，如果感兴趣能够通过原文细细品味，下方有原文链接。

https://medium.com/flutter-co…

https://github.com/GONZALEZD/…

在很多 Flutter 源代码和应用程序中，我察看到一个重复呈现的实际，即通过小部件参数间接增加自定义款式，导致不统一的设计和额定的保护。作为一个集体的例子，我必须保护一个 Flutter 应用程序，其中所有题目有不同的字体大小 (有时字体分量)。

在这篇文章中，我将解释你的重要性的形式，你应该设计您的 Flutter 应用程序，尤其是关注的主题。

在您看来，这些“设置”页面在代码方面的区别是什么？

Settings page 设置页面

在上图中，“设置”页面共享完全相同的代码。在这个档次上，这四种设计之间没有严格的区别。

这外面没有什么神奇的货色: 所有的主题相干的货色都集中在更高的档次，在 MaterialApp widget 中。这个小工具容许你定义两个主题，一个用于 light brightness，另一个用于 dark theme 模式。

此外，如果没有给出任何价值，大多数小部件都会从中检索它们的设计。

小部件正在从 ThemeData (大多数状况下) 设置默认值

让咱们来看一个如何正确做到这一点的例子: Card widget。你能够察看到在设置页面的第三个例子中，形态是直线而不是角。

而只有‘child’属性在代码中应用: Card (child: …)

当你深入研究 Card 小部件是如何设计的时候，你会看到它的形态是如何定义的。上面是无关 Card.shape 属性的代码文档:

/// The shape of the card's [Material].
///
/// Defines the card's [Material.shape].
///
/// If this property is null then [CardTheme.shape] of [ThemeData.cardTheme]
/// is used. If that's null then the shape will be a [RoundedRectangleBorder]
/// with a circular corner radius of 4.0.
final ShapeBorder? shape;

因而，为了确保“一般”卡片共享雷同的设计，您必须定义本人的 ThemeData，并在 MaterialApp 小部件中应用它作为主题 (或 darkTheme)。

ThemeData example() {final base  = ThemeData.dark();
  final mainColor = Colors.lightBlue;
  return base.copyWith(cardColor: Color.lerp(mainColor, Colors.white, 0.2),
    cardTheme: base.cardTheme?.copyWith(color: Color.lerp(mainColor, Colors.black, 0.1),
      margin: EdgeInsets.all(20.0),
      elevation: 0.0,
      shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(14.0),
          side: BorderSide(color: Colors.white24, width: 1)),
    ),
  );
}

下面的代码演示了如何更改卡片设计，然而您能够为来自 Flutter SDK 的简直所有小部件进行更改。此外，您应该将主题相干的内容集中到单个文件中，因为 ThemeData 是一个微小的数据结构。

可怜的是，ThemeData 并不能笼罩所有窗口小部件。例如，您不能在其中定义列表贴片设计。侥幸的是，您能够通过 ListTileTheme 小部件实现这一点。

阐明如何更改列表平铺选定的色彩和填充，而无需在源代码中显式设置页面。

通过 ListTileTheme，咱们能够在不更改页面代码一行的状况下从新定义抉择的题目 / 背景和前景色

ListView.builder(itemBuilder: (context, index) {final value = elements[index];
    return ListTile(
      selected: value == selected,
      title: Text(value.title),
      subtitle: Text(value.message),
      leading: Icon(value.icon),
      onTap: () => setState(() => selected = value),
    );
  },
  itemCount: elements.length,
);

正如您在代码中看到的，与设计没有任何关系。它的长处是防止代码噪声，使其简洁易懂。另外，我喜爱的一点是我所有的办法都很小 (少于 30 行)。

在本文中，咱们理解了如何将利用程序设计集中到 ThemeData 对象中。正如你所了解的，你可能须要浏览很多 Flutter SDK 代码文档，然而当你或者其余共事须要保护它的时候，益处就来了:

防止代码反复
缩小页面中的代码，使代码更易于浏览和了解
确保设计的一致性

然而正如你可能曾经看到的，ThemeData 对象是一个十分大的构造，在一直的演变中。所以，请亲密关注它！

我在开始一个新我的项目时查看 ThemeData

再给你两个小倡议！首先，如果您心愿为您的组件之一进行特定的设计，而不是在构建办法中定制它，您能够将小部件包装到 Theme 小部件中。

当您设计一个新的小部件时，您可能心愿通过从 ThemeData 检索主题信息来模拟 SDK 小部件。您可能曾经看到，从 ThemeData 继承是不正确的形式。相同，您能够通过 InheritedTheme 小部件“扩大”它，并模拟它在 ListTileTheme 小部件中的实现形式。

像平常一样，你能够在这里找到本文应用的源代码和 adobe 设计:

https://github.com/GONZALEZD/…

https://ducafecat.tech/

https://github.com/ducafecat

https://github.com/ducafecat/…

https://getstrapi.cn

https://ducafecat.tech/catego…

https://space.bilibili.com/40…

关于flutter:Flutter-设计-使您的主题同质化

猫哥说

老铁记得转发，猫哥会出现更多 Flutter 好文~~~~

微信群 ducafecat

b 站 https://space.bilibili.com/40…

原文

代码

参考

注释

应用程序主题的正确办法是什么？

主题数据涵盖了所有的窗口小部件，对吧？

总结

为了更进一步..

往期

开源

GetX Quick Start

新闻客户端

strapi 手册译文

微信探讨群 ducafecat

系列汇合

译文

开源我的项目

Dart 编程语言根底

Flutter 零根底入门

Flutter 实战从零开始新闻客户端

Flutter 组件开发

Flutter Bloc

Flutter Getx4

Docker Yapi

猫哥说

老铁记得 转发，猫哥会出现更多 Flutter 好文~~~~