【Flutter】 Widgetにconstをつけて無駄な描画を防ぐ

今回は、FlutterのWidgetにつけるconstの意味について解説していきます。

Flutterのビルドパフォーマンスに影響する内容ですので、ぜひ最後までご覧いただければと思います。

まず初めにWidgetにconstをつけるとはどういうコードのことを指しているかを説明しておきます。

constをWidgetにつける場面は以下のような時があります。

build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('pRyogram')),
    body: const SizedBox(height: 20),
  );
}

このようなTextやSizedBoxの前に書かれているconstの意味を今回は取り扱っていきます。

Widgetにつけるconstの理由はビルドパフォーマンスを上げることにあります。

StatefulWidgetのsetStateなどでの画面の再描画は、buildメソッドの中に書かれているWidgetたちを新しいインスタンスとして生成することでUI情報を更新しています。

この時constをつけていない場合はbuild内に書かれている全てのWidget（内容が変更されていないWidgetも含まれている）の新しいインスタンスを作成することになります。

もし内容を変更していないWidget（例えば余白を管理しているSizedBoxなど）が含まれている場合は、そのWidgetにconstをつけることで元々作っていたインスタンスを再利用することができるようになります。

これによって無駄なインスタンスの生成を行わずに済むのでビルドパフォーマンスが向上するというわけです。

最近ではlinterの導入により、constで扱えるWidgetにはconstをつけるように警告を出してくれるようになっているので、その際はめんどくさがらずにconstをつけることをおすすめします。

おわりに

今回は、FlutterのWidgetにつけるconstの意味について解説させていただきました。

私は、linterの登場でWidgetにconstをつける習慣ができていたのですがあまり深く意味を理解せずに実装していました。

なんとなくビルドパフォーマンスが上がるらしいからつけておこうという気持ちでしたが意味を理解した時にこれはつけておくべきだなと確信しました。

ぜひみなさんも簡単に排除できる無駄な描画は無くして、ビルドパフォーマンスを上げていきましょう。

当ブログではFlutterなどプログラミングの学習に関するコンテンツを発信しております。

Flutterでのドラッグ&ドロップの実装なども興味がありましたら合わせてご覧くださいませ。

最後まで読んでくださりありがとうございました。