Skip to main content

Flutter Performance

Overview​

Flutterでのパフォーマンスについてまとめているセクション。
Flutterは60fps（毎秒60フレーム）または対応デバイスでは120fpsで描画を行うことを目標にしている。
毎秒60フレームの場合ですと1フレームあたり約16ミリ秒、この間に次のフレームの準備が整わなければ表示がカクカクしたり、画面がフリーズしたように見える。

高速でないアプリとは​

  • 表示がカタカタしないアプリ
  • 画面がフリーズしないアプリ

Flutterでのパフォーマンス最適化​

ウィジェットのbuildメソッドが生成するウィジェット階層は少ないほど効率が良い。

1. buildメソッドで高コストな計算をしない​

buildメソッドは表示更新が必要なたびに繰り返し呼び出される。
そのためbuildメソッド内でコストのかかる処理は避けるべき。

2. buildメソッドで大きなウィジェットツリーを構築しない​

buildメソッドで構築するウィジェットツリーを小さくすることを意識する。

3. const修飾子を付与する​

const修飾子を付与することで、ウィジェットがコンパイル時定数として扱われ、常に同じインスタンスが使われるようになる。
そのためにbuildメソッドが実行されてもconst修飾子が付与されているウィジェットは再構築されない。

tip

const修飾子が定義されていてもstateが変更された時には再構築される。
const 修飾子はそのウィジェット以下を更新不可にするのではなく、先祖の再構築の影響を受けない効果があると覚えておく。

caution

Flutterが提供するウィジェットの中にはconstant コンストラクタを持たないものがある。
必要に応じて、constant コンストラクタを持つウィジェットに置き換えることを検討する

4. 独自のウィジェットクラスにconstantコンストラクタを実装する​

独自のウィジェットクラスを実装する場合は、constantコンストラクタを実装する。
これには2つの効果がある。

  1. const修飾子を付与することで祖先の再構築の影響を受けなくなること。
  2. constantコンストラクタを実装するためにウィジェットクラスをイミュータブ ルにする必要があり、ウィジェットが状態を持たないようになること。

5. Riverpodの状態監視は末端のウィジェットで行う​

Riverpodの状態監視を末端のウィジェットで行うことで、ウィジェットの再構築範囲を小さくすることができる。
StatefulWidgetの状態を末端に移動することと同じ考え方。

アプリのパフォーマンスを計測する​

高速なアプリに仕上がっているかどうかを確認する際は以下の点に注意しましょう。

  • Profileモードでアプリを実行すること
  • シミュレータなどは使用せず、実機でアプリを実行すること
tip

DebugビルドしたFlutterアプリはアサーションの処理が含まれている。
またビルド方式もまったく異なるためReleaseビルドしたアプリよりも遅い可能性が高い。
ProfileモードはほぼReleaseビルドと同等のパフォーマンスを発揮し、さらに最低限のデバッグ情報を含んでいるため、パフォーマンス計測に適している。
シミュレータやエミュレータもパフォーマンスの特性が異なるため計測には向かない。
サポート対象とする端末の中でも性能の低いものを選択し、実機計測するのが良いとされている。

Last updated on