使用 Flutter、Material Theming 和官方 Material Components(MDC)构建美观,灵活的用户界面
在 Google I/O 2018 上,Material 团队宣布对 Material Design 进行重要更新,其重点是通过系统地应用品牌特定设计,从而使移动应用程序从其他应用中脱颖而出。这就是 Material Theming 工具。以下研究显示了通过组合不同定制的 Material Components,来为“Shrine” —— 一个销售服装和家居用品的电子商务应用程序,创建一个品牌特定的设计。Flutter 简直是实现这种设计的完美框架!
我非常高兴能够欢迎 Flutter 加入官方的 Material Design 组件集合中,成为我们 Android、iOS 和 Web 产品完全成熟的伙伴。Flutter 灵活和适应性的 widget 非常适合 Material Theming,而 Flutter 实时 UI 迭代的能力改变了我们改进设计的方式。”
- Matías Duarte,Material Design 副总裁
采用 Material Theming 和 Material Components 设计的 “Shrine 品牌特定” UI 元素
使用 Flutter 和 Material Components 实现 Shrine 设计的截图
Material Components 对 Flutter 的官方支持
Flutter 的核心原则之一即是为创建富有表现力的灵活的移动 UI 提供一流的支持。为了这个目标,我们很高兴的宣布 Flutter 被采用为 Material 的最佳平台!Flutter 将包含到设计和工程讨论、文档、官方支持、Google Design 内容,以及 Android、iOS 和 Web 的教学中。Material 甚至创建了一个专门的 Flutter 工程团队来与 Flutter 的 Material 库工程师们携手合作。这种伙伴关系将使 Flutter 在 Material Design 持续发展并增加像 Material Theming 等功能时保证自身的更新。你可以在 material.io/develop/flu… 找到更多的相关信息。
在 Flutter 中使用 Material Theming 和 Material Components
就在 I/O 大会的时候,Flutter 的 Material Components 库便已经更新以支持 Material 新系统中的许多新功能、样式和组件。这些都在 Flutter beta 3 中提供并内置到 Flutter 框架中,从而无需额外的库!我们还在 Flutter Gallery 中添加了更多关于如何使用这些 widget 的示例。
Flutter Gallery 中的部分 Material Components
了解更多
要快速了解在 Flutter 中使用 Material Theming,请查看我们的 Google I/O 大会:
- YouTube 视频链接:youtu.be/hA0hrpR-o8U
最后,我们很高兴地展示四份教程来教授使用 Flutter 和 Material Components 创建美观灵活的用户界面所需的核心理念:
-
MDC 101 Flutter:Material Components 基础
通过构建包含核心组件的简单应用程序,了解使用 Material Components 的基础知识。 -
MDC 102 Flutter:Material 结构和布局
了解如何在 Flutter 中使用 Material 结构和布局,添加导航、结构和数据。 -
MDC 103 Flutter:Material Theming 的颜色、形状、高度和类型
使用 Flutter 中的 Material Components 来区分你的产品并通过设计表达你的品牌理念。 -
MDC 104 Flutter:Material 高级组件
改进你的设计并学习使用我们的高级组件背景菜单。
下一步
Flutter 将继续与 Material 合作发布新的功能。在 GitHub 上的 Material Components Roadmap 中了解有关 Material Components 发布计划的更多信息。我们期待看到你用 Flutter 和 Material Theming 创造出的精彩设计!
如果发现译文存在错误或其他需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。
掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域,想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。