Flutter:ListTile

Flutter
スポンサーリンク

はじめに

ListViewの基本に関しては以前触れましたが、今回はそのListViewの要素として非常に便利に使えるListTileについて紹介したいと思います。

Flutter:ListView
はじめに アプリでよく使うUIの1つにListViewがあります。 これはパーツを並べて表示範囲を超えてもスクロールして見ることができるUIです。 色々なパーツを並べることができて、かつListViewの要素を生成するためのメ...

 

ListTile

まずListTileとは、

ListViewの子ウィジェットとして使用でき、非常に整ったレイアウトのListViewを簡単に作れることとListViewの要素をタップした時などのイベントを容易に実装できるウィジェットです。

 

そんな便利なListTileについて使い方を解説していきます。

最後にサンプルコードを載せているので参考にしてください。

 

leading

左端にウィジェットを追加できます。

アイコンなどのウィジェットを追加することが多いです。

 

title

真ん中にウィジェットを追加します。

主にTextウィジェットなどで項目名などを入れます。

 

subtitle

titleよりも小さく薄く表示されるTextウィジェットを追加する場合などに使用します。

 

trailing

右端にウィジェットを追加します。

アイコンなどのウィジェットを追加することが多いです。

 

onTap

List項目をタップした時のイベントを追加できます。

 

onLongPress

List項目を長押しした時のイベントを追加できます。

onTap同様に追加できるので下のサンプルでは使っていません。

 

selected

Listが選択されているか真偽値で判断します。

trueが選択されている状態、falseが選択されていない状態です。

デフォルトではfalseが選択されています。

選択された状態だと見た目が変わり選択されていることがわかります。

 

サンプルコード

 

最後に

今回のサンプルコードでは同じようなコードをListTileの数だけ書いていてかなり無駄が多いです。

このような単純なListTileの場合は自動で生成されるようにコードを書くことができます。

次はその生成について紹介したいと思います。

 

コメント