原文作者：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國際技術”致力於與你共享高質量的技術文章

歡迎關注我們的公眾號、將文章分享給你的好友