flutter-performance

Flutter パフォーマンス

低スペック端末（ローエンドの Android／旧型 iPhone）で、安定して 60 fps（1 フレームあたり 16 ms 以下、120 Hz では 8 ms 以下）を維持します。パフォーマンスはプロファイルモードで測定するものであり、主張するものではありません。再ビルドを減らし、描画コストを抑え、UI スレッドとラスタースレッドの両方を空けておくことで実現できます。

絶対に守るルール

1. 可能なものはすべて const にします。 const サブツリーは再ビルド時にスキップされます。フレームワークが同一性によって処理をショートカットするためです。prefer_const_constructors はエラーとして有効にしておきます。const にできるのにそうしていないリテラルは、好みの問題ではなく lint エラーです。
2. 再ビルドの範囲を、変更される最小のウィジェットまで絞ります。 1 つのフィールドが変わったときに、状態オブジェクト全体を対象に ref.watch(provider) してはいけません。provider.select((s) => s.field) で監視します。HUD のカウンターの更新で、重い兄弟ウィジェットを再ビルドしてはいけません。再ビルド範囲を絞ることは、ビルドスレッドのコストを下げる最も大きな手段です。
3. 長いコンテンツはすべて遅延読み込みにします。 変動するコンテンツや終わりのないコンテンツには、ListView.builder ／ GridView.builder ／スライバーを使います。ListView(children: items.map(...).toList()) は画面外の行もすべて最初にビルドします。ごく小規模で固定されたもの以外には使わないでください。
4. build() 内でコストの高い処理を行いません。 jsonDecode、ソート、正規表現、DateTime の計算、ファイルやネットワークへのアクセス、大規模なメモリ割り当ては避けます。build() は毎フレーム呼び出される可能性があります。Notifier／ViewModel で一度だけ計算し、不変の状態に結果をキャッシュします。
5. CPU 負荷の高い処理は UI アイソレートの外で行います。 大きなペイロードの解析、画像処理、数値計算には compute() または生成した Isolate を使います。UI スレッドをブロックすると必ずカクつきが発生します。ラスタースレッドでも防げません。
6. 画像のデコードサイズを表示領域に合わせます。 cacheWidth／cacheHeight または ResizeImage、適切な解像度のアセット、画面の初期表示範囲にある画像への precacheImage を使います。4000 px の画像を 100 px のボックスにデコードすると、メモリ使用量が急増し、低価格のスマートフォンでは OOM が発生します。
7. 目的を果たせる最も軽量なウィジェットを選びます。 Container より ColoredBox／DecoratedBox、余白には SizedBox、ホットパスでは Opacity ウィジェットより FadeTransition／AnimatedOpacity を使います。スクロールリスト内の ClipPath／saveLayer は避けてください。ラスタースレッド上にオフスクリーンバッファーが強制的に作られます。
8. コストの高い、独立して再描画されるサブツリー（アニメーション、チャート、ライブインジケーターなど）を RepaintBoundary で囲みます。 そのサブツリーの再描画によって、隣接する要素まで再ラスタライズされるのを防げます。あちこちに境界を追加しないでください。それぞれがメモリコストのかかるコンポジターのレイヤーになります。
9. コストの高い子ウィジェットは child: 経由で渡します。 AnimatedBuilder／ValueListenableBuilder／StreamBuilder は builder のみを再ビルドします。変更されないサブツリーは child: 経由で渡すことで、フレームごとではなく一度だけビルドされます。
10. リークを防ぐため、リソースを破棄します。 AnimationController、ジェスチャー認識器、ストリームのサブスクリプション、タイマー、TextEditingController、キャッシュは、ウィジェットでは dispose()、プロバイダーでは ref.onDispose で解放します。画面を離れた後も状態が残らないよう、セッションスコープの状態には autoDispose を使います。
11. 実機の低スペック端末で DevTools を使い、PROFILE モードで測定します。 デバッグ時の計測値には意味がありません（JIT、アサーション）。UI スレッドだけでなくラスタースレッドも確認します。saveLayer／ぼかし／クリップのコストは Dart ではなく、ラスタースレッドに現れます。測定せずに主張したフレーム予算の数値を、リリース版に持ち込んではいけません。

再ビルド範囲を絞る

状態オブジェクト全体ではなく、変更される単一のフィールドを監視します。

// Rebuilds only when the count changes, not on every OrderState mutation.
class OrderBadge extends ConsumerWidget {
  const OrderBadge({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(orderProvider.select((s) => s.items.length));
    return Text('$count');
  }
}

.select はパブリッシュのたびにセレクターを実行しますが、選択された値の == が変わった場合にのみ再ビルドします。そのため、入力には実際の等価性を持つ不変の値を使う必要があります。watch／read／listen の使い分けや、family と autoDispose については state-management-riverpod を参照してください。

コストの高い子ウィジェットをアニメーションループの外に保つ

// The card is built once; only the transform recomputes each tick.
AnimatedBuilder(
  animation: _controller,
  child: const ProductCard(),
  builder: (_, child) =>
      Transform.scale(scale: _controller.value, child: child),
);

遅延読み込みリストとサイズ指定済み画像

// Lazy — only visible rows are built.
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, i) => ItemTile(item: items[i]),
);

// Decode to the slot, not the source resolution.
Image.asset('assets/hero.png', cacheWidth: 240);

CPU 負荷の高い処理を UI アイソレートの外で行う

