[译] 使用 Flutter、Material Theming 和官方 Material Components（MDC）构建美观，灵活的用户界面

• 原文地址：Building beautiful, flexible user interfaces with Flutter, Material Theming, and official Material Components (MDC)
• 原文作者：Michael Thomsen
• 译文出自：掘金翻译计划
• 本文永久链接：github.com/xitu/gold-m…
• 译者：DevMcryYu
• 校对者：sunui

使用 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 的示例。

扫描二维码关注公众号，回复： 4384966 查看本文章

Flutter Gallery 中的部分 Material Components

了解更多

要快速了解在 Flutter 中使用 Material Theming，请查看我们的 Google I/O 大会：

• YouTube 视频链接：youtu.be/hA0hrpR-o8U

最后，我们很高兴地展示四份教程来教授使用 Flutter 和 Material Components 创建美观灵活的用户界面所需的核心理念：

1. MDC 101 Flutter：Material Components 基础
   通过构建包含核心组件的简单应用程序，了解使用 Material Components 的基础知识。

2. MDC 102 Flutter：Material 结构和布局
   了解如何在 Flutter 中使用 Material 结构和布局，添加导航、结构和数据。

3. MDC 103 Flutter：Material Theming 的颜色、形状、高度和类型
   使用 Flutter 中的 Material Components 来区分你的产品并通过设计表达你的品牌理念。

4. MDC 104 Flutter：Material 高级组件
   改进你的设计并学习使用我们的高级组件背景菜单。

下一步

Flutter 将继续与 Material 合作发布新的功能。在 GitHub 上的 Material Components Roadmap 中了解有关 Material Components 发布计划的更多信息。我们期待看到你用 Flutter 和 Material Theming 创造出的精彩设计！

如果发现译文存在错误或其他需要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。