以您喜歡的方式學習 Flutter

我們開始吧！

• 嘗試使用 DartPad，Flutter 和 Dart 的線上編輯器
• 使用安裝指南幫助您準備好環境

在您安裝時...

• 瞭解 Flutter 文件
• 訪問示例庫
• 瞭解 Dart 程式碼
• 訂閱Flutter 和 Dart 部落格
• 檢視StackOverflow 的 Flutter 標籤
• 訂閱YouTube 頻道
• • ...然後觀看每週 Widget，直到您的 IDE 準備就緒！

來自其他 SDK 或語言？

• Flutter 轉換指南
• Flutter 有何不同
• 使用熱過載

一切皆是 Widget！

• 閱讀Widgets 簡介
• 本指南解釋瞭如何使用 Widgets 編寫佈局

瞭解 Dart

• 訪問 dart.dev，Dart 的官方網站
• 瞭解Flutter 為何使用 Dart
• 完成Dart 備忘單 Codelab

讓我們深入探討！

• 構建您的第一個 Flutter 應用，第一部分
• 構建您的第一個 Flutter 應用，第二部分

讓您的應用看起來很酷

• 一種選擇是Material Design
• • 檢視他們的元件！
  • 還有這些Material Codelabs！
• 需要靈感？
• • 嘗試觀看 Johannes Milke 的影片
  • 或者 Super-Declarative 的 Widget 研討會
  • 或者像Awesome Flutter 這樣的社群維護索引！

瞭解如何進行網路操作！

• 您看過 Flutter 食譜嗎？它有一組關於網路的文章
• 許多應用使用 http 包
• 瞭解如何反序列化 JSON
• • 還有一個示例！

自信導航

• Flutter 食譜也有一組關於導航的文章！
• 順便說一下，您可能會看到一些關於 Flutter 的 Router 和更高階導航的內容。它們很棒，但完全不是必需的！

Flutter 和狀態管理

• 觀看關於 Flutter 的“狀態管理”含義的 I/O 講座
• 您會驚訝於僅使用 StatefulWidget 就能走多遠！
• 下一步是嘗試 Provider 和 ChangeNotifier
• • 觀看此Boring Show 劇集
  • 或這些示例：provider_counter、provider_shopper

使用外掛訪問原生 API

• 閱讀關於使用包和外掛的指南
• 觀看Matt 和 Andrew 在 Boring Show 中使用氣壓計
• 檢視 pub.dev，Dart 和 Flutter 的包生態系統
• • 瞭解包評分
  • ...以及 Flutter 精選

測試您的程式碼！

• 閱讀Flutter 測試指南
• 通讀測試示例，其中展示了多種測試型別
• 透過測試 Codelab 練習您的技能！

加入社群！

• 檢視社群目錄
• 加入Flutter 社群 Slack 並檢視他們的部落格
• 在 Twitter 上關注 Flutteristas！
• 在您附近找到一個Flutter 聚會
• 將您的應用提交到itsallwidgets.com
• 透過提交問題和提供反饋參與 Flutter 的開發

讓我們暫停一下

• ...然後深入Flutter 內部
• ...並瞭解Flutter 的架構
• ...並研究 Flutter 在平臺適配方面的理念

Widget 下面是什麼？

• 在Widgets 101 中瞭解元素、鍵和狀態物件
• 觀看來自中國、歐洲或俄亥俄州哥倫布市的 Flutter 框架技術講座

Future 和 Stream

• 觀看 Flutter in Focus 的Dart 非同步劇集
• 完成非同步程式設計 Codelab

透過隱式動畫為您的 UI 增添趣味

• 閱讀動畫簡介指南
• 觀看Flutter in Focus 關於隱式動畫的節目
• 嘗試隱式動畫 Codelab

那資產呢？

• 需要即時字型？使用google_fonts 包
• 閱讀直接在您的應用中包含資產的指南

瞭解更多關於佈局的資訊

• 閱讀有關佈局、約束和構建響應式應用的指南
• 嘗試佈局基礎 Codelab
• 觀看MediaQuery 的每週 Widget 劇集

