Flutter 设计 使您的主题同质化

猫哥说

如果你和我一样长期面对电脑,分享几个对眼睛有好处的经验

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

当然并不是所有人都适合,让自己的眼睛舒服就行

这篇文章是告诉你如何通过 ThemeData 来全局管理 Flutter 的界面样式。

有一次我项目做完,已经通过了评审,然后产品和我说要调下样式,刷的一下,给我了一个新的 sketch 设计稿,我的内心是抗拒的,但是只能耐心的去分析这个新版的样式标准,幸好设计师是一个设计学科的硕士做事还算规范。

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

剩下的自定义组件,应为我有抽取公共组件,所以改改就完成了。

阅读建议,你可以通过我的译文大致的了解内容,如果感兴趣可以通过原文细细品味,下方有原文链接。

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

微信群 ducafecat

b 站 space.bilibili.com/404904528

原文

medium.com/flutter-com…

代码

github.com/GONZALEZD/f…

参考

正文

在很多 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 设计:

github.com/GONZALEZD/f…


© 猫哥

ducafecat.tech/

github.com/ducafecat

往期

开源

GetX Quick Start

github.com/ducafecat/g…

新闻客户端

github.com/ducafecat/f…

strapi 手册译文

getstrapi.cn

微信讨论群 ducafecat

系列集合

译文

ducafecat.tech/categories/…

开源项目

ducafecat.tech/categories/…

Dart 编程语言基础

space.bilibili.com/404904528/c…

Flutter 零基础入门

space.bilibili.com/404904528/c…

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

space.bilibili.com/404904528/c…

Flutter 组件开发

space.bilibili.com/404904528/c…

Flutter Bloc

space.bilibili.com/404904528/c…

Flutter Getx4

space.bilibili.com/404904528/c…

Docker Yapi

space.bilibili.com/404904528/c…

免责声明:务必仔细阅读

  • 本站为个人博客,博客所转载的一切破解、path、补丁、注册机和注册信息及软件等资源文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。

  • 本站为非盈利性站点,打赏作为用户喜欢本站捐赠打赏功能,本站不贩卖软件等资源,所有内容不作为商业行为。

  • 本博客的文章中涉及的任何解锁和解密分析脚本,仅用于测试和学习研究,禁止用于商业用途,不能保证其合法性,准确性,完整性和有效性,请根据情况自行判断.

  • 本博客的任何内容,未经许可禁止任何公众号、自媒体进行任何形式的转载、发布。

  • 博客对任何脚本资源教程问题概不负责,包括但不限于由任何脚本资源教程错误导致的任何损失或损害.

  • 间接使用相关资源或者参照文章的任何用户,包括但不限于建立VPS或在某些行为违反国家/地区法律或相关法规的情况下进行传播, 博客对于由此引起的任何隐私泄漏或其他后果概不负责.

  • 请勿将博客的任何内容用于商业或非法目的,否则后果自负.

  • 如果任何单位或个人认为该博客的任何内容可能涉嫌侵犯其权利,则应及时通知并提供身份证明,所有权证明至admin@proyy.com.我们将在收到认证文件后删除相关内容.

  • 任何以任何方式查看此博客的任何内容的人或直接或间接使用该博客的任何内容的使用者都应仔细阅读此声明。博客保留随时更改或补充此免责声明的权利。一旦使用并复制了博客的任何内容,则视为您已接受此免责声明.

您必须在下载后的24小时内从计算机或手机中完全删除以上内容.

您使用或者复制了本博客的任何内容,则视为已接受此声明,请仔细阅读


更多福利请关注一一网络微信公众号或者小程序

一一网络微信公众号
打个小广告,宝塔服务器面板,我用的也是,很方便,重点是免费的也能用,没钱太难了,穷鬼一个,一键全能部署及管理,送你3188元礼包,点我领取https://www.bt.cn/?invite_code=MV9kY3ZwbXo=


一一网络 » Flutter 设计 使您的主题同质化

发表评论

发表评论

一一网络-提供最优质的文章集合

立即查看 了解详情