【Flutter】ListTileウィジェットの使い方、デザイン

---

ListTileとは

api.flutter.dev

ListTileは高さが固定されたリスト用のウィジェット。 タイトルやチェックボックスなど、リストアイテムでよく使用されるウィジェットを簡単に組み込むことができる。

ListTileの例

---

使い方

タップ時の処理

onTapプロパティにタップ時の処理を記述する。

ListTile(
    onTap: () {
      // タップ時の処理を記述
    },
    ...
) 

ウィジェットの配置

以下のリストデータを例に、ListTile内にウィジェットを配置する方法を説明する。

 List<Map<String, dynamic>> sampleList = [
    {"name": "takuya", "age": 20, "registered": true, "sex": Sex.man},
    {"name": "masako", "age": 18, "registered": false, "sex": Sex.woman},
    {"name": "akira", "age": 21, "registered": false, "sex": Sex.man},
    {"name": "risa", "age": 19, "registered": true, "sex": Sex.woman},
  ];

enum Sex { man, woman }

タイトル

titleプロパティに表示したいウィジェットを指定する。

タイトルを表示

ListTile(
      title: Text(...), // タイトル位置に表示するTextウィジェット 
    )

上の例ではTextウィジェットを表示したが、Iconウィジェットなども表示できる。

サブタイトル

サブタイトル位置にウィジェットを表示したい場合、subtitleプロパティを指定する。 タイトルに比べてサイズが小さくなる。

サブタイトルを表示

ListTile(
  title: Text(...),
  subtitle: Text(...), // サブタイトル位置に表示するTextウィジェット 
) 

先頭位置

先頭にウィジェットを表示したい場合、leadingプロパティを指定する。

先頭にアイコンを表示

ListTile(
  title: Text(...),
  subtitle: Text(...),
  leading: Icon(...), // 先頭に表示したいIconウィジェット
) 

末尾位置

末尾位置にウィジェットを表示したい場合、trailingプロパティを指定する。

末尾位置にウィジェットを表示

ListTile(
  title: Text(...),
  subtitle: Text(...),
  leading: Icon(...), 
  trailing: Text(...), // 末尾に表示したいウィジェット
) 

デザイン

背景色

背景色を指定する場合、tileColorを指定する。

背景色を緑に指定

ListTile(
    tileColor: ..., // 背景色を指定
    ...) 

アイコンの色

ListTileでアイコンが表示されている場合、iconColorを指定することで色を変更できる。

アイコンの色を赤に指定

ListTile(
    iconColor: ..., // アイコンの色を指定
    ...) 

文字の色

ListTileで文字が表示されている場合、textColorを指定することで色を変更できる。

文字の色を赤に指定

ListTile(
    textColor: ..., // 文字の色を指定
    ...)