大显身手 | Flutter CodePen 挑战赛来了！

作者 / Anjan Narain, Flutter Developer, Google

从一开始，Flutter 的目标之一就是让开发者创造美好的用户体验。全球社区每天都在涌现出大量的应用作品和实验项目，一再展示出 Flutter 的创意潜能，令人赞叹不已。现在，我们很高兴能携手 CodePen 组织一系列有趣的全新挑战赛，让您尽情展现自己的 Flutter 技能。

CodePen 是前端开发者们进行实验、分享和迭代时首选的在线社区之一。自从我们今年 4 月宣布与 CodePen 达成合作以来，广大开发者们创造了众多高品质的 Flutter 画笔 (Pen)，令人赞不绝口。现在，我们想为您提供一个展示自己高超的 Flutter 设计技巧的机会，让您在拥有一百多万名设计师和程序员的 CodePen 社区中一展身手。

挑战赛详情

挑战内容

CodePen 挑战赛提供了一系列有趣的开发主题，按照主题进行构建的同时您也会提升自己的技能。我们之前举办过涵盖 JavaScript、图像和调色板等网络开发主题的挑战赛。这次的 Flutter CodePen 挑战赛已于 7 月 6 日正式启动，为期一个月，您需要使用 CodePen 全新的 Flutter 编辑器打造用户体验。

• JavaScript 挑战

  https://codepen.io/challenges/2020/march/

• 图像挑战

  https://codepen.io/challenges/2020/april/

• 调色板挑战

  https://codepen.io/challenges/2019/january/

• CodePen Flutter 编辑器

  https://codepen.io/pen/editor/flutter

比赛规则

• Flutter CodePen 挑战赛每周发布一个挑战主题，涉及不同的 Flutter 主题，持续 4 周。每个主题将在每周一发布，难度将从基础到高级依次递增。

• 为了帮助您顺利完成挑战，我们会提供一些想法，推荐资源并分享示例画笔。

• 完成画笔后，建议您使用标签 FlutterPen 将作品分享到 CodePen 社区，并使用 #FlutterPen 在 Twitter 和 LinkedIn 上与更广泛的开发者社区分享。CodePen 社区将选出最佳画笔并在 CodePen 的主页上进行展示。

第一周挑战赛已于 2020 年 7 月 6 日周一启动。

本周主题

在第一周，我们将从 Flutter 中最基本的构建块入手: Stack widget。Stack 可以按照绘制顺序将 widget 彼此叠加。您可以在简单的场景中使用该 widget，例如在渐变之上叠加文本或构建一些非常酷的自定义设计。

• Stack widget

  https://api.flutter.cn/flutter/widgets/Stack-class.html#widgets.Stack.2

• Bilibili Flutter widgets 介绍合集

  https://www.bilibili.com/medialist/play/ml980828158

下面是一个 CodePen 示例，它使用 Stack widget 创建了一个三列式分栏视图。您可以前往 Slack Clone 查看实际的运行效果以及实现该视图的代码。

• Slack Clone / 作者 Mariano Zorrilla

  https://codepen.io/mkiisoft/pen/XWmGdxL

即刻参与挑战！

挑战赛已于 7 月 6 日拉开序幕，敬请大家关注赛事页面并积极参赛，尽情挥洒创意！赛事期间，您可以使用 #FlutterPen 话题标签展示您创建的 Flutter 画笔。期待您的精彩设计！如需任何支持或帮助，来留言区找我们吧！

• CodePen 挑战赛

  https://codepen.io/challenges/

---

推荐阅读

 点击屏末 | 阅读原文 | 访问 Flutter 开发者社区中文资源

---