本番環境対応のDartおよびFlutterパターンは、null安全性、不変状態、非同期構成、ウィジェットアーキテクチャ、人気のある状態管理フレームワーク(BLoC、Riverpod、Provider)、GoRouterナビゲーション、Dioネットワーキング、Freezedコード生成、クリーンアーキテクチャをカバー。
Install
npx skills add https://github.com/affaan-m/ecc --skill dart-flutter-patternsSKILL.md
Dart/Flutterパターン
使用時期
次の場合にこのスキルを使用:
- 新しいFlutter機能を開始し、状態管理、ナビゲーション、またはデータアクセスのイディオマティックパターンが必要
- Dartコードのレビューまたは作成とnull安全性、シール型、非同期構成のガイダンスが必要
- 新しいFlutterプロジェクトをセットアップしBLoC、Riverpod、またはProviderのうち選択
- 安全なHTTPクライアント、WebView統合、ローカルストレージを実装
- FlutterウィジェットEt、Cubit、またはRiverpodプロバイダーのテストを作成
- GoRouterを認証ガードでワイヤリング
動作方法
このスキルは、懸念事項で整理されたコピーペーストの準備ができたDart/Flutterコードパターンを提供:
- Null安全性 —
!を避ける、?./??/パターンマッチングを好む - 不変状態 — シール型、
freezed、copyWith - 非同期構成 — 並行
Future.wait、await後の安全なBuildContext - ウィジェットアーキテクチャ — クラスに抽出(メソッドではなく)、
const伝播、スコープ付きリビルド - 状態管理 — BLoC/Cubityベント、Riverpodノーティファイアおよび派生プロバイダー
- ナビゲーション —
refreshListenable経由の反応型認証ガード付きGoRouter - ネットワーキング — インターセプタ付きDio、ワンタイム再試行ガード付きトークンリフレッシュ
- エラーハンドリング — グローバルキャプチャ、
ErrorWidget.builder、crashlyticsワイヤリング - テスト — ユニット(BLoC test)、ウィジェット(ProviderScopeオーバーライド)、モック上のフェイク
例
// シール状態 — 不可能な状態を防止
sealed class AsyncState<T> {}
final class Loading<T> extends AsyncState<T> {}
final class Success<T> extends AsyncState<T> { final T data; const Success(this.data); }
final class Failure<T> extends AsyncState<T> { final Object error; const Failure(this.error); }
// 反応型認証リダイレクト付きGoRouter
final router = GoRouter(
refreshListenable: GoRouterRefreshStream(authCubit.stream),
redirect: (context, state) {
final authed = context.read<AuthCubit>().state is AuthAuthenticated;
if (!authed && !state.matchedLocation.startsWith('/login')) return '/login';
return null;
},
routes: [...],
);
詳細については、ドキュメントを参照してください。
Related skills
vercel-react-native-skillsvercel-labs224KReact Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.firebase-crashlyticsfirebase117KComprehensive guide for Firebase Crashlytics, including provisioning and SDK usage. Use this skill when the user needs help setting up Crashlytics, adding crash reporting, or using the Crashlytics SDK in their application.xcode-project-setupfirebase117KSafely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).animate-expoemilkowalski70KBuild animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web a