// parseItems is a top-level or static function (isolate entry-point rules).
final items = await compute(parseItems, jsonString);

カスタム描画

CustomPainterでは、paint()でメモリー割り当てを一切行わず、不変のシーン値を1回比較するだけのshouldRepaintを実装し、ティッカー内のsetStateではなく、repaint:にListenable（AnimationController）を指定します。この方法についてはcustom-canvas-and-gesturesで説明しています。ここで押さえておくべきパフォーマンス上の重要なルールは、paint()内でPaint／Path／Gradientを絶対に割り当てないことです。ペインターのフィールドとして保持し、コストの低いプロパティだけを変更してください。

プロファイリングのワークフロー

1. 実機でflutter run --profileを実行します。
2. DevTools -> Performanceを開き、カクつきを再現しながら記録します。
3. 予算を超えた各フレームについて、所要時間がBuild、Layout、Rasterのどこで発生しているかを確認します。
   • Buildが重い場合 -> .selectで再ビルドの範囲を絞り、constを追加し、build()の外に処理を移します。
   • Rasterが重い場合 -> Opacity／クリップ／saveLayerを減らし、RepaintBoundaryを追加し、シェーダーを簡素化します。
4. 「Track widget rebuilds」を使い、再ビルドが多すぎるウィジェットを見つけます。
5. ボトルネックを1つ修正して、再測定します。修正前後を測定せずに最適化してはいけません。

アンチパターン

• デバッグモードでパフォーマンスを判断する — JITとアサーションにより、計測時間は当てになりません。常にプロファイルモードと実機を使ってください。
• プロファイルデータなしで時期尚早な最適化をする — 複雑さが増すだけで、問題は隠せません。まず測定してください。
• ツリーの上位でsetState()を呼び、小さな変更のために画面全体を再ビルドする — 状態の範囲を狭めてください。
• リーフウィジェットでオブジェクト全体にref.watch(provider)を使い、変更されたのは1つのフィールドだけ — .selectを使ってください。
• 長いコンテンツや長さが不定のコンテンツにListView(children: [...].toList())を使う — 画面外の行もすべてビルドされます。
• build()内でjsonDecode／ソート／DateTimeの計算／正規表現を実行する — 毎フレーム実行される可能性があります。ViewModelで事前に計算してください。
• スクロールリストのフェードにOpacityウィジェットを使う — saveLayerが強制されます。FadeTransitionを使うか、色を使ってフェードさせてください。
• 小さなウィジェットにフル解像度の画像をデコードする — メモリー使用量が急増し、低価格帯のスマートフォンではOOMが発生します。
• UIアイソレートで大きなペイロードを解析したり、負荷の高いループを実行する — フレームが停止します。computeを使ってください。
• あらゆるものにRepaintBoundaryを付ける — レイヤーのメモリー使用量が膨らみます。個別に再描画されるサブツリーの周囲に必要な場合だけ使ってください。
• 高コストな子ウィジェットをchild:で渡さずに、AnimatedBuilder／StreamBuilderで再ビルドする。
• デバウンスなしでキー入力のたびに再ビルドする、または上限のないキャッシュ／リスナーによるリーク。
• paint()内でPaint／Pathを割り当てる — フレームごとにガベージが発生します。フィールドとして保持してください。

完了の定義

• 適用可能な箇所すべてにconstを適用し、prefer_const_constructorsの警告がない。
• .selectで再ビルドの範囲を限定し、あるウィジェットのティックによって重い兄弟ウィジェットが再ビルドされない。
• 長いリストや可変長のリストが遅延読み込みされる（.builder／スライバー）。
• build()内にI/O、解析、負荷の高い計算がなく、大きな処理はcompute／Isolateで実行される。
• 画像のサイズが表示サイズに合わせられ（cacheWidth／ResizeImage）、ファーストビューの画像が事前キャッシュされる。
• 適切な中で最も低コストなウィジェット／エフェクトを選び、RepaintBoundaryを必要な箇所だけに使い、高コストな子ウィジェットをchild:で渡す。
• すべてのCustomPainterがpaint()内で何も割り当てず、shouldRepaintが値を1回比較するだけである。
• コントローラー、認識器、サブスクリプション、タイマーが破棄され、スコープ付きセッション状態がautoDisposeされ、リークがない。
• 実機でプロファイルモードを使いDevTools経由で測定し、UIスレッドとラスタースレッドの両方が予算内で、16 msを超えるフレームがなく、その主張が記録で裏付けられている。

関連するスキル

• state-management-riverpod — watch／read／listenの使い分け、.select、familyとautoDispose、.selectが正しく機能する不変の状態。
• widget-composition — _buildXメソッドよりも小さなconst Widgetクラスを使うこと、破棄の徹底、最も低コストなウィジェットの選択。
• custom-canvas-and-gestures — メモリー割り当てのないpaint()、値を1回比較するだけのshouldRepaint、repaint:のListenable。
• testing-strategy — 重い計算をUIアイソレート外でテスト可能にする、クロックを注入した純粋なコア。

参考資料

• Flutter — パフォーマンスのベストプラクティス
• Flutter — パフォーマンスのプロファイリング／UI パフォーマンス
• Flutter — 並行処理とアイソレート／compute
• Flutter — Impeller レンダリングエンジン
• Flutter API — RepaintBoundary
• Flutter API — ResizeImage／cacheWidth
• Riverpod — select を使った再ビルドのフィルタリング