Flutter 与 Material Design 双剑合璧,助您构建精美应用
作者: Michael Thomsen, Google Dart & Flutter 产品经理
在 Google I/O 2018 开发者大会上,Material 团队宣布对 Material Design 进行了重要更新,其核心目标是通过系统化地打造品牌专属设计,让您的应用在众多同类产品中脱颖而出。这就是 Material Theming。下文详细介绍了开发团队是如何通过搭配不同的定制 Material 组件,来为服饰及家居用品电商平台 "Shrine" 打造专属的品牌设计。Flutter 正是实现这种设计的完美框架。
Matías Duarte, Material Design 副总裁对于 Flutter 提到了如下的使用心得:
"我非常欢迎 Flutter 正式加入 Material Design 组件大家庭,与我们旗下的 Android, iOS 以及 Web 产品齐头并进,各展所长。Flutter 提供的 widget 兼具高灵活度、强适应性的双重优势,这一点十分适合 Material Theming, 而 Flutter 的实时 UI 迭代能力更是从根本上改变了我们优化和改进设计的方式。"
△ 使用 Material Theming 和 Material 组件设计的 "符合 Shrine 品牌特色" UI 元素
△ 应用界面截图 | 使用 Flutter 和 Material 组件实现的 Shrine 设计
Flutter 对 Material 组件的官方支持
Flutter 的核心使命之一就是通过一流的技术支持,助力开发者打造富有表现力的灵活移动 UI。我们很高兴宣布 Flutter 正式成为 Material 的一级开发平台,这让我们离目标又近了一步。现在您可以从多个渠道获取 Flutter 资源,如设计和工程话题的讨论,文档,官方支持以及 Google Design 提供的相关内容。而且,除了 Android, iOS 与 web 之外,我们同样也为 Flutter 开立了专门的教学课程。Material 甚至特地组建了一支 Flutter 专项开发团队,负责与 Flutter 的 Material 库工程师们展开密切合作。这种伙伴关系有助于双方共同成长,在 Material Design 推陈出新,并为开发者带去新特性的同时,让 Flutter 团队可以及时了解 Material 的最新工作进展,走在技术最前端。您可以前往 material.io/develop/flutter 获取更多内容。
在 Flutter 中使用 Material Theming 和 Material 组件
在 I/O 开发者大会期间,我们更新了 Flutter 的 Material 组件库,用于支持 Material 系统新添加的特性、样式和组件。这些功能现均已添加, 并内置到 Flutter 框架中,无需额外添加任何库! 与此同时,我们也在 Flutter Gallery 中加入了更多样例,帮助开发者们了解这些 widget 的具体使用方法:
这些功能:
https://medium.com/flutter-io/flutter-beta-3-7d88125245dc
Flutter Gallery:
https://play.google.com/store/apps/details?id=io.flutter.demo.gallery
△ 从 Flutter Gallery 中选取的部分 Material 组件
继续探索
如果您想快速了解如何在 Flutter 中玩转 Material Theming,请收看我们在 I/O 大会上的专题分享:
观看 “Flutter & Material Design” 完整视频,请访问:
https://www.youtube.com/watch?v=hA0hrpR-o8U
最后再和大家分享一个好消息: 我们新开设了 4 门 codelab 教程,教授 Flutter 和 Material 组件的核心概念。开发者们可以在实践中灵活运用所学知识,设计出美观灵活的用户交互界面:
MDC 101 Flutter: Material 组件基础
通过开发包含核心组件的简单应用,从实践中掌握 Material 组件的基本使用方法。
MDC 102 Flutter: Material 结构和布局
学习如何在 Flutter 中使用 Material 结构和布局,添加导航、结构和数据
MDC 103 Flutter: Material 中的颜色、形状、高度和类型
借助 Flutter 中的 Material 组件对产品进行区分,并通过设计表达您的品牌理念。
MDC 104 Flutter: Material 高级组件
优化您的设计并学习使用我们的高级组件背景菜单。
MDC 101 Flutter: Material Components Basics:
https://codelabs.developers.google.com/codelabs/mdc-101-flutter/#0
MDC 102 Flutter: Material 结构和布局
https://codelabs.developers.google.com/codelabs/mdc-102-flutter/#0
MDC 103 Flutter: Material 中的颜色、形状、高度和类型
https://codelabs.developers.google.com/codelabs/mdc-103-flutter/#0
MDC 104 Flutter: Material 高级组件
https://codelabs.developers.google.com/codelabs/mdc-104-flutter/#0
下一步
Flutter 将继续与 Material 携手合作,共同推出新的特性。请移步 GitHub 网站并参阅 Material 组件发布计划,进一步了解产品发布的具体时间安排。期待各位开发者借助 Flutter 和 Material Theming 自由地挥洒灵感,打造出更具创意的设计。
Material 组件发布计划
https://github.com/material-components/material-components/blob/develop/ROADMAP.md
推荐阅读