🤖

Flutter .builderの使いどころ@初心者

2024/10/05に公開

.builderの使い処について。

リストを表示する際に、ボケっと.builderを使用していたり、for文で表示したりしてました。
理解が足りてないなと思いまして少し深堀してみた。

.builderウィジェットとは?

下記のようなwidgetを指します。

  • ListView.builder
  • GridView.builder

https://api.flutter.dev/flutter/widgets/ListView/ListView.builder.html

https://api.flutter.dev/flutter/widgets/GridView-class.html

.builderウィジェットの利点を調べてみた。

  • 遅延レンダリング(オンデマンドビルド)
    必要なときに必要なアイテムだけをビルド。
    .builderを使用すると、スクロールなどで表示が必要になったときにだけウィジェットがビルドされる。これにより、初期レンダリング時の負荷が軽減され、パフォーマンスが向上します。

【 必要なときに必要なアイテムだけをビルド 】

  • 大量のデータに対するパフォーマンスの最適化
    メモリ効率の向上。一度に全てのウィジェットをメモリに保持しないため、大量のデータを扱う場合でもメモリ消費が抑えられる。

【 アプリがヌルヌル動く 】

  • 無限スクロールや動的データの扱い
    アイテム数が不定の場合に適している。
    データの量が増減する場合でも、itemCountを動的に変更することで対応可能。
    無限スクロールの実装が容易。
    末尾に達したときに新しいデータをロードし、リストに追加することが簡単。

【 無限スクロールも作れちゃう 】

.builderじゃないList表示について調べてみた

例えば、Column、for文、SingleChildScrollViewでリスト表示ができます。
表示することはできますが、利用方法によっては不利な点が多い。

全ウィジェットを一度にビルドする

  • Column + for文の場合
    全てのウィジェットが一度にビルドされるため、データ量が多いと、初期レンダリングに時間がかかり、パフォーマンスが低下。

  • Column自体はスクロールをサポートしない
    スクロールが必要な場合、SingleChildScrollViewでラップする必要がある。
    しかし、SingleChildScrollViewは全ての子ウィジェットを一度にビルドするため、パフォーマンス面で不利。

一度にすべてを作成するため、作成量が多いとそれだけパフォーマンスが下がってしまう。

要するに、
【 必要なときに必要なアイテムだけをビルドできない 】
【 アプリがヌルヌル動かない 】
【 無限スクロールも作れない 】となる。

個人開発ではよいが、大規模開発の様なアプリではユーザーに不利益が起こってしまいます。

そうなると、アプリを利用しなくなる→収益が下がるとなるわけです。

少量のリスト表示なら問題ないが、大量の表示に関しては.builderでの作成をした方がおすすめですね。

利用用途で使い分けるのがベスト!!
これを知っているだけでも違いますね。
調べてよかったです。

Discussion