flutter-dev

Flutter 開発ガイド

Flutter 3 と Dart を使用して、クロスプラットフォームアプリケーションを構築するための実践的なガイドです。実証済みのパターン、状態管理、パフォーマンス最適化に焦点を当てています。

クイックリファレンス

ウィジェットのパターン

目的	コンポーネント
状態管理（シンプル）	StateProvider + ConsumerWidget
状態管理（複雑）	NotifierProvider / Bloc
非同期データ	FutureProvider / AsyncNotifierProvider
リアルタイムストリーム	StreamProvider
ナビゲーション	GoRouter + context.go/push
レスポンシブレイアウト	LayoutBuilder + ブレークポイント
リスト表示	ListView.builder
複雑なスクロール	CustomScrollView + Slivers
フック	HookWidget + useState/useEffect
フォーム	Form + TextFormField + バリデーション

パフォーマンスのパターン

目的	解決策
再ビルドを防止する	const コンストラクター
選択的な更新	ref.watch(provider.select(...))
再描画を分離する	RepaintBoundary
遅延読み込みリスト	ListView.builder
負荷の高い計算	compute() アイソレート
画像のキャッシュ	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 を使用する
• redirect で認証ガードを設定する
• ディープリンクに対応する
• ルート間で状態を保持する

パフォーマンス

• プロファイルモードでテストする（flutter run --profile）
• <16ms のフレーム描画時間
• 不要な再ビルドがない（DevTools で確認）
• 画像をキャッシュし、サイズを調整する
• 負荷の高い計算をアイソレートで実行する

テスト

• UI コンポーネントのウィジェットテスト
• ビジネスロジックのユニットテスト
• ユーザーフローの統合テスト
• blocTest() による Bloc テスト

参考資料

トピック	参考資料
ウィジェットのパターン、const の最適化、レスポンシブレイアウト	ウィジェットのパターン
Riverpod のプロバイダー、ノティファイアー、非同期状態	Riverpod による状態管理
Bloc、Cubit、イベント駆動型の状態管理	Bloc による状態管理
GoRouter のセットアップ、ルート、ディープリンク	GoRouter によるナビゲーション
機能ベースの構成、依存関係	プロジェクト構成
プロファイリング、const の最適化、DevTools	パフォーマンスの最適化
ウィジェットテスト、統合テスト、モック	テスト戦略
iOS／Android／Web 固有の実装	プラットフォーム連携
暗黙的／明示的アニメーション、Hero、トランジション	アニメーション
Dio、インターセプター、エラー処理、キャッシュ	ネットワーキング
フォームのバリデーション、FormField、入力フォーマッター	フォーム
i18n、flutter_localizations、intl	ローカライズ

---

Flutter、Dart、Material Design、Cupertino は、それぞれ Google LLC および Apple Inc. の商標です。Riverpod、Bloc、GoRouter は、それぞれのメンテナーによるオープンソースパッケージです。