Flutter 入門路線圖

知識小集發表於2020-01-16

Flutter

本文整理自 Roadmap To Become A Flutter Developer，請參考原文閱讀

本文是為那些渴望開始學習 flutter 的人們而準備的，這是一個適合初學者從所有必要資源中逐步學習的路線圖。

什麼是 flutter

Flutter 是 Google 的 UI 工具包，可通過單個程式碼庫為移動裝置，web 和桌面系統構建漂亮的，本機編譯的應用程式。

下面兩個視訊很好地介紹了 flutter；

• Introducing Flutter¹

• What's new in Flutter 2019²

[1] https://youtu.be/fq4N0hgOWzU
[2] https://youtu.be/5VbAwhBBHsg

為什麼是 flutter？

我們已經知道有很多框架可以提供跨平臺功能，那麼在這場激烈競爭中，是什麼讓 flutter 顯得特別呢？

快速開發

Flutter 的熱載入功能可幫助您快速輕鬆地進行實驗，構建使用者介面，新增功能並更快地修復錯誤。在 iOS 和 Android 的模擬器和硬體上體驗亞秒級的重新載入時間，而不會丟失狀態。

富有表現力的精美使用者介面

Flutter 內建的精美 Material Design 和 Cupertino（iOS-flavor）小部件，豐富的運動 API，流暢的自然滾動以及對平臺的瞭解，可為您的使用者帶來更多驚喜。

native 級別的效能

Flutter 的小部件結合了所有重要的平臺差異，例如滾動，導航，圖示和字型，以在 iOS 和 Android 上提供完整的 native 效能。

檢視 Flutter 的功能

以下是全球開發人員構建的 Flutter 應用程式的展示。

• Apps take flight with Flutter³

• An open list of apps built with Flutter⁴

• Flutter Awesome⁵

• Start Flutter | Forever free, open source, and easy to use.⁶

[3]https://flutter.dev/showcase
[4]https://itsallwidgets.com/
[5]https://flutterawesome.com/
[6]https://startflutter.com/

首先要做什麼？

Flutter 既快速又容易，如果您熟悉 Java 或任何物件導向的語言，那麼很不錯，但是我強烈建議您具備 Dart 的基本知識。

以下是一些可能對您有所幫助的視訊。

• Dart Programming for Flutter⁷

• Dart Programming Tutorial - Full Course⁸

• Introduction to Dart for Beginners⁹

• Dart: Basics of Dart Part - 1/2 | Flutter¹⁰

[7]https://youtu.be/5rtujDjt50I?list=PLlxmoA0rQ-LyHW9voBdNo4gEEIh0SjG-q
[8]https://youtu.be/Ej_Pcr4uC2Q
[9]https://youtu.be/8F2uemqLwvE?list=PLJbE2Yu2zumDjfrfu8kisK9lQVcpMDDzZ
[10]https://youtu.be/DFRl4UyS7c8?list=PLR2qQy0Zxs_W4a6P70VYtzna7jwl3-lxI

對於那些不喜歡看視訊的人，可以檢視以下站點

• Tutorials¹¹

• Dart Programming Tutorial¹²

• Learn Dart In A Week With These Free Resources¹³

[11]https://dart.dev/tutorials
[12]https://www.tutorialspoint.com/dart_programming/index.htm
[13]https://hackernoon.com/learn-dart-in-a-week-with-these-free-resources-b892e5265220

是什麼使 Dart 如此典型，為什麼 flutter 會使用它？

為什麼 Flutter 使用 Dart？

可以檢視以下文章和視訊

• Why Flutter Uses Dart?¹⁴

• 視訊：Why Flutter Uses Dart?¹⁵

[14]https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf
[15]https://youtu.be/5F-6n_2XWR8

Flutter 底層是如何工作的？

由於 iOS 不允許動態編譯，因此您的 Dart 程式碼會使用 AOT 直接編譯為原生程式碼。

要了解更多資訊，請在下面檢視這些資源：

• Technical overview¹⁶

• How to Dart and Flutter Work Together?¹⁷

• What's Revolutionary about Flutter¹⁸

• How Flutter reners Widgets¹⁹

• How is Flutter different for app development²⁰

[16]https://flutter.dev/docs/resources/technical-overview
[17]https://youtu.be/iVYpeEd3Jes
[18]https://hackernoon.com/whats-revolutionary-about-flutter-946915b09514
[19]https://youtu.be/996ZgFRENMs
[20]https://youtu.be/l-YO9CmaSUM

Flutter快速且易於使用，現在讓我們看看如何安裝它。

如何安裝Flutter？

