flutter-dev
建構跨平台 Flutter 應用程式
建構高品質的跨平台應用程式需要掌握眾多 Flutter 模式與狀態管理方法。此技能提供關於 Widget 模式、Riverpod 與 Bloc 狀態管理、GoRouter 導航、效能優化及平台特定實作的結構化指導。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「flutter-dev」。 展示如何設定帶有認證守衛的 GoRouter
預期結果:
- 在 GoRouter 中使用 redirect 函式來檢查認證狀態
- 為登入、首頁與受保護頁面定義路由路徑
- 實作 redirect 將未認證的使用者導向登入頁面
- 在認證重新導向期間保留導航狀態
正在使用「flutter-dev」。 如何測試基於 Bloc 的 Flutter Widget？
預期結果:
- 使用 pumpWidget 搭配 ProviderScope 包裝來編寫 Widget 測試
- 使用 Mocktail 模擬 Repository 依賴項
- 使用 find 與 tap 方法觸發使用者互動
- 使用 expect 斷言驗證預期的 UI 狀態變更
安全審計
安全This skill consists entirely of markdown documentation files (SKILL.md and 12 reference files) containing Dart/Flutter code examples and development best practices. The static analyzer flagged 583 patterns, but all are false positives caused by misinterpreting markdown code fence backticks as shell commands and treating documentation content as executable code. No actual scripts, network calls, filesystem operations, or external commands are present. The skill is safe to publish.
品質評分
你能建構什麼
行動應用程式初始架構
從一開始就建立具備功能導向目錄結構、GoRouter 導航與 Riverpod 狀態管理的全新 Flutter 專案。
狀態管理遷移
將現有的 Flutter 應用程式從 setState 遷移至 Riverpod 或 Bloc，以實現更好的狀態組織與可測試性。
效能優化審查
使用 DevTools 效能分析、const 優化與 RepaintBoundary 模式來識別並修復效能瓶頸。
試試這些提示
協助我設定一個全新的 Flutter 專案，採用功能導向的目錄結構。包含 GoRouter 用於導航，Riverpod 用於狀態管理。展示主入口點與一個基本功能資料夾。
向我展示如何使用 Riverpod 實作使用者認證流程。包含用於認證狀態的 StateNotifierProvider、帶有驗證功能的登入表單，以及成功後導航至首頁面的功能。
檢視此 Flutter Widget 樹並識別效能問題。建議何處應使用 const 建構子、RepaintBoundary 與 ListView.builder。說明每项優化所帶來的影響。
建立一個 Dio HTTP 用戶端設定，包含認證攔截器、錯誤處理與重試邏輯。包含用於 API 呼叫的 Repository 模式，並展示如何將其與 Riverpod 提供者整合。
最佳實務
- 在所有靜態 Widget 上使用 const 建構子，以避免不必要的重建並降低記憶體使用量
- 選擇 Riverpod 用於簡單的狀態管理與依賴注入，選擇 Bloc 用於複雜的事件驅動狀態流程
- 在優化前先使用 Flutter DevTools 的 profile 模式進行分析，以識別實際的效能瓶頸
避免
- 避免使用 setState 管理多個 Widget 依賴的共享狀態。請改用狀態管理解決方案
- 不要在 build 方法中放置 API 呼叫或大量運算。請使用 providers 或 isolates 處理非同步工作
- 絕不要在靜態 Widget 上省略 const 建構子。缺少 const 會阻止 Flutter 跳過未變更的 Widget 子樹