原文作者：Poojã Bhaumik

译者：UC 国际研发 Jothy

写在最前：欢迎你来到“UC国际技术”公众号，我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章，不限于原创与翻译。

自从在 DevFest 2018 上谈过 Flutter 之后，我每天在 Linkedin 都能收到至少 5 条关于 Flutter 的消息，其中有 4 个人都问了这个著名的问题：

我要如何开始学习 Flutter？请帮帮我。

过了一段时间，我觉得做一样的答复变得很累。因此，我决定写下这篇文章。

Pooja 的 Flutterverse 指南

网上的很多文章或 GitHub 的仓库都有很多学习资源，我也将会放上其中一些资源链接。但这篇文章会有所不同。我想握住你的手，带领你一步步走近 Flutterverse，然后让你自己飞翔。

Um，不好意思？什么是 Flutterverse？

Flutter 的宇宙！ xD 你才刚刚通过婴儿阶段，很快就会学到这些术语。

先决条件

如果你属于以下任一类别，你可以直接开始写 Flutter。

我使用过 Dart 语言。

我使用过面向对象的语言，比如 Java，C ++，我对 OOP 概念很熟悉，比如类，对象，方法，继承，抽象等等。

我是一名移动端开发人员，曾用过 Android/iOS 原生/React Native/Xamarin/Ionic 或其他移动开发框架。

不属于上述任何类别的人应该先开始学习 OOP 概念。这对学习任何框架都非常重要。我不建议任何人跳过 OOP 基础直接学习 Flutter。你可能可以攻克难关，但你的进展会很慢。

Dart 快速入门？

对于你们许多人来说，如果不是因为 Flutter，你们可能都没有使用或者听说过 Dart，让我告诉你们一些好消息。 Dart 很容易学习。我在一两天内就学会了。但我有很多 Android 体验，自然就熟悉 OOP，并且对 JavaScript 有足够的经验。不过，我曾经也在 GDG BBSR 组织的 Flutter Study Jam 中教授了一节 Dart 课程，大多数学生也非常快速地掌握了这些概念。

所以我整理了一份学习 Flutter 之前必须知道的完整概念列表，我将与你分享我的 Flutter Study Jam 演示文稿（仅限 Dart 部分）。我敢肯定，这对你很有帮助。

这是 PPT：http://bit.ly/2r2F8Mo

尝试下这个 DartPad 中每张幻灯片（从第 5 张开始）中提到的概念，这就是你现在所需知道的全部内容。

如果你想深入学习，这些资源可以帮助你 -

视频地址：
https://www.youtube.com/watch?list=PLlxmoA0rQ-LyHW9voBdNo4gEEIh0SjG-q&v=5rtujDjt50I

Intro to Dart for Java Developers
https://codelabs.developers.google.com/codelabs/from-java-to-dart/#0

我们现在可以开始 Flutter 了吗？

当然，你可以准备搭乘下一趟航班。

基本步骤和组件

以下是关于在 Flutter 中安装和运行第一个 Hello World 应用的 3 分钟介绍。感谢 Husayn Hakeem 提供支持。

3分钟介绍文章：

https://medium.com/@husayn.hakeem/flutter-hello-world-d15032356c81

既然你已经知道如何运行一个简单的应用，那就让我们先了解基本的组件吧。我觉得尝试基本组件的使用非常重要，因为它们就像是应用的基建一样。

现在请删除 Hello World 应用程序中的所有内容，并复制粘贴以下代码。

>> 玩一玩这些组件 <<

在我们的 Flutter Study Jam 中，我为初学者准备了这个 GitHub 库：

https://github.com/PoojaB26/FlutterBasicWidgets

它包含基本小部件的代码以及可以在该小部件中应用的大多数属性。

fork 该项目，玩玩示例组件是最好的学习方法。随便玩，删除一个属性，看看它如何改变模拟器中组件的外观。

或者如果你想从头开始编写，那么请看看 README.md 并把每个示例都写一遍，再来观察模拟器中的变化。

