jpskill.com
🛠️ 開発・MCP コミュニティ

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.

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
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
🪟 Windows (PowerShell)
$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. 1. 下の青いボタンを押して flutter-dev.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → flutter-dev フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

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 const constructors wherever possible
  • Extract static widgets to separate const classes
  • Use Key for list items (ValueKey, ObjectKey)
  • Prefer ConsumerWidget over StatefulWidget for 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 RepaintBoundary for complex animations
  • Offload heavy work with compute()

Checklist

Widget Best Practices

  • [ ] const constructors on all static widgets
  • [ ] Proper Key on list items
  • [ ] ConsumerWidget for 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` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。