Flutter – ListView.separatedで重複コードを改善

今回は、ListView.separatedの使い方をみてみようと思います。

ListViewとは

ListViewは直線的に配置されたスクロール可能なウィジェットのリストです。 一覧作成を行う場合は一番一般的なスクロールウィジェットとなります。

それでは細かいところを一つずつみていきましょう。

ListViewを構築するためには4つの方法があります。

1. デフォルトコンストラクタ(ListView())でリストを構築することが可能です。ただしインスタンス生成時に明示的に「List」を受け取るため、表示するリストが少ない場合に利用するのがいいでしょう。
2. 「ListView.builder」で作成すると、実際に表示されている子要素のみビルダーが呼び出されるため随時読み込みなど、多数(または無限)のリストを表示する場合に利用する作成方法です。
3. 「ListView.separated」で作成すると、表示する項目と項目の間に区切りをつけることが可能になります。ただしリストの件数が固定の場合にのみ利用できる作成方法です。
4. 「ListView.custom」で作成すると、「SliverChildDelegate」を追加してカスタマイズできます。

使ってみましょう

• separatorBuilder：区切り線を生成する関数です。パラメータとしてBuildContextと、何番目の区切り線なのかのindexを持っています。
• itemCount：リストアイテムの全体数をセットします。
• itemBuilder：リストアイテムを生成する関数です。パラメータとしてBuildContextと何番目のアイテムなのかのindexを持っています。

上記のソースコードはリストアイテムとして_buildDummyItem()のwidgetを使っており、リストアイテムの数は８個です。そして区切り線の色はグレーにセットしています。

BuildContextとは

widgetツリーで該当widgetの位置のことを言います。

全てのwidgetは自分のbuild contextを持っており、これはStatelessWidgetのbuild()関数、Stateのbuild()関数が返還するwidgetの親となります。

終わりに

今回は、ListView.separatedの使い方について調べてみました。

Flutterについて全てを勉強してからサイドプロジェクトをやっているわけではないので、ListViewについても理解で規定なのですが、一つ一つが面白いです。