> * 原文地址：[Building beautiful, flexible user interfaces with Flutter, Material Theming, and official Material Components (MDC)](https://medium.com/flutter-io/building-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material-13ae9279ef19)
> * 原文作者：[Michael Thomsen](https://medium.com/@mit.mit?source=post_header_lockup)
> * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
> * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO1/building-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material.md](https://github.com/xitu/gold-miner/blob/master/TODO1/building-beautiful-flexible-user-interfaces-with-flutter-material-theming-and-official-material.md)
> * 译者：[DevMcryYu](https://github.com/devmcryyu)
> * 校对者：[sunui](https://github.com/sunui)

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

在 [Google I/O 2018](https://events.google.com/io/) 上，Material 团队[宣布](https://design.google/library/making-more-with-material/)对 Material Design 进行重要更新，其重点是通过系统地应用品牌特定设计，从而使移动应用程序从其他应用中脱颖而出。这就是 [Material Theming](https://material.io/design/material-theming/) 工具。以下研究显示了通过组合不同定制的 Material Components，来为“Shrine” —— 一个销售服装和家居用品的电子商务应用程序，创建一个品牌特定的设计。[Flutter](http://flutter.io) 简直是实现这种设计的完美框架！

**我非常高兴能够欢迎 Flutter 加入官方的 Material Design 组件集合中，成为我们 Android、iOS 和 Web 产品完全成熟的伙伴。Flutter 灵活和适应性的 widget 非常适合 Material Theming，而 Flutter 实时 UI 迭代的能力改变了我们改进设计的方式。”**

- Matías Duarte，Material Design 副总裁

![](https://cdn-images-1.medium.com/max/1000/1*cyTGpzWuHqvYFGTV7uQyXA.png)

采用 Material Theming 和 Material Components 设计的 “Shrine 品牌特定” UI 元素


![](https://cdn-images-1.medium.com/max/800/1*L2vOm-w6u4c-WRU6qZ9W_A.png)

使用 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/flutter](http://material.io/develop/flutter) 找到更多的相关信息。

#### 在 Flutter 中使用 Material Theming 和 Material Components

就在 I/O 大会的时候，Flutter 的 Material Components 库便已经更新以支持 Material 新系统中的许多新功能、样式和组件。这些都在 [Flutter beta 3](https://medium.com/flutter-io/flutter-beta-3-7d88125245dc) 中提供并内置到 Flutter 框架中，从而无需额外的库！我们还在 [Flutter Gallery](https://play.google.com/store/apps/details?id=io.flutter.demo.gallery) 中添加了更多关于如何使用这些 widget 的示例。

![](https://cdn-images-1.medium.com/max/800/1*3U83sHXcjpSZCceOlIjyHg.png)

 Flutter Gallery 中的部分 Material Components

### 了解更多

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

* YouTube 视频链接：https://youtu.be/hA0hrpR-o8U

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

1.  [**MDC 101 Flutter：Material Components 基础**](https://codelabs.developers.google.com/codelabs/mdc-101-flutter/)  
通过构建包含核心组件的简单应用程序，了解使用 Material Components 的基础知识。

2.  [**MDC 102 Flutter：Material 结构和布局**](https://codelabs.developers.google.com/codelabs/mdc-102-flutter/)  
了解如何在 Flutter 中使用 Material 结构和布局，添加导航、结构和数据。

3.  [**MDC 103 Flutter：Material Theming 的颜色、形状、高度和类型**](https://codelabs.developers.google.com/codelabs/mdc-103-flutter/)  
使用 Flutter 中的 Material Components 来区分你的产品并通过设计表达你的品牌理念。

4.  [**MDC 104 Flutter：Material 高级组件**](https://codelabs.developers.google.com/codelabs/mdc-104-flutter/)  
改进你的设计并学习使用我们的高级组件背景菜单。

#### 下一步

Flutter 将继续与 Material 合作发布新的功能。在 GitHub 上的 [Material Components Roadmap](https://github.com/material-components/material-components/blob/develop/ROADMAP.md) 中了解有关 Material Components 发布计划的更多信息。我们期待看到你用 Flutter 和 Material Theming 创造出的精彩设计！

> 如果发现译文存在错误或其他需要改进的地方，欢迎到 [掘金翻译计划](https://github.com/xitu/gold-miner) 对译文进行修改并 PR，也可获得相应奖励积分。文章开头的 **本文永久链接** 即为本文在 GitHub 上的 MarkDown 链接。


---

> [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[区块链](https://github.com/xitu/gold-miner#区块链)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计)、[人工智能](https://github.com/xitu/gold-miner#人工智能)等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。
