Flutter Development

aj-geddes/useful-ai-prompts/skills/flutter-development

作者 aj-geddes3f5182cfd739無授權條款355 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫7 個月前更新

Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.

AI 產生的概覽

指導使用 Flutter 與 Dart 建置跨平台行動應用,涵蓋元件、狀態管理、導覽與 API 整合。

功能
提供使用 Dart 建置 Flutter 行動應用的指引,涵蓋元件組合、使用 Provider 或 BLoC 的狀態管理、導覽、API 整合與 Material Design。內容包含快速入門範例、專案結構、導覽與 Provider 狀態管理的參考指南,以及一個元件範本。也列出效能、測試與響應式設計的最佳實務。
適用情境
適用於使用 Flutter 建置 iOS 與 Android 應用、設計以元件為基礎的自訂介面、實作動畫,或設定導覽與狀態管理時。也適合希望取得一致跨平台體驗並透過熱重載快速迭代的團隊。
執行需求
不含指令碼,僅提供說明與參考文件。所述專案需要 Flutter SDK 與 Dart,以及 provider、http、go_router 等套件,API 整合另需網路存取。

Flutter Development

Table of Contents

Overview

Create high-performance, visually stunning mobile applications using Flutter with Dart language. Master widget composition, state management patterns, navigation, and API integration.

When to Use

  • Building iOS and Android apps with native performance
  • Designing custom UIs with Flutter's widget system
  • Implementing complex animations and visual effects
  • Rapid app development with hot reload
  • Creating consistent UX across platforms

Quick Start

Minimal working example:

dart
// pubspec.yamlname: my_flutter_appversion: 1.0.0
dependencies:  flutter:    sdk: flutter  provider: ^6.0.0  http: ^1.1.0  go_router: ^12.0.0
// main.dart with GoRouter navigationimport 'package:flutter/material.dart';import 'package:go_router/go_router.dart';
void main() {  runApp(const MyApp());}
class MyApp extends StatelessWidget {  const MyApp({Key? key}) : super(key: key);
  @override  Widget build(BuildContext context) {    return MaterialApp.router(// ... (see reference guides for full implementation)

Reference Guides

Detailed implementations in the references/ directory:

GuideContents
Project Structure & Navigation [blocked]Project Structure & Navigation
State Management with Provider [blocked]State Management with Provider
Screens with Provider Integration [blocked]Screens with Provider Integration

Best Practices

✅ DO

  • Use widgets for every UI element
  • Implement proper state management
  • Use const constructors where possible
  • Dispose resources in state lifecycle
  • Test on multiple device sizes
  • Use meaningful widget names
  • Implement error handling
  • Use responsive design patterns
  • Test on both iOS and Android
  • Document custom widgets

❌ DON'T

  • Build entire screens in build() method
  • Use setState for complex state logic
  • Make network calls in build()
  • Ignore platform differences
  • Create overly nested widget trees
  • Hardcode strings
  • Ignore performance warnings
  • Skip testing
  • Forget to handle edge cases
  • Deploy without thorough testing

來源與署名

來源:aj-geddes/useful-ai-prompts位於skills/flutter-development提交3f5182c

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架