查看原文
其他

Flutter 与 Material Design 双剑合璧,助您构建精美应用

Flutter 谷歌开发者 2019-02-14

作者: 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



 点击屏末 |  | 欢迎向我们反馈您在开发过程中遇到的问题或建议




推荐阅读


    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存