flutter-dev
Flutter cross-platform development guide covering widget patterns, Riverpod/Bloc state management, GoRouter navigation, performance optimization, and platform-specific implementations. Includes const optimization, responsive layouts, testing strategies, and DevTools profiling. Use when: building Flutter apps, implementing state management (Riverpod/Bloc), setting up GoRouter navigation, creating custom widgets, optimizing performance, writing widget tests, cross-platform development.
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o flutter-dev.zip https://jpskill.com/download/19694.zip && unzip -o flutter-dev.zip && rm flutter-dev.zip
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/19694.zip -OutFile "$d\flutter-dev.zip"; Expand-Archive "$d\flutter-dev.zip" -DestinationPath $d -Force; ri "$d\flutter-dev.zip"
完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
flutter-dev.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
flutter-devフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-18
- 取得日時
- 2026-05-18
- 同梱ファイル
- 13
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
Flutter開発ガイド
Flutter 3とDartでクロスプラットフォームアプリケーションを構築するための実践的なガイドです。実績のあるパターン、状態管理、パフォーマンス最適化に焦点を当てています。
クイックリファレンス
ウィジェットパターン
| 目的 | コンポーネント |
|---|---|
| 状態管理 (シンプル) | StateProvider + ConsumerWidget |
| 状態管理 (複雑) | NotifierProvider / Bloc |
| 非同期データ | FutureProvider / AsyncNotifierProvider |
| リアルタイムストリーム | StreamProvider |
| ナビゲーション | GoRouter + context.go/push |
| レスポンシブレイアウト | LayoutBuilder + breakpoints |
| リスト表示 | ListView.builder |
| 複雑なスクロール | CustomScrollView + Slivers |
| Hooks | HookWidget + useState/useEffect |
| フォーム | Form + TextFormField + validation |
パフォーマンスパターン
| 目的 | 解決策 |
|---|---|
| リビルドの防止 | const コンストラクタ |
| 選択的更新 | ref.watch(provider.select(...)) |
| 再描画の分離 | RepaintBoundary |
| 遅延リスト | ListView.builder |
| 重い計算 | compute() isolate |
| 画像キャッシュ | cached_network_image |
コア原則
ウィジェットの最適化
- 可能な限り
constコンストラクタを使用します。 - 静的ウィジェットを個別のconstクラスに抽出します。
- リスト項目には
Keyを使用します (ValueKey, ObjectKey)。 - 状態を持つウィジェットには
StatefulWidgetよりもConsumerWidgetを優先します。
状態管理
- 依存性注入とシンプルな状態にはRiverpodを使用します。
- イベント駆動型ワークフローと複雑なロジックにはBloc/Cubitを使用します。
- 状態を直接変更せず (新しいインスタンスを作成します)、常にイミュータブルにします。
- リビルドを最小限に抑えるために
select()を使用します。
レイアウト
- 8pt間隔の増分 (8, 16, 24, 32, 48) を使用します。
- レスポンシブブレークポイント: モバイル (<650)、タブレット (650-1100)、デスクトップ (>1100) を設定します。
- 柔軟なレイアウトですべての画面サイズをサポートします。
- Material 3 / Cupertinoのデザインガイドラインに従います。
パフォーマンス
- 最適化の前にDevToolsでプロファイリングを行います。
- 60fpsのために16ms未満のフレーム時間を目標とします。
- 複雑なアニメーションには
RepaintBoundaryを使用します。 compute()で重い処理をオフロードします。
チェックリスト
ウィジェットのベストプラクティス
- [ ] すべての静的ウィジェットに
constコンストラクタを使用しています。 - [ ] リスト項目に適切な
Keyを設定しています。 - [ ] 状態に依存するウィジェットに
ConsumerWidgetを使用しています。 - [ ]
build()メソッド内でウィジェットを構築していません。 - [ ] 再利用可能なウィジェットを個別のファイルに抽出しています。
状態管理
- [ ] イミュータブルな状態オブジェクトを使用しています。
- [ ] 粒度の細かいリビルドのために
select()を使用しています。 - [ ] 適切なプロバイダースコープを設定しています。
- [ ] コントローラーとサブスクリプションを破棄しています。
- [ ] ローディング/エラー状態を処理しています。
ナビゲーション
- [ ] 型付きルートでGoRouterを使用しています。
- [ ] リダイレクトによる認証ガードを設定しています。
- [ ] ディープリンクをサポートしています。
- [ ] ルート間で状態を保持しています。
パフォーマンス
- [ ] プロファイルモードでテストしています (
flutter run --profile)。 - [ ] 16ms未満のフレームレンダリング時間を達成しています。
- [ ] 不要なリビルドがないことをDevToolsで確認しています。
- [ ] 画像がキャッシュされ、サイズが調整されています。
- [ ] 重い計算をアイソレートで行っています。
テスト
- [ ] UIコンポーネントのウィジェットテストを作成しています。
- [ ] ビジネスロジックのユニットテストを作成しています。
- [ ] ユーザーフローの統合テストを作成しています。
- [ ]
blocTest()でBlocテストを作成しています。
参考文献
| トピック | 参考文献 |
|---|---|
| ウィジェットパターン、const最適化、レスポンシブレイアウト | Widget Patterns |
| Riverpodプロバイダー、ノティファイア、非同期状態 | Riverpod State Management |
| Bloc、Cubit、イベント駆動型状態 | Bloc State Management |
| GoRouterセットアップ、ルート、ディープリンク | GoRouter Navigation |
| 機能ベースの構造、依存関係 | Project Structure |
| プロファイリング、const最適化、DevTools | Performance Optimization |
| ウィジェットテスト、統合テスト、モック | Testing Strategies |
| iOS/Android/Web固有の実装 | Platform Integration |
| 暗黙的/明示的アニメーション、Hero、トランジション | Animations |
| Dio、インターセプター、エラー処理、キャッシュ | Networking |
| フォーム検証、FormField、入力フォーマッター | Forms |
| i18n、flutter_localizations、intl | Localization |
Flutter、Dart、Material Design、およびCupertinoは、それぞれGoogle LLCおよびApple Inc.の商標です。Riverpod、Bloc、およびGoRouterは、それぞれのメンテナーによるオープンソースパッケージです。
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Flutter Development Guide
A practical guide for building cross-platform applications with Flutter 3 and Dart. Focuses on proven patterns, state management, and performance optimization.
Quick Reference
Widget Patterns
| Purpose | Component |
|---|---|
| State management (simple) | StateProvider + ConsumerWidget |
| State management (complex) | NotifierProvider / Bloc |
| Async data | FutureProvider / AsyncNotifierProvider |
| Real-time streams | StreamProvider |
| Navigation | GoRouter + context.go/push |
| Responsive layout | LayoutBuilder + breakpoints |
| List display | ListView.builder |
| Complex scrolling | CustomScrollView + Slivers |
| Hooks | HookWidget + useState/useEffect |
| Forms | Form + TextFormField + validation |
Performance Patterns
| Purpose | Solution |
|---|---|
| Prevent rebuilds | const constructors |
| Selective updates | ref.watch(provider.select(...)) |
| Isolate repaints | RepaintBoundary |
| Lazy lists | ListView.builder |
| Heavy computation | compute() isolate |
| Image caching | cached_network_image |
Core Principles
Widget Optimization
- Use
constconstructors wherever possible - Extract static widgets to separate const classes
- Use
Keyfor list items (ValueKey, ObjectKey) - Prefer
ConsumerWidgetoverStatefulWidgetfor state
State Management
- Riverpod for dependency injection and simple state
- Bloc/Cubit for event-driven workflows and complex logic
- Never mutate state directly (create new instances)
- Use
select()to minimize rebuilds
Layout
- 8pt spacing increments (8, 16, 24, 32, 48)
- Responsive breakpoints: mobile (<650), tablet (650-1100), desktop (>1100)
- Support all screen sizes with flexible layouts
- Follow Material 3 / Cupertino design guidelines
Performance
- Profile with DevTools before optimizing
- Target <16ms frame time for 60fps
- Use
RepaintBoundaryfor complex animations - Offload heavy work with
compute()
Checklist
Widget Best Practices
- [ ]
constconstructors on all static widgets - [ ] Proper
Keyon list items - [ ]
ConsumerWidgetfor state-dependent widgets - [ ] No widget building inside
build()method - [ ] Extract reusable widgets to separate files
State Management
- [ ] Immutable state objects
- [ ]
select()for granular rebuilds - [ ] Proper provider scoping
- [ ] Dispose controllers and subscriptions
- [ ] Handle loading/error states
Navigation
- [ ] GoRouter with typed routes
- [ ] Auth guards via redirect
- [ ] Deep linking support
- [ ] State preservation across routes
Performance
- [ ] Profile mode testing (
flutter run --profile) - [ ] <16ms frame rendering time
- [ ] No unnecessary rebuilds (DevTools check)
- [ ] Images cached and resized
- [ ] Heavy computation in isolates
Testing
- [ ] Widget tests for UI components
- [ ] Unit tests for business logic
- [ ] Integration tests for user flows
- [ ] Bloc tests with
blocTest()
References
| Topic | Reference |
|---|---|
| Widget patterns, const optimization, responsive layout | Widget Patterns |
| Riverpod providers, notifiers, async state | Riverpod State Management |
| Bloc, Cubit, event-driven state | Bloc State Management |
| GoRouter setup, routes, deep linking | GoRouter Navigation |
| Feature-based structure, dependencies | Project Structure |
| Profiling, const optimization, DevTools | Performance Optimization |
| Widget tests, integration tests, mocking | Testing Strategies |
| iOS/Android/Web specific implementations | Platform Integration |
| Implicit/explicit animations, Hero, transitions | Animations |
| Dio, interceptors, error handling, caching | Networking |
| Form validation, FormField, input formatters | Forms |
| i18n, flutter_localizations, intl | Localization |
Flutter, Dart, Material Design, and Cupertino are trademarks of Google LLC and Apple Inc. respectively. Riverpod, Bloc, and GoRouter are open-source packages by their respective maintainers.
同梱ファイル
※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。
- 📄 SKILL.md (5,111 bytes)
- 📎 references/animations.md (12,863 bytes)
- 📎 references/bloc-state.md (6,765 bytes)
- 📎 references/forms.md (17,424 bytes)
- 📎 references/gorouter-navigation.md (6,244 bytes)
- 📎 references/localization.md (11,992 bytes)
- 📎 references/networking.md (13,946 bytes)
- 📎 references/performance.md (6,634 bytes)
- 📎 references/platform-specific.md (11,049 bytes)
- 📎 references/project-structure.md (6,723 bytes)
- 📎 references/riverpod-state.md (5,450 bytes)
- 📎 references/testing.md (8,651 bytes)
- 📎 references/widget-patterns.md (5,262 bytes)