這是開發人員文件的連結，您可以在其中找到在現有的作業系統中安裝Flutter。

• Install²¹

[21]https://flutter.dev/docs/get-started/install

解決安裝過程中的問題

如果您在安裝 flutter 時遇到任何問題，並且 flutter 無法正常工作，那麼這就是出現了一些問題。

• 設定 flutter 路徑時遇到麻煩-找不到flutter命令²²

• Flutter Doctor無法識別Android Studio flutter和dart外掛，但已安裝外掛²³

• Flutter和Dart外掛未在Flutter Doctor中安裝警告²⁴

• 安裝 flutter 時的一些常見問題。²⁵

[22]https://stackoverflow.com/questions/49268297/having-trouble-setting-flutter-path-flutter-commands-not-found
[23]https://github.com/flutter/flutter/issues/21881
[24]https://github.com/flutter/flutter/issues/11940
[25]https://github.com/flutter/flutter/wiki/Workarounds-for-common-issues

設定Flutter的編輯器

• Set up an editor²⁶

[26]https://flutter.dev/docs/get-started/editor

建立您的Flutter專案

通過以下命令建立 flutter 專案

flutter create <project-name>
複製程式碼

或者您可以使用IDE（Intellij，Android Studio等）

專案概況

當您建立 flutter 應用程式時，您會看到這些檔案和資料夾，大多數程式碼是用 dart 編寫在 lib 資料夾中，native 程式碼放在 android 和 ios 目錄下。

Jay Tillu的一篇文章解釋了該專案的結構。

• Flutter Project Structure²⁷

[27]https://dev.to/jay_tillu/flutter-project-structure-1lhe

執行你的第一個 App

• Test drive²⁸

或者你可以使用以下命令來執行您的第一個應用程式

flutter run
複製程式碼

當您啟動第一個應用程式時，一定會感到很興奮（從技術上說，這不是您的應用程式，程式碼已經在那裡?）。我也很興奮?。

建立flutter應用程式時，您會看到計數器應用程式已經有程式碼了。

執行程式碼時，您將看到此資訊。這是一個簡單的計數器應用程式，其中有一個FAB（FloatingActionButton）和 Text 來指示已按下 FAB 多少次。

[28]https://flutter.dev/docs/get-started/test-drive

flutter 中的 widget

如果看到程式碼，您將看到 StatefulWidget 和 StatelessWidget。在深入探討之前，我們先來了解一下什麼是 Widget。

• Introduction to widget²⁹

基本上，在 flutter 應用程式中看到的所有內容都是一個小部件。

我發現 What is a Widget in Flutter³⁰ 一文中的解釋非常準確

Flutter小組還提供了一個YouTube播放列表（Widget of the week³¹），該列表僅討論flutter中的Widget。

[29]https://flutter.dev/docs/development/ui/widgets-intro
[30]https://stackoverflow.com/questions/50958238/what-is-a-widget-in-flutter
[31]https://youtu.be/b_sQ9bMltGU?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG

什麼是有狀態和無狀態小部件？

在 Stateless Widget 中，其所有屬性都是不可變的，這意味著 StatelessWidget 永遠不會自行重建（但可以從外部事件重建），而 StatefulWidget 可以。

• Intro to Flutter - Stateful and Stateless Widgets, Widget Tree - Part One³²

• Flutter: Stateful vs Stateless Widget³³

• How to Create Stateless Widgets - Flutter Widgets 101 Ep. 1³⁴

• How Stateful Widgets Are Used Best - Flutter Widgets 101 Ep. 2³⁵

• Google's Flutter Tutorials | 6 - Stateless & Stateful Widgets | Android & iOS | Dart³⁶

[32]https://youtu.be/-QRQIKtPTlI
[33]https://medium.com/flutter-community/flutter-stateful-vs-stateless-db325309deae
[34]https://www.youtube.com/watch?v=wE7khGHVkYY&feature=emb_title
[35]https://www.youtube.com/watch?v=AqCMFXEmf3w&feature=emb_title
[36]https://www.youtube.com/watch?list=PLR2qQy0Zxs_UdqAcaipPR3CG1Ly57UlhV&v=VnWHOogtDk8&feature=emb_title

讓我們建立第一個Flutter應用

Google已經提供了一個 Codelab，您可以從那裡開始學習如何構建自己的第一個 Flutter 應用程式。

• Write Your First Flutter App, part 1³⁷

• Write Your First Flutter App, part 2³⁸

• Flutter Tutorial Part 1: Build a Flutter app from scratch³⁹

• 1.3 Flutter Hello World Tutorial: Create First Flutter Application: Flutter Dart Tutorial⁴⁰

