我看完掘金上的227篇文章,總結出一份 Flutter 入門教程

一顆香菜發表於2018-07-04

2018年6月21日,Google 在 GTMC 大會上釋出了 Flutter preview 1。這標誌著 Flutter 發展已經進入到一個新階段,即將迎來 1.0 的穩定版本。

本文致力於整理 Flutter 的入門的文章。作為自己學習 Flutter 的學習筆記。同時希望這篇文章能幫助小夥伴入門 Flutter 。

Flutter 簡介

如果你第一次接觸 Flutter ,你應該從簡介開始,在簡介中你可以瞭解到 Flutter 是什麼,有哪些優點。 Flutter 和其他的跨平臺框架的差異……。總之,它能更好的帶你初步瞭解Flutter。

為什麼原生應用開發者需要關注 Flutter

如果你是 iOS、Android 的原生開發者,那你應該看一下這篇文章,這篇文章清晰的說明了為什麼原生開發這需要關注 Flutter。簡單易學高效的 Dart 語言、反應式的 Flutter、以及一切都是Wiget……,看完這些之後,你會感覺到 Flutter 的簡潔強大。你會停止下來手頭的正在寫的 Swift 和 Kotlin 程式碼,去了解一下 Flutter 是什麼。

Flutter 英文官網

在這個網站中你必須看懂的是怎樣配置 Flutter 的開發環境。為什麼不用 Flutter 中文網?因為最新特性需要翻譯,網站更新需要時間。

Flutter 安裝(Windows)

如果你在官網學習如何安裝 Flutter 遇到了問題,那麼應該找學習一下前人的經驗了。這篇文章講解了如何在 Windows 上安裝 Flutter SDK。希望給使用 Windows 作為開發機器的小夥伴一點幫助。

Flutter 安裝(Mac)

如果你使用的是 Mac,這篇詳細的教程可以幫到你。

Google 跨平臺方案 Flutter 從入門到實戰

配置好基本環境以後,我們要學習的是 Flutter 的基本語法,內容包括:變數宣告、資料型別、判斷和迴圈條件等基礎知識。雖然程式語言千變萬化,但是學習路徑永遠是這樣。建議你在學習 Flutter 基礎知識的時候對照著自己正在使用的程式語言的學習路徑,對應起來學習。有對比學的更快些。

如果你一步一步的學習,學到這裡,算是完成了小成就。你現在可以輕鬆的寫下幾行 Dart 的程式碼,然後執行一個 Hello World 程式。

Flutter 佈局詳解

學習過 Hello World 程式之後。我們可以開始學習 Flutter 佈局了。學習佈局意味著我們可以使用 Flutter 構建移動應用介面,一套程式碼,可以在 Android 和 iOS 上執行。本文主要介紹了 Flutter 佈局的相關內容,從實際的例子出發,講解該如何使用 Flutter 進行佈局。

Flutter 佈局(一)- Container詳解

本文列舉了 Flutter中 最常見的佈局 Container, 列舉的一些實際應用的例子以及使用方法。

Flutter 佈局(二)- Padding、Align、Center詳解

這篇文章介紹了 Flutter 常見的集中控制元件,包括:PaddingAlignCenter。介紹了他們的佈局行為以及使用場景。

Flutter 佈局(三)- FittedBox、AspectRatio、ConstrainedBox詳解

這篇文章介紹了 Flutter 常見的集中控制元件,包括:FittedBoxAspectRatioConstrainedBox。介紹了他們的佈局行為以及使用場景。

Flutter Widgets: Image

介紹了 Flutter 的 Image 控制元件的使用方法。

Flutter Widgets: Text

介紹了 Flutter 的 Text 控制元件的使用方法

顯然,講解Flutter佈局的文章還不是很全面,在後的更新中會進行補充。

在學習 Dart 基本語法、Flutter佈局這些知識之後,距離我們做一個有資料互動的 Flutter App 還需要學習最後一部分知識:網路請求。

淺嘗 Flutter 中的 http 請求

這篇文章中,作者介紹瞭如何在 Flutter 中使用 http 請求來完成一個新聞頁面的功能,資料來源使用的 Django+Mysql,如果你在未缺少資料來源而感到哦困惱,你可以嘗試一下豆瓣開發者服務中提供的資料介面。你可以不用很詳細的編寫頁面,但是一定要掌握如何使用 Flutter 進行網路請求。

練習題:

Flutter 實戰之實現一個簡單的新聞閱讀器

作者通過一些公共的資料介面,完成了一個簡單的新聞閱讀 App,通過這個例子可以完成的使用到Dart語法、佈局和控制元件以及網路請求的相關知識。

基於 Google Flutter 的開源中國客戶端,支援Android與iOS

作者通過使用開源中國的相關 API 和資料爬蟲,實現了一個有功能的開源中國客戶端,通過這個例子也可以完成的使用到 Dart 語法、佈局和控制元件以及網路請求的相關知識。

到此,你可以使用 Flutter 的構建一個具有精美介面、使用 Dart 構建的、有資料請求的 iOS 或 Android 應用。

我的一篇文章承載不了 Flutter 所有的知識點,如果你想了解更多關於 Flutter 的相關知識,你可以關注一下掘金的Flutter 的 Tag,目前該Tag下一共有227篇文章。內容包含從 Flutter Beta 3 以來的所有關於 Flutter 的內容,相信這些文章能夠更好的幫助你學習 Flutter 。

我們建立了掘金 Flutter 技術交流群,如果你在移動端閱讀本篇文章,你可以複製小熊姐微訊號:Fedjiang ,Web端和微信端可以通過掃描二維碼,回覆 flutter 獲取加群連結。

小熊姐微訊號

相關文章