Codelabs & workshops

Flutter 的 codelabs 是一份為新手準備的入門指南。一些 codelabs 執行在 DartPad—上，這意味著你不需要下載任何東西就能夠輕鬆學習。

Flutter workshops 與 codelabs 類似，但由講師指導並始終使用 DartPad。 workshop 連結也會提供給你相關的 YouTube 影片，該影片會告訴你在哪裡可以找到相關的 DartPad 連結。

適用於初級開發者

如果你剛開始學習 Flutter，我們推薦你學習下面的 Codelab 之一：

• 你的第一個 Flutter 應用
  建立一個簡單的應用，來自動產生很酷的名字，比如: “newstay”、”lightstream”、”mainbrake” 或者 “graypine”。這是一個自適應應用，可以執行在手機端、電腦端和 Web 端。

• 編寫你的第一個 Flutter web 應用
  在 DartPad 中實現一個簡單的 web 應用（無需下載任何東西！），它將會展示一個具有三個文字輸入框的註冊介面。當用戶填完輸入框，一個進度條動畫將會展示在登陸區域的頂部。這篇 codelab 是為 web 量身定做的，但如果你下載並配置好了 Android 以及 iOS 的工具，那麼整個應用同樣也能執行在 Android 以及 iOS 的裝置上。

下一步

• 在 Flutter 中建構滾動體驗 (workshop)
  從一個執行簡單、直接滾動的應用程式入門，並透過使用 sliver 增強它以建立奇特的自訂滾動效果。

• Dart 空安全實戰 (workshop)
  基於 dart.tw.gh.miniasp.com 站點上的 空安全 codelab 的講師指導版 workshop。

• 如何使用 inherited widgets 管理應用程式狀態 (workshop)
  瞭解如何使用 InheritedWidget 類（Flutter 提供的 基礎狀態管理方案 之一）管理應用資料的狀態。

使用 Flutter 設計 UI

瞭解 Material Design 和 Flutter基本概念，例如佈局和動畫：

• Flutter 佈局基礎要點
  在網頁瀏覽器裡使用 DartPad 學習基礎的 Flutter 佈局知識。

• 如何使用 Flutter Inspector 除錯佈局
  (非官方產出的 codelab) 手把手的介紹如何使用 Flutter Inspector 和 Layout Explorer 除錯一些常見的佈局問題。

• 漸變動畫
  使用 DartPad 學習如何建立漸變動畫，併為你的介面加入動畫效果。

• 使用 Material Motion 為 Flutter 建構精美的過渡動畫
  瞭解如何使用 Material animations package 為名為 Reply 的 Material 應用新增預建構的過渡。

• 讓你的 Flutter 應用從平淡到出彩 新增內容
  學習如何使用 Material 3 的一些特性讓你的應用更出彩並加強其響應式特性。

• MDC Flutter 課程 1：Material 元件基礎
  學習使用 Material 核心元件建構一個簡單的應用。我們最終會建構一個售賣衣服和家居的電子商務應用－ Shrine，本節將從一個簡單的登陸頁面開始幫助你在 Flutter 上使用 Material 元件。

• MDC Flutter 課程 2：Material 元件結構和佈局
  學習如何在 Flutter 中使用 Material 樣式的結構和佈局。透過新增導航、結構和資料，繼續建構那個電子商務應用－ Shrine。

• MDC Flutter 課程 3：Material 元件主題、形狀、陰影和型別
  探尋如何透過 Flutter Material 元件讓你的產品更出眾，並透過你的設計傳達產品的品牌。我們會為我們的電子商務應用加入一個首頁展現所有的產品。

• MDC Flutter 課程 4：Material 元件進階
  改進設計並學習如何使用進階的元件 - backdrop 選單。本期我們將透過加入一個全屏（backdrop）樣式的選單，用於分類顯示你的產品。至此我們就結束了這個電子商務應用的建構

• 使用 Flutter 建構自適應應用
  瞭解如何使用 Flutter 建構一個可以執行在 Android、iOS、Web、Windows、macOS 和 Linux 上的自適應應用。

在 Flutter 應用中整合

學習如何使用在 Flutter 中使用其他技術產品/平台：

使用 Flutter 盈利

• 為 Flutter 應用加入 AdMob
  為一個名叫 Awesome Drawing Quiz 的小遊戲加入 AdMob 標語廣告、插頁式廣告和獎勵廣告。這是一個看圖猜字的遊戲。

• 向 Flutter 應用中新增 AdMob 廣告橫幅以及原生嵌入式廣告
  學習如何在一個旅行預約應用中嵌入 inline banner 以及原生廣告。

