本エントリではListTileを用いて簡単にリストのアイテムを作成する方法を説明する。

ListTitleとは

ListTileは高さが固定されたリスト用のウィジェット。指定の位置にTextやIconなどを配置でき、簡単にそれらしいリストのアイテムが作成できる。

例えばLINEのトーク画面みたいなUIがListTileで実現できる。

使用頻度の高いプロパティ

実際にリストのアイテムを作成する前に、事前知識としてListTileで使用頻度の高いプロパティについて説明する。

説明用としてListTileで上画像のウィジェットを作成した。この画像をベースに説明する。

titleプロパティに渡したウィジェットは、画像では「大谷翔平」の位置に表示される。 Textウィジェットなどを渡してリストアイテムのタイトルを表示することが多い。 subtitleプロパティがnullの場合はリストアイテムの縦方向中央に配置される。

subtitleプロパティに渡したウィジェットは、画像では「今日もホームラン打ったよ」の位置に表示される。

Textウィジェットなどを渡してリストアイテムの捕捉情報を表示することが多い。

leadingプロパティに渡したウィジェットは、画像では左端のアバター画像の位置に表示される。

リストアイテムを表すアイコン画像などを配置することが多い。

trailingプロパティに渡したウィジェットは、画像では「7/28」の位置に表示される。

ListTileをタップした際のイベントハンドラを渡す。

先ほど説明で使用した

を作成する方法を説明する。

実際のコードは次の通り。

leadingにはアバター画像としてCircleAvatarを指定している。 title、subtitle、trailingにはそれぞれTextウィジェットを渡し、全体としてLINEのUIっぽくした。

またonTapには空の無名関数が渡されている。例えばLINEっぽくする場合、ここにページ遷移のためにNavigator.of(context).push(...)などの処理を記述したりする。