表單和驗證

• 閱讀一些關於輸入、驗證和表單的食譜文章
• 檢視示例應用

Firebase

• 觀看入門 Firecast
• • 別忘了在那裡訂閱頻道！
• 閱讀FlutterFire 文件
• 嘗試Flutter Firebase Codelab 或 Firestore + Maps 示例應用
• 瞭解如何使用 Cloud Firestore 構建您的資料

深入研究外掛和原生 API

• 閱讀有關平臺通道工作原理的指南
• 嘗試構建您自己的外掛的 Codelab
• 通讀平臺通道示例應用

本地資料

• 觀看關於管理本地資料的技術講座
• 觀看 Simon Lightfoot 關於狀態恢復的技術講座或 Pawan Kumar 的技術講座
• 閱讀幾篇Flutter 食譜關於持久化的文章

學習額外的狀態管理庫

• 例如bloc
• 或Riverpod
• 或RxDart
• 或Redux

瞭解如何準備應用釋出

• 閱讀Android、iOS、Linux 和Web 的指南
• 有一個包可以幫助您製作啟動器圖示

檢視 Flutter DevTools

• 閱讀概述
• 瞭解如何使用檢查器來檢查您的 Widget 並診斷佈局問題
• 閱讀有關效能、CPU 和記憶體分析以及檢查應用大小的工具指南

回饋社群

• 加入社群！
• • 在Flutter 聚會上做志願者
  • 在StackOverflow 上回答一些問題
  • 在GitHub 上建立一個開源應用，並將其釋出到itsallwidgets.com
• Flutter 依賴您！
• • 在flutter/flutter 中為您認為重要的問題投贊成票
  • 為社群維護的外掛或包做出貢獻

瞭解一些 Flutter 歷史

• Eric Seidel 的 Strange Loop 講座 或 他的 DartConf 講座（當時 Flutter 仍然被稱為“Sky！”）。
• Ian Hickson 關於Widget 為何存在的講座
• Adam Barth 關於Flutter 渲染管道的講座

• 閱讀Flutter 路線圖，瞭解 Flutter 的發展方向
• 檢視Dart 語言漏斗，瞭解 Dart 的發展方向

顯式動畫

• 嘗試執行動畫示例應用
• 閱讀有關Hero Widgets 和交錯動畫的指南
• 觀看 Flutter in Focus 系列中關於動畫的高階劇集。
• 檢視 Flutter Europe 關於正確進行動畫和實現複雜 UI 的講座

高階佈局/渲染

• 閱讀一些 Flutter 社群關於 CustomPainter 的部落格文章
• 閱讀 Romain 關於構建您自己的渲染物件的部落格文章

針對 iOS

• 訪問Cupertino Widget 庫
• 在VeggieSeasons 示例應用中檢視 Cupertino 包的實際應用
• 觀看 Google I/O 上使用 Flutter 為 iOS 構建的影片

進行一些桌面開發

• 檢視指南
• 嘗試桌面 Codelab

繫結到原生庫

• 閱讀有關在 Dart 和 Flutter 應用中使用 dart:ffi 連線到 C 風格庫的資訊，然後檢視示例應用
• 閱讀有關Dart 用於 Web 應用的 JS 互操作的資訊

聯合外掛

• 閱讀關於Flutter 聯合外掛的指南
• 檢視示例

嘗試將 Flutter 新增到現有應用

• 閱讀概述以及 Android 和 iOS 部分
• 使用新增到應用示例進行練習
• 嘗試使用 package:pigeon 生成新增到應用程式碼

生產中的應用

• 閱讀如何使用 Firebase Crashlytics 記錄錯誤和異常
• 瞭解產品風味和 Flutter
• 瞭解Flutter 的持續交付選項

回饋社群

• 建立或執行Flutter 聚會
• 閱讀如何為 Flutter SDK 做出貢獻
• 為重要的社群維護外掛或包做出貢獻
• 閱讀成為 Flutter Google 開發者專家