• 為 Flutter 應用新增應用內購買功能
  擴充一個使用 Dash 吉祥物作為貨幣的簡單遊戲應用程式，以提供三種類型的應用程式內購買：消耗品、非消耗品和訂閱。

Flutter 和 Firebase 結合

• Add a user authentication flow to a Flutter app using FirebaseUI
  Learn how to add Firebase authentication to a Flutter app with only a few lines of code.

• 在 Flutter 裡使用 Firebase (workshop)
  我們廣受歡迎的「在 Flutter 裡使用 Firebase」codelab 的講師指導版本（如下所列）。

• 在 Flutter 裡使用 Firebase
  學習如何在 Flutter 裡使用 Firebase 即時資料庫的功能，以及如何使用事物 (transaction) 同時更新不同裝置裡的資訊。

• Local development for your Flutter apps using the Firebase Emulator Suite
  Learn how to use the Firebase Emulator Suite when developing with Flutter. You will also learn to use the Auth and Firestore emulators.

Flutter 和 TensorFlow 結合

• Create a custom text-classification model with TensorFlow Lite Model Maker
  

• Create a Flutter app to classify texts with TensorFlow
  Learn how to run a text-classification inference from a Flutter app with TensorFlow Serving through REST and gRPC.

• Train a comment-spam detection model with TensorFlow Lite Model Maker
  Learn how to install the TensorFlow Lite Model Maker with Colab, How to use a data loader, and how to build a model.

Flutter 和其他技術結合

• 在 Flutter 應用中新增谷歌地圖
  在應用裡顯示谷歌地圖，接收網路傳回的資料，在地圖上顯示一個標示。

• 為你的 Flutter 應用新增 WebView
  使用 WebView Flutter 外掛，你可以將 WebView widget 新增到你的 Android 或 iOS Flutter 應用程式中。

• 使用 Dialogflow 和 Flutter 為移動裝置建構語音機器人 (workshop)
  Dialogflow 和 Flutter codelab 的講師指導版本（如下所列）。

• 使用 Dialogflow 和 Flutter 為 Android 建構語音機器人
  學習如何建構可以回答有關 Dialogflow 工具的最常見問題的移動式常見問題解答機器人。終端使用者可以透過移動裝置的內建麥克風與文字介面互動或流式傳輸語音互動。

• Building a game with Flutter and Flame
  NEW Learn how to create a platform game (featuring Dash or Sparky), using the Flame package.

• Using FFI in a Flutter plugin
  NEW Learn how to use Dart’s FFI (foreign function interface) library, ffigen, allowing you to leverage existing native libraries that provide a C interface.

測試

學習如何測試你的 Flutter 應用：

• 如何測試一個 Flutter 應用
  從一個簡單的應用開始，該應用使用 Provider package 來管理狀態，進而對提供應用進行單元測試 —— 為其中兩個小部件編寫小部件測試；使用 Flutter Driver 建立整合測試。

撰寫平台特別的程式碼

學習如何撰寫在特定的平台執行的程式碼，比如 iOS、Android、Web 和桌面端。

• 使用 Flutter 建構 iOS 風格的應用 建構 iOS 風格和體驗的購物應用 Shrine，建立多個選項卡，使用 provider package 來管理不同的頁面。

• 如何編寫一個 Flutter（原生平台）外掛
  編寫一個原生平台（iOS 和 Android）的音樂外掛，處理原生平臺音頻，然後建構一個範例應用，使用這個外掛製作一個音樂鍵盤。

• 在 Flutter Web 應用使用外掛
  建構一個完整的應用來顯示 GitHub 儲存庫的星星（收藏）數量，使用 Dart DevTools 開發者工具進行一些簡答的除錯，然後將應用部署到 Firebase 上。最後使用 Flutter 外掛啟動應用以及顯示隱私權政策。

• 編寫一個 Flutter 桌面應用
  建構一個 Flutter 桌面端應用，適用於 Windows、Linux 和 macOS。建構一個 Flutter 桌面應用以透過 GitHub APIs 來檢索你的程式碼儲存庫 (repo)，已分配的問題 (issue) 和拉取請求 (pull request)。本任務還有一部分內容，需要建立並使用外掛，讓原生 API 和桌面應用進行互動，併為 GitHub APIs 建構一個類別型安全的客戶端庫。

其他資源

檢視更多 Dart 相關的 codelab，請在 Dart 網站 上檢視 codelabs 頁面。

下面這些線上的課程也很不錯：

• 使用 Dart 完整開發 Flutter 應用