Flutter 學習資源
這是我們非常受歡迎的「撰寫您的第一個 Flutter 應用程式」codelab 的 講師帶領版本。
建立一個簡單的隨機名稱產生器應用程式。 此應用程式具有響應式設計，可在行動裝置、桌面和網頁上運行。
探索 Dart 3 的新 records 與 patterns 功能。 學習如何在 Flutter 應用程式中使用這些功能，幫助您 撰寫更易讀且易維護的 Dart 程式碼。
從一個執行簡單捲動的應用程式開始， 並透過 slivers 增強它，打造華麗且自訂的捲動效果。
學習如何使用 Material 3 的一些功能， 讓您的應用程式變得美觀且具備響應式設計。
學習如何建立一個 Flutter 應用程式，結合 flutter_animate、 片段著色器與粒子場的強大功能。
學習如何建立一個 Flutter 應用程式，能夠根據運行的平台自動調整， 無論是 Android、iOS、網頁、Windows、macOS 或 Linux。
學習如何在 Flutter 中建立動畫效果。您將學習如何建立 隱式與顯式動畫，並自訂 導航轉場動畫、animations 套件以及 Android 的預測性返回。
學習如何使用 Material 動畫套件， 為名為 Reply 的 Material 應用程式加入預設轉場效果。
逐步說明如何使用 Flutter Inspector 與 Layout Explorer 偵錯常見的版面配置問題。
使用 DartPad（無需下載！）學習如何使用 隱式動畫，為您的 UI 元件加入動態與視覺效果。
透過建立一個簡單的應用程式，學習如何使用 Material 元件的核心功能。
學習如何在 Flutter 中使用 Material 進行結構與版面配置。 繼續在 MDC-101 介紹的電商應用程式中， 加入導覽、結構與資料。
探索 Flutter 的 Material 元件如何讓您 輕鬆展現產品特色，並透過設計表達品牌。
提升您的設計，學習使用進階元件 backdrop menu。
學習如何在名為 Awesome Drawing Quiz 的遊戲中加入 AdMob 橫幅廣告、 插頁式廣告與獎勵廣告，讓玩家猜測畫作名稱。
學習如何在旅遊訂票應用程式中實作內嵌橫幅與原生廣告， 列出可能的航班目的地。
擴充一個以 Dash 吉祥物為貨幣的簡單遊戲應用程式， 提供三種應用程式內購：消耗型、非消耗型與訂閱型。
學習如何只用幾行程式碼，為 Flutter 應用程式加入 Firebase 驗證。
在 Android 與 iOS 上建立活動 RSVP 與留言板聊天應用程式， 使用 Firebase Authentication 驗證使用者， 並透過 Cloud Firestore 同步資料。
學習如何使用 Flutter 與 Firebase Cloud Messaging 開發多平台應用程式， 整合 FCM 以在 Android、iOS 與網頁上收發訊息。
SoLoud 套件是一個免費且可攜式的音效引擎， 提供許多遊戲所需的低延遲與高效能音效。
本 codelab 指導您在 Flutter 與 Flame 遊戲中， 使用名為 Forge2D 的 2D 物理模擬，打造遊戲機制。
本 codelab 著重於建立文字拼圖遊戲， 並深入探討如何利用 Flutter 的背景處理， 產生大型交錯字詞網格。
使用 Flame 2D 遊戲引擎建立一個打磚塊遊戲， 並嵌入 Flutter 包裝器中。
在應用程式中顯示 Google 地圖，從網路服務取得資料， 並將資料以標記方式顯示在地圖上。
使用 WebView Flutter 插件，您可以在 Android 或 iOS Flutter 應用程式中 加入 WebView 元件。
學習如何使用 Dart 的 FFI（外部函式介面）函式庫 ffigen， 讓您能夠利用提供 C 介面的現有原生函式庫。
從一個使用 Provider 套件管理狀態的簡單應用程式開始。 對 provider 套件進行單元測試。為兩個元件撰寫 widget 測試。 使用 Flutter Driver 建立整合測試。
學習如何在 iOS 上為 Flutter 應用程式加入主畫面小工具。 可應用於主畫面、鎖定畫面或今日檢視。
建立一個 Flutter 桌面應用程式（Windows、Linux 或 macOS）， 存取 GitHub API， 並建立與使用插件以與原生 API 及桌面應用程式互動。
透過動畫將新路由從螢幕底部顯示進入，實現路由間的轉場效果。
學習如何使用彈簧模擬，將元件從拖曳點移回中心。
使用 AnimatedContainer 動畫化容器的大小、背景顏色和圓角。
AnimatedOpacity 元件可輕鬆實現透明度動畫。
結合 Drawer 元件與 Scaffold，建立具有 Material Design 抽屜的版面。
使用 Snackbar 元件向使用者顯示訊息。
在多個應用程式中使用同一字型。
建立一個清單，直向顯示兩欄，橫向顯示三欄。
將字型套用至整個應用程式或個別元件。
若要在應用程式中共用樣式，請使用主題。
分頁是行動應用程式常見的設計模式，符合 Material Design 或 Cupertino 指南。
根據應用程式下載狀態，建立可切換多種視覺狀態的下載按鈕。
建立頂層路由，以及嵌套於特定元件下的路由。
透過建立帶有圖片的卡片清單，實現視差捲動效果。
以銀色閃爍效果告知資料正在載入。
建立具有交錯動畫內容的抽屜選單，並在底部加入彈出按鈕。
建立可動畫顯示與隱藏的對話框輸入指示器。
建立可展開出其他動作按鈕的浮動操作按鈕。
當使用者長按時，建立拖曳互動效果。
學習如何為表單加入驗證功能。
本教學介紹如何建立並設計文字欄位。
以程式方式切換文字欄位的焦點。
使用回呼監聽 TextField 的變化。
學習如何取得使用者在文字欄位輸入的內容。
使用 games_services 套件為行動遊戲加入排行榜功能。
使用 cloud_firestore 套件實作遊戲的多人連線功能。
使用 google_mobile_ads 套件為應用程式或遊戲加入橫幅廣告。
使用 Inkwell 元件顯示漣漪動畫。
使用 GestureDetector 元件回應點擊與拖曳等基本操作。
學習如何使用 Dismissible 元件。
若要使用網址圖片，請使用 Image.network() 建構函式。
使用 FadeInImage 元件在圖片載入前顯示預設圖。
學習使用 GridView 元件。
學習在可捲動清單中橫向顯示項目。
建立含標頭與多個清單項目的清單。
在清單上方放置浮動應用程式列或導覽列。
學習使用 ListView 元件顯示項目。
使用 Listview.builder 建構函式處理長清單。
建立項目間有間距的清單。
使用 Hero 元件將元件從一個畫面動畫到另一個畫面。
本教學使用 Navigator 導覽至新路由。
建立命名路由並導覽至該路由。
傳遞參數至命名路由，並在該路由讀取參數。
在 Android 上設定深層連結。
為 iOS 設定通用連結。
使用 Navigator.pop 方法將資料從一個畫面返回至另一個畫面。
從一個畫面傳送資料至新畫面。
學習在應用程式中使用 HTTP。
HTTP 的授權標頭。
在應用程式中發送 HTTP POST 請求。
發送 HTTP PUT 請求。
發送 HTTP DELETE 請求。
連接並與 websocket 通訊。
學習使用 Dart 的 Isolate 物件。
使用 sqflite 套件。
使用 dart:io 函式庫與 path_provider 插件將檔案儲存至磁碟。
使用 shared_preferences 永續化資料。
播放儲存在檔案系統、資源或網路上的影片。
學習如何使用裝置相機。
回報錯誤至 Sentry 當機回報服務。
撰寫測試以記錄效能時間軸。
單元測試入門。
元件測試入門。
使用 Mockito 套件進行基本模擬。
本教學介紹 flutter_test 套件提供的 'find' 常數。
學習如何在元件測試中進行捲動。
學習如何在元件測試中檢查應用程式方向。
在元件測試中與元件互動。
以 SQL 將複雜的應用程式資料儲存至使用者裝置。
透過 Result 物件提升跨類別的錯誤處理。
以樂觀狀態提升應用程式的回應感受。
為應用程式某個功能實作離線優先支援。
以裝置上的鍵值儲存應用程式資料。
以 Command 類別簡化 view model 邏輯。
建議用於將 Flutter 添加到現有應用程式的方式。
一個 Flutter 範例應用程式，展示如何為 Android 設備實現動畫啟動畫面。
一個展示與 iOS App Clip 整合的範例專案。
一個 Flutter 範例應用程式，結合了原生 iOS UIViewController 與全螢幕 Flutter 視圖。
此範例文字編輯器展示了如何使用 TextEditingDeltas 和 DeltaTextInputClient 來擴展和收縮文字的樣式範圍。
展示如何轉換圖片的色彩比例和格式。
展示如何使用長時間運行的隔離執行緒。
展示如何在 Flutter 客戶端和 Dart 伺服器之間共享業務邏輯，使用 package:shelf。
此範例展示如何建立和自訂跨平台的上下文選單， 如行動裝置上的文字選擇工具列或桌面上的右鍵選單。
展示 Material 和 FluentUI 設計系統中的桌面功能。
展示如何根據 Gemini API 的輸出調用裝置上的 Flutter API。
一個展示不同類型表單和最佳實踐的範例。
一個使用 Flutter 編寫的開發者範例，展示如何使用 Gemini API 以自然語言與待辦事項清單互動。
展示 Flutter 的 Google 地圖插件。
一個 Flutter 範例應用程式，展示如何實現「無限清單」的使用者體驗模式。
一個展示使用隔離執行緒最佳實踐的範例應用程式。
一個展示如何使用 go_router API 處理常見導航場景的範例。
一個使用 google_apps_flutter 插件的範例地點追蹤應用程式。
此範例專案展示了一個 Flutter 應用程式， 如何在最大化應用程式程式碼重用的同時，遵循 Android 和 iOS 的不同設計模式。
使用 Provider 套件管理狀態的 Flutter 起始應用程式。
一個展示使用 Provider 套件進行狀態管理方法的 Flutter 範例應用程式。
一個簡單的 Flutter 碎片著色器專案。
一個展示如何開始建立桌面 Flutter 應用程式的計算器範例。
一個展示 Flutter 中不同測試類型的範例應用程式。
修改 Flutter 應用程式的 index.html，使其在自訂的 hostElement 中啟動。 這是最基本的嵌入範例。
一個簡單的 Angular 應用程式（和元件）， 複製了元素嵌入範例，但在 Angular 應用程式中實現。
一個展示如何使用 MethodChannel、EventChannel、BasicMessageChannel 和 MessageCodec 的 Flutter 範例應用程式。
一個解析命令列選項並從 GitHub 擷取資料的命令列應用程式。
展示 Dart 的擴展方法語法。
一系列簡單的範例，展示如何從 Dart 呼叫 C 函式庫。
命令列應用程式，展示如何使用 Dart 的隔離執行緒進行並行處理。
一個可以使用 dart compile exe 編譯為原生程式碼的命令列應用程式。
展示 Dart 在伺服器端運行的範例。
展示在 pub.dev 上發佈套件的最佳實踐。