• 1.4 First Flutter Application using Dart: PART-2 Flutter Tutorial for Beginners using Dart⁴¹

[37]https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1/#4
[38]https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2/#0
[39]https://medium.com/aviabird/flutter-tutorial-how-to-build-an-app-from-scratch-b88d4e0e10d7
[40]https://www.youtube.com/watch?list=PLlxmoA0rQ-Lw6tAs2fGFuXGP13-dWdKsB&v=dsyucuytW2k
[41]https://www.youtube.com/watch?list=PLlxmoA0rQ-Lw6tAs2fGFuXGP13-dWdKsB&v=ycHX8QtV08c

如何在 Flutter 中建立 UI？

為了使 UI 更加流暢，您需要基本瞭解佈局以及如何使用它們。

• Layouts in Flutter⁴²

• Flutter layout Cheat Sheet⁴³

[42]https://flutter.dev/docs/development/ui/layout
[43]https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e

如何在您的應用中新增互動？

在 flutter 中，您不能只是分配一個值並留下它

例如

String value="Hello";
------------------------------
Text(value);
---SOMEWHERE IN THE CODE------
onTap(){
value="How are you?";
}
複製程式碼

如果您認為文字將要更改，那麼您錯了?‍♂️，您將不得不使用 setState()。

onTap(){
	setState({
		value="How are you?";
	});
}
複製程式碼

新增 setState() 將重建小部件並顯示更改。

• Adding interactivity to your Flutter app⁴⁴

我建議您跟進有關開發的 Flutter 官方文件

• Development⁴⁵

flutter 中的所有內容都是小部件，您可以自行建立任何自定義小部件，但是已經有通過 flutter 定義的小部件。

• Widget catalog⁴⁶

[44]https://flutter.dev/docs/development/ui/interactive
[45]https://flutter.dev/docs/development
[46]https://flutter.dev/docs/development/ui/widgets

Flutter 中的 JSON 解析

• JSON and serialization⁴⁷

• Parsing JSON in Flutter⁴⁸

• Parsing complex JSON in Flutter⁴⁹

• Working with APIs in Flutter⁵⁰

• Handling Network Calls like a Pro in Flutter⁵¹

• Flutter - Build An App To Fetch Data Online Using HTTP GET | Android & iOS⁵²

• Testing, JSON serialization, and immutables (The Boring Flutter Development Show, Ep. 2)⁵³

[47]https://flutter.dev/docs/development/data-and-backend/json
[48]https://medium.com/flutterdevs/parsing-complex-json-in-flutter-b7f991611d3e
[49]https://medium.com/flutter-community/parsing-complex-json-in-flutter-747c46655f51
[50]https://medium.com/flutter-community/working-with-apis-in-flutter-8745968103e9
[51]https://medium.com/flutter-community/handling-network-calls-like-a-pro-in-flutter-31bd30c86be1
[52]https://www.youtube.com/watch?list=PLR2qQy0Zxs_UdqAcaipPR3CG1Ly57UlhV&v=aIJU68Phi1w
[53]https://www.youtube.com/watch?v=TiCA0CEePyE

在 Flutter 中使用資料庫

SQLite

• Persist data with SQLite⁵⁴

• Data Persistence with SQLite | Flutter⁵⁵

• 4.1 Flutter SQFLite Database Tutorial: Implement SQLite database with example: Section Overview⁵⁶

• Moor (Room for Flutter) #1 – Tables & Queries – Fluent SQLite Database⁵⁷

[54]https://flutter.dev/docs/cookbook/persistence/sqlite
[55]https://medium.com/flutterdevs/data-persistence-with-sqlite-flutter-47a6f67b973f
[56]https://www.youtube.com/watch?list=PLDQl6gZtjvFu5l20K5KTEBLCjfRjHowLj&v=1BwjNEKD8g8
[57]https://www.youtube.com/watch?v=zpWsedYMczM

SharedPreferences

• Shared preferences plugin⁵⁸

• Using SharedPreferences in Flutter⁵⁹

• Store key-value data on disk⁶⁰

• Making use of Shared Preferences, Flex Widgets and Dismissibles with Dart's Flutter framework⁶¹

[58]https://pub.dev/packages/shared_preferences
[59]https://medium.com/flutterdevs/using-sharedpreferences-in-flutter-251755f07127
[60]https://flutter.dev/docs/cookbook/persistence/key-value
[61]https://www.youtube.com/watch?v=IvrAAMQnj4k

使用Firebase

• 將 Firebase 新增到您的 Flutter 應用⁶²

• Firebase for Flutter⁶³

• Flutter - Firestore introduction⁶⁴

