【Flutter】ListTileの基本的な使い方

ListTile使い方
この記事がおすすめな人
  • Flutterアプリ開発初心者
  • 英語のFlutterドキュメントを読むのが難しい
  • ListTile Widgetの基本的な使い方が知りたい
ListTile (Flutter Widget of the Week)

ListTileを使えば、美しいリスト型のタイルを作ることができます。

\ Widgetの扱い方が不安な方はこちら! /

スポンサーリンク

ListTileの基本となるプロパティ

  • title:titleを指定
  • leading:titleの前に表示されるコンテンツを指定
  • trailing:titleの後に表示されるコンテンツを指定
  • subtitle:titleの下に表示される追加コンテンツを指定
  • contentPadding:枠の内側の余白を指定
  • dense:垂直方向に対する密度を指定
  • selected:ListTileが選択された時のBooleanの値がtrue、選択されていない時はfalse
  • tileColor:ListTileが選択されていない時のタイル色を指定(selectedがfalseの時)

title / leading / trailing / subtitle

ListTile(
  leading: Container(
    width: 100,
       color: Colors.red,
  ),
  title: Text('Flutter入門アカデミー'),
  subtitle: Text('presented by Yoru'),
  trailing: Icon(Icons.more_vert),
),

title, leading, trailing, subtitleプロパティで表示させるコンテンツを指定します。各プロパティのコンテンツが表示される位置は上の画像で確認できます。

ListTile だけ
ListTile と Card の組み合わせ

また、ListTileはCard Widgetと組み合わせることでより美しいUIを作ることができます。

>>【Flutter】Cardの基本的な使い方

contentPadding

ListTile(
  contentPadding: EdgeInsets.symmetric(vertical: 20, horizontal: 10),
  leading: Container(
    width: 70,
    color: Colors.red,
  ),
  title: Text('Flutter入門アカデミー'),
  subtitle: Text('presented by Yoru'),
  trailing: Icon(Icons.more_vert),
),

contentPaddingを使えば、ListTileの枠の内側に余白を指定できます。また、引数にEdgeInsetを使用します。(contentPaddingはpaddingと同じように使用できます。)

>>【Flutter】paddingプロパティの使い方|EdgeInsets

contentPadding あり
contentPadding あり
contentPadding なし
contentPadding なし

dense

ListTile(
  dense: true,
  leading: Container(
    width: 70,
    color: Colors.red,
  ),
  title: Text('Flutter入門アカデミー'),
  subtitle: Text('presented by Yoru'),
  trailing: Icon(Icons.more_vert),
),

denseプロパティでListTileの垂直方向に対する密度を指定できます。引数にBooleanを使用し、trueで密度を高めることができます。

dense: true
contentPadding なし
dense: false

tileColor

ListTile(
  tileColor: Colors.yellow,
  leading: Container(
    width: 100,
    color: Colors.red,
  ),
  title: Text('Flutter入門アカデミー'),
  subtitle: Text('presented by Yoru'),
  trailing: Icon(Icons.more_vert),
),

tileColorプロパティでListTileが選択されていない時(selectedがfalseの時)のタイルの色を指定します。

タイトルとURLをコピーしました