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

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

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

【Flutter】Widget・Widgetツリーの基本的な仕組み ｜ FlutterアプリのUI構造

Flutterアプリでアプリ開発する上で始めに理解しておきたい「Widget」について紹介します。Widgetとは、FlutterのUIを構築しているパーツのことを呼び、FlutterアプリはこのWidgetがツリー状(Widget)に組み合わさって構築されています。また、Widgetはクラスをインスタンス化したオブジェクトでもあります。

flutternyumon.com

2021.04.14

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は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

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で密度を高めることができます。

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の時）のタイルの色を指定します。