description bug_report

Codelabs

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

適用於初級開發者

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

• 建立你的第一個 Flutter App (workshop) 新!
  我們非常受歡迎的「編寫你的第一個 Flutter App，第一部分」 codelab（如下所列）的講師指導版。

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

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

下一步

• Dart 3 中的 Records 和 Patterns
  新! 瞭解 Dart 3 中的新 records 和 patterns 屬性。學習如何在 Flutter 應用中使用它們來幫助你編寫更易讀、更易維護的 Dart 程式碼。

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

• Dart 空安全實戰 (workshop)
  由講師指導的 workshop，介紹 Dart 空安全型別系統的屬性。

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

使用 Flutter 設計 UI

瞭解 Material Design 和 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 中建立下一代 UI
  瞭解如何建立一個使用 flutter_animate、片段著色器和粒子場的 Flutter 應用。你將建立一個使用者介面，它會喚起我們在不編碼時都喜歡看的科幻電影和電視節目。

在 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 工具的最常見問題的移動式常見問題解答機器人。終端使用者可以透過行動裝置的內建麥克風與文字介面互動或流式傳輸語音互動。

• Flutter Flame 入門
  使用 Flame 2D 遊戲引擎製作一個 Breakout 克隆版，並將其嵌入 Flutter wrapper 中。你將使用 Flame 的 Effects 製作動畫和元件的移除，同時使用 google_fonts 和 flutter_animate package，讓整個遊戲看起來有著精良的設計。

• 在 Flutter 外掛中使用 FFI
  瞭解如何使用 Dart 的 FFI（外部函式介面）函式庫和 ffigen，讓你可以使用提供了 C 語言介面的現有原生函式庫。

• 使用 PaLM API 和 Flutter 創作有關 Google 產品的俳句 (haiku)
  瞭解如何建立一個使用 PaLM API 並根據 Google 產品名稱生成俳句 (haiku) 的應用。 PaLM API 可讓你訪問 Google 最先進的大語言模型。

測試

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

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

撰寫平台特別的程式碼

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

• 如何編寫一個 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 建立一個型別安全的用戶端函式庫。

• 為你的 Flutter 應用新增首頁小部件
  新 學習如何透過你的 Flutter 應用新增一個首頁小部件。小部件會展示在首頁、鎖屏頁以及今日預覽中。

其他資源

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

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

• 使用 Dart 完整開發 Flutter 應用