例如，让我们从 Text 组件开始。

把上面的 main.dart 代码第 24 行替换为以下代码 -

看看模拟器中的变化。现在让我们为组件添加更多属性。（我基本都是添加参数，但我喜欢称之为组件属性）

或者

现在继续添加更多属性或针对 README.md 中的其余组件进行相同的试验

PS. Flutter 支持热更新（Hot Reload），因此你无需为每次更改 “重启” 应用。只需按 Ctrl + Backslash（反斜杠），它将在几秒钟内重新加载变更。

继续探索，继续尝试。

开发 Flutter 的最佳姿势？

这种方法屡试不爽。它可以帮你轻松熟悉 Flutter，过程非常有趣。

向你展示 Flutter UI 挑战

规则很简单。找到你最喜欢的应用程序 UI 设计，并自己在 Flutter 中实现它。 UpLabs 和 Dribbble 上有很多惊艳的设计。挑选几个，并逐一征服他们。在开发中实现疯狂的设计是件幸福的事。（嘿，也许对设计不感冒的后端人员并不会感觉到幸福。我是遵从设计第一的开发人员，所以我非常关心应用的外观和感觉。）

我认识的一些经常发布 UI 挑战的人是 Fluttery 和 Deven Joshi。我相信还有更多，如果你也认识某些人，请将他们的链接放在评论中。

个人提示

通过观察事物来想象设计结构非常重要，所以我总是将设计分解成块。我之前写了一篇关于 “在 Flutter 中打破行和列中的布局” 的文章，这肯定会帮助你更好地实现你的设计。祝好运！

文章地址：

https://medium.com/flutter-community/breaking-layouts-in-rows-and-columns-in-flutter-8ea1ce4c1316

我想更深入学习

是的，当然。 Flutter 社区的其他成员还有很多其他资源。这里我放上部分链接供大家学习。

Pawan Kumar 的 MTechViral Flutter 教程
https://www.youtube.com/watch?list=PLR2qQy0Zxs_UdqAcaipPR3CG1Ly57UlhV&v=qWL1lGchpRA

尼克曼宁的 Flutter Crash Course
https://fluttercrashcourse.com/

>> 更多东西 <<

Floid 教程 + Dart by VoidRealms:
https://www.youtube.com/playlist?list=PLUbFnGajtZlX9ubiLzYz_cw92esraiIBi

Raja Yogan 的 Flutter 教程
https://www.youtube.com/playlist?list=PLgGjX33Qsw-EMsLf8TmsYhKOCx2ALZiKi

斯蒂芬格里德的 Udemy 课程
https://www.udemy.com/dart-and-flutter-the-complete-developers-guide/

geekyAnts 的 flutterlearn.com

☑️好的，现在我对 Flutter 很满意～

恭喜！既然你对 Flutter 感到满意，并且十分期待下一段旅程，以下资源将帮助你获得这个超超超美妙 SDK 的更多相关知识。

谷歌开发者在 YouTube 上展示的扑动播放列表:
https://www.youtube.com/user/GoogleDevelopers/playlists?sort=dd&view=50&shelf_id=66

我最喜欢的 Solido GitHub 存储库列表:
https://github.com/Solido/awesome-flutter

Flutter 每周新闻的 Flutter Weekly 简报:
https://twitter.com/FlutterWk

收集我最喜欢的文章 / 教程 Flutter:
https://github.com/PoojaB26/AwesomeFlutterPlaylist

如果你上 Twitter ，请关注 Nilay Yener 和 Flutter，了解 Flutter 相关的所有内容。

https://twitter.com/nlycskn

https://twitter.com/flutterio

当然，如果你发现我错过了任何牛逼的初学者教程或超级重要的 Flutter 资源，请在评论中补充。

英文原文：

https://medium.com/flutter-community/i-want-to-learn-flutter-how-to-start-ffb4145f9b26

好文推荐：

Rust 2018 年度调查报告

“UC国际技术”致力于与你共享高质量的技术文章

欢迎关注我们的公众号、将文章分享给你的好友