我想學 Flutter，可是我不知道應該如何開始？

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

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