使用 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 副總裁
![[譯] 使用 Flutter、Material Theming 和官方 Material Components（MDC）構建美觀，靈活的使用者介面](https://i.iter01.com/images/1e080ed2ae8ef2893270b1405b8f90c312caf3e8cd503c6b2d149bfdd7b4094e.png)
採用 Material Theming 和 Material Components 設計的 “Shrine 品牌特定” UI 元素
![[譯] 使用 Flutter、Material Theming 和官方 Material Components（MDC）構建美觀，靈活的使用者介面](https://i.iter01.com/images/29139165e022c58ef3080c4b4bc1886cbc8983bbffc511ee9a6a4bafd79cc229.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/flu… 找到更多的相關資訊。
在 Flutter 中使用 Material Theming 和 Material Components
就在 I/O 大會的時候，Flutter 的 Material Components 庫便已經更新以支援 Material 新系統中的許多新功能、樣式和元件。這些都在 Flutter beta 3 中提供並內建到 Flutter 框架中，從而無需額外的庫！我們還在 Flutter Gallery 中新增了更多關於如何使用這些 widget 的示例。
![[譯] 使用 Flutter、Material Theming 和官方 Material Components（MDC）構建美觀，靈活的使用者介面](https://i.iter01.com/images/66035c7d26478fc14da0a0dc0484a49decf4c130756d28ee0fec7ecc01f809c0.png)
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、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。