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

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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。