[62]https://firebase.google.com/docs/flutter/setup
[63]https://codelabs.developers.google.com/codelabs/flutter-firebase/#0
[64]https://www.youtube.com/watch?list=PLgGjX33Qsw-Ha_8ks9im86sLIihimuYrr&v=LzEbpALmRlc

其他學習 Flutter 的資源

以下是其他開發人員和Flutter團隊提供的一些資源：

• Technical overview⁶⁵

• Resources to learn Flutter⁶⁶

• Free resources to learn and advance in Flutter⁶⁷

• Flutter Community⁶⁸

• My Favourite List of Flutter Resources⁶⁹

• awesome-flutter⁷⁰

• londonappbrewery/Flutter-Course-Resources⁷¹

• A Searchable List of Flutter Resources⁷²

• FlutterDevs⁷³

[65]https://flutter.dev/docs/resources/technical-overview
[66]https://medium.com/flutter-community/resources-to-learn-flutter-2ade7aa73305
[67]https://medium.com/flutter-community/free-resources-to-learn-and-advance-in-flutter-e07875ffc825
[68]https://medium.com/flutter-community
[69]https://medium.com/coding-with-flutter/my-favourite-list-of-flutter-resources-523adc611cbe
[70]https://github.com/Solido/awesome-flutter
[71]https://github.com/londonappbrewery/Flutter-Course-Resources
[72]https://flutterx.com/
[73]https://medium.com/flutterdevs

關於 Flutter 的問題

• FAQ⁷⁴

• Answering Questions on Flutter App Development⁷⁵

• Flutter Vs. React Native: FAQs for Every Developer⁷⁶

[74]https://flutter.dev/docs/resources/faq
[75]https://medium.com/@dev.n/answering-questions-on-flutter-app-development-6d50eb7223f3
[76]https://hackernoon.com/flutter-vs-react-native-faqs-for-every-developer-yjp329z

本文僅適用於初學者。

我的機器學習入門路線圖
2018-08-06
機器學習
Java新手入門學習路線圖
2020-11-20
Java
Flutter 學習路線圖
2020-03-26
Flutter
Linux學習路線圖（從入門到上崗，帶自學路線圖）
2020-05-28
Linux
Linux學習路線圖，入門教程分享
2020-05-21
Linux
Linux學習路線圖，入門教程分享。
2020-05-21
Linux
《Flutter 入門經典》之“Flutter 入門 ”
2021-02-02
Flutter
Java學習路線·入門
2022-04-02
Java
前端入門路線推薦
2020-10-07
前端
大資料學習路線教程圖，如何快速入門Spark
2019-12-23
大資料Spark
分散式架構 -- 學習路線圖（入門到進階）
2018-04-23
分散式架構
圖神經網路入門
2020-11-22
神經網路
.NET 入門到高階路線
2023-02-01
flutter入門技巧
2018-10-31
Flutter
Flutter 動畫入門
1970-01-01
Flutter動畫
Web前端開發零基礎入門學習路線圖
2019-06-28
Web前端
flutter 入門 - flutter的誕生
2018-06-23
Flutter
Java零基礎小白必看的學習路線圖，快速入門！
2019-01-24
Java
Flutter - BLoC模式入門
2020-06-08
FlutterBloC模式
Flutter入門篇（一）
2019-03-03
Flutter
Flutter入門篇（二）
2019-03-09
Flutter
Flutter動畫入門篇
2021-07-01
Flutter動畫
Flutter 入門例項
2018-06-26
Flutter
Flutter入門教程（一）Flutter簡介
2022-03-26
Flutter
Flutter 2022 產品路線圖釋出
2022-01-14
Flutter
Java學習路線從入門到入土
2020-09-21
Java
Flutter入門進階之旅（十三）Flutter 路由
2019-04-15
Flutter路由
Flutter 圖片載入
2020-02-06
Flutter
Flutter 2019 產品路線圖正式公佈
2019-01-18
Flutter
Flutter For Web入門實戰
2019-12-13
FlutterWeb
帶你高效入門 Flutter
2019-07-08
Flutter
Flutter入門 - 狀態管理
2021-08-31
Flutter
Flutter入門——山寨掘金（三）
2018-07-29
Flutter
Flutter入門——山寨掘金（二）
2018-07-25
Flutter
Flutter 入門 - 狀態管理
2018-06-23
Flutter
雲端計算學習路線圖課件：學Docker容器怎樣快速入門？
2020-02-08
Docker
Flutter 實現平滑曲線折線圖
2018-12-15
Flutter
CTF web安全45天入門學習路線
2022-01-23
Web