程式碼實驗室

Flutter 程式碼實驗室提供引導式、實作的程式碼撰寫體驗。部分程式碼實驗室可在 DartPad 中執行，無需下載！

如果您是 Flutter 新手，建議從下列其中一個程式碼實驗室開始

• 打造您的第一個 Flutter 應用程式 (工作坊)
  我們非常受歡迎的「撰寫您的第一個 Flutter 應用程式」程式碼實驗室的講師引導版本 (如下所列)。

• 您的第一個 Flutter 應用程式
  建立一個簡單的應用程式，自動產生酷炫的名稱，例如「newstay」、「lightstream」、「mainbrake」或「graypine」。這個應用程式具有回應性，可在行動裝置、桌機和網頁上執行。(這也取代了先前針對行動裝置的「撰寫您的第一個 Flutter 應用程式」的第一部分和第二部分程式碼實驗室。)

• 在網頁上撰寫您的第一個 Flutter 應用程式
  在 DartPad 中 (無需下載！) 實作一個簡單的網頁應用程式，該應用程式會顯示包含三個文字欄位的登入畫面。當使用者填寫欄位時，進度列會沿著登入區域的頂部動畫顯示。這個程式碼實驗室是專為網頁撰寫的，但如果您已下載並設定 Android 和 iOS 工具，完成的應用程式也能在 Android 和 iOS 裝置上運作。

• Dart 3 中的記錄和模式
  探索 Dart 3 的新記錄和模式功能。瞭解如何在 Flutter 應用程式中使用這些功能，協助您撰寫更易讀且更易於維護的 Dart 程式碼。

• 在 Flutter 中打造捲動體驗 (工作坊)
  從一個執行簡單、直接捲動的應用程式開始，並透過使用 slivers 來增強它，以建立精美且自訂的捲動效果。

• Dart 空值安全實戰 (工作坊)
  講師引導的工作坊，介紹啟用 Dart 空值安全型別系統的功能。

• 如何使用繼承的小工具管理應用程式狀態 (工作坊)
  瞭解如何使用 InheritedWidget 類別管理應用程式資料的狀態，這是 Flutter 提供的低階狀態管理類別之一。

瞭解 Material Design 和基本 Flutter 概念，例如版面配置和動畫

• 如何使用 Flutter Inspector 偵錯版面配置問題
  這不是官方的程式碼實驗室，而是逐步說明如何使用 Flutter Inspector 和版面配置瀏覽器偵錯常見的版面配置問題。

• 隱式動畫
  使用 DartPad (無需下載！) 瞭解如何使用隱含動畫為 UI 中的小工具新增動態效果並建立視覺效果。

• 使用 Material Motion for Flutter 打造精美轉換效果
  瞭解如何使用 Material 動畫套件，將預先建置的轉換效果新增至名為 Reply 的 Material 應用程式。

• 讓您的 Flutter 應用程式從乏味變得精美
  瞭解如何使用 Material 3 中的某些功能，讓您的應用程式更精美且更具回應性。

• MDC-101 Flutter：Material Components (MDC) 基礎知識
  透過使用核心元件建立簡單應用程式，瞭解使用 Material Components 的基礎知識。四個 MDC 程式碼實驗室會引導您建立名為 Shrine 的電子商務應用程式。您將從使用 MDC Flutter 的數個元件建立登入頁面開始。

• MDC-102 Flutter：Material 結構和版面配置
  瞭解如何在 Flutter 中使用 Material 來進行結構和版面配置。透過新增導覽、結構和資料，繼續建立在 MDC-101 中介紹的電子商務應用程式。

• MDC-103 Flutter：使用色彩、形狀、高度和類型進行 Material 主題設定
  探索 Material Components for Flutter 如何讓您輕鬆區分您的產品，並透過設計表達您的品牌。透過新增顯示產品的首頁，繼續建立您的電子商務應用程式。

• MDC-104 Flutter：Material 進階元件
  改善您的設計並瞭解如何使用我們進階的元件背景選單。透過新增帶有選單的背景 (可依選取的類別篩選產品) 來完成您的電子商務應用程式。

• Flutter 中的自適應應用程式
  瞭解如何建立可適應其執行平台的 Flutter 應用程式，無論是 Android、iOS、網頁、Windows、macOS 或 Linux。

• 在 Flutter 中建立新一代 UI
  瞭解如何建立使用 flutter_animate、片段著色器和粒子場強大的 Flutter 應用程式。您將打造出讓人想起我們在不撰寫程式碼時都喜歡觀看的科幻電影和電視節目的使用者介面。

瞭解如何將 Flutter 與其他技術搭配使用。

• 將 AdMob 廣告新增至 Flutter 應用程式
  瞭解如何將 AdMob 橫幅廣告、插頁式廣告和獎勵廣告新增至名為 Awesome Drawing Quiz 的應用程式，這是一款可讓玩家猜測繪圖名稱的遊戲。

• 將 AdMob 橫幅廣告和原生內嵌廣告新增至 Flutter 應用程式
  瞭解如何在列出可能航班目的地的旅遊預訂應用程式中實作內嵌橫幅廣告和原生廣告。

• 將應用程式內購新增至您的 Flutter 應用程式
  延伸一個使用 Dash 吉祥物作為貨幣的簡單遊戲應用程式，以提供三種應用程式內購類型：消耗性、非消耗性和訂閱。

• 使用 FirebaseUI 將使用者驗證流程新增至 Flutter 應用程式
  瞭解如何僅使用幾行程式碼，將 Firebase 驗證新增至 Flutter 應用程式。

• 瞭解 Flutter 的 Firebase (工作坊)
  我們非常受歡迎的「瞭解 Flutter 的 Firebase」程式碼實驗室的講師引導版本 (如下所列)。

• 認識適用於 Flutter 的 Firebase
  使用 Flutter 在 Android 和 iOS 上建立活動 RSVP 和留言簿聊天應用程式，使用 Firebase Authentication 驗證使用者，並使用 Cloud Firestore 同步資料。

• 使用 Firebase 模擬器套件在本機開發 Flutter 應用程式
  瞭解如何在搭配 Flutter 開發時使用 Firebase 模擬器套件。您也將瞭解如何使用 Auth 和 Firestore 模擬器。

• 使用 Firebase Cloud Messaging 為 Flutter 應用程式傳送和接收通知
  瞭解如何使用 Flutter 和 Firebase Cloud Messaging 開發多平台應用程式，整合 FCM 以在 Android、iOS 和網頁上傳送和接收訊息。

• 使用 SoLoud 為您的 Flutter 遊戲新增聲音和音樂—全新
  SoLoud 套件是一個免費且可攜式的引擎，可提供許多遊戲所需的低延遲和高效能聲音。在這個程式碼實驗室中，瞭解如何將 SoLoud 新增至您的遊戲。

• 使用 Flutter 和 Flame 建構 2D 物理遊戲—全新
  這個程式碼實驗室會引導您使用類似 Box2D 的 2D 物理模擬，稱為 Forge2D，在 Flutter 和 Flame 遊戲中打造遊戲機制。

• 使用 Flutter 建構文字謎題—全新
  這個程式碼實驗室的重點是建構文字謎題遊戲，並深入探討如何使用 Flutter 的背景處理來產生廣泛的縱橫字謎風格的互鎖文字網格。

• Flutter 的 Flame 簡介
  使用 Flame 2D 遊戲引擎建立 Breakout 複製品，並將其嵌入 Flutter 包裝函式中。您將使用 Flame 的效果來為元件加上動畫並移除元件，以及 google_fonts 和 flutter_animate 套件，使整個遊戲看起來設計精良。

• 使用 TensorFlow Lite Model Maker 建立自訂文字分類模型
  

• 建立 Flutter 應用程式以使用 TensorFlow 分類文字
  瞭解如何透過 REST 和 gRPC，從 Flutter 應用程式使用 TensorFlow Serving 執行文字分類推論。

• 使用 TensorFlow Lite Model Maker 訓練留言垃圾郵件偵測模型
  瞭解如何使用 Colab 安裝 TensorFlow Lite Model Maker、如何使用資料載入器以及如何建構模型。

• 將 Google 地圖新增至 Flutter 應用程式
  在應用程式中顯示 Google 地圖、從網路服務擷取資料，並將資料顯示為地圖上的標記。

• 將 WebView 新增至您的 Flutter 應用程式
  透過 WebView Flutter 外掛程式，您可以將 WebView 小工具新增至 Android 或 iOS Flutter 應用程式。

• 使用 Dialogflow 和 Flutter 建構行動語音機器人 (工作坊)
  Dialogflow 和 Flutter 程式碼實驗室的講師引導版本 (如下所列)。

• 使用 Dialogflow 和 Flutter 建構 Android 適用的語音機器人
  瞭解如何建構一個行動 FAQ 機器人，該機器人可以回答有關 Dialogflow 工具的大多數常見問題。終端使用者可以透過文字介面互動，或透過行動裝置的內建麥克風串流語音互動。

• 在 Flutter 外掛程式中使用 FFI
  瞭解如何使用 Dart 的 FFI (外部函式介面) 程式庫 ffigen，讓您能運用提供 C 介面的現有原生程式庫。

• 使用 PaLM API 和 Flutter 建立有關 Google 產品的俳句
  瞭解如何建立一個使用 PaLM API 根據 Google 產品名稱產生俳句的應用程式。PaLM API 可讓您存取 Google 最先進的大型語言模型。

瞭解如何測試您的 Flutter 應用程式。

• 如何測試 Flutter 應用程式
  從一個使用 Provider 套件管理狀態的簡單應用程式開始。單元測試 provider 套件。為兩個小工具撰寫小工具測試。使用 Flutter Driver 建立整合測試。

瞭解如何撰寫以特定平台 (例如 iOS、Android、桌機或網頁) 為目標的程式碼。

• 撰寫 Flutter 桌機應用程式
  建構可存取 GitHub API 以擷取您的存放區、已指派的問題和提取要求的 Flutter 桌機應用程式 (Windows、Linux 或 macOS)。作為這項工作的一部分，建立並使用外掛程式與原生 API 和桌機應用程式互動，並使用程式碼產生來為 GitHub API 建構類型安全用戶端程式庫。

• 將主畫面小工具新增至您的 Flutter 應用程式
  瞭解如何在 iOS 上的 Flutter 應用程式中新增主畫面小工具。這適用於您的主畫面、鎖定畫面或「今天」檢視。

除非另有說明，否則本網站上的文件會反映 Flutter 的最新穩定版本。頁面上次更新時間：2024-10-04。 檢視來源 或 回報問題。