【Flutter入門】ListTile Widgetを紹介するよ。

ListTIleについて解説

本記事は、マルチプラットフォーム開発のSDK【Flutter】を用いたモバイルアプリ開発入門の為の記事です。

ダーフク

リストとしてある項目を表示する際に、1から実装するのは手間がかかります。それを回避するために、FlutterにはListTile Widgetが標準実装されています。本記事ではこのListTileについて解説していきます。

ListTileとは

ListTileでは主に、

  • 先頭のWidget(主にアイコン)
  • 中央のWidget(主にテキスト)
  • 末尾のWidget(主にアイコン)

の3つを用います。

そして、ここにCard Widgetを組み合わせてリストに表示するWidgetのセットを構成します。

ListTileの各変数

主な変数のみ紹介します。それ以外は実例をあげながら説明します。

➀leading

先頭に表示するWidgetです。多くの場合、ここにはIconを表示します。

➁title

中央に表示するListTileのタイトルです。

➂subtitle

titleの下に表示するサブタイトルです。

➃tranling

末尾に表示するWidgetです。多くの場合、ここにはIconを表示します。

実例

ListTileの例

 

➀一行のみで構成されているListTile

Card(
  child: ListTile(
    leading: Icon(Icons.people),
    title: Text("Single line ListTile"),
    trailing: Icon(Icons.more_vert),
    onTap: () {},
  ),
),

 

➁サブタイトル付きのListTile

Card(
  child: ListTile(
    leading: Icon(Icons.people),
    title: Text("ListTile with subTitle"),
    trailing: Icon(Icons.more_vert),
    subtitle: Text("This is subtitle."),
    onTap: () {},
  ),
),

 

➂サブタイトルが長い場合

Card(
  child: ListTile(
    leading: Icon(Icons.people),
    title: Text("ListTile with long subTitle"),
    trailing: Icon(Icons.more_vert),
    subtitle: Text(
        "This is subtitle. Subtitle is very long and use three lines"),
    onTap: () {},
  ),
),

 

➃isThreeLineがtrueの場合

isThreeLineがtrueの場合、heightが高くなります。

Card(
  child: ListTile(
    leading: Icon(Icons.people),
    title: Text("ListTile with isThreeLine true"),
    trailing: Icon(Icons.more_vert),
    subtitle: Text(
        "This is subtitle. Subtitle is very long and use three lines."),
    onTap: () {},
    isThreeLine: true,
  ),
),

 

➄denseがtrueの場合

denseがtrueの場合、defaultTextStyleの設定がなくなり、テキスト間の距離が密になります。

Card(
  child: ListTile(
    leading: Icon(Icons.people),
    title: Text("ListTile with dense true"),
    trailing: Icon(Icons.more_vert),
    subtitle: Text("This is subtitle."),
    onTap: () {},
    dense: true,
  ),
),

 

➅enabledがfalseの場合

enabledがfalseの場合、ListTileがタップできなくなり、各Widgetの色が薄くなります。

Card(
  child: ListTile(
    leading: Icon(Icons.people),
    title: Text("ListTile with enabled false"),
    trailing: Icon(Icons.more_vert),
    subtitle: Text("This is subtitle."),
    enabled: false,
  ),
),

 

➆selectedがtrueの場合

selectedがtrueの場合、全てのアイコンの色が変化します。

Card(
  child: ListTile(
    leading: Icon(Icons.people),
    title: Text("ListTile with selected true"),
    trailing: Icon(Icons.more_vert),
    subtitle: Text("This is subtitle."),
    selected: true,
    onTap: () {},
  ),
),

 

➇contentPaddingを設定した場合

変数としてcontentPaddingを設定すると、デフォルトで適用されているpaddingがなくなり、指定したpaddingが適用されます。

Card(
  child: ListTile(
    leading: Icon(Icons.people),
    title: Text("ListTile with contentPadding all 10.0"),
    trailing: Icon(Icons.more_vert),
    subtitle: Text("This is subtitle."),
    onTap: () {},
    contentPadding: EdgeInsets.all(10.0),
  ),
),

 

ListTileの派生系

ListTileの派生系として、2種類を紹介します。

  1. CheckboxListTile
  2. RadioListTile

ListTileの例②

➀チェックボックス付きのListTile

CheckBoxListTileは、チェックボックスが標準実装された、ListTileの派生Widgetです。

Card(
  child: CheckboxListTile(
    value: _isCheckboxChecked,
    onChanged: (value) {
      setState(() => _isCheckboxChecked = value);
    },
    title: Text("CheckboxListTile"),
    subtitle: Text("This is a subtitle"),
    secondary: Icon(Icons.people),
    activeColor: Colors.blue,
    selected: _isCheckboxChecked,
  ),
),

 

➁ラジオボタン付きのListTile

RadioListTileは、leading変数部分にラジオボタンが標準実装された、ListTileの派生Widgetです。

Card(
  child: RadioListTile<People>(
    value: People.Json,
    groupValue: _people,
    onChanged: (value) {
      setState(() => _people = value);
    },
    title: Text("RadioListTile Json"),
    subtitle: Text("This is a subtitle"),
    secondary: Icon(Icons.people),
    activeColor: Colors.red,
  ),
),

まとめ

本記事では、リストなどに表示する項目をひとまとめにできるListTileについて、実例をあげて解説しました。

このWidgetはシンプルで使いやすいため、かなり汎用的に利用することができます。是非、使ってみてください。

また、公式Documentではさらに詳しく解説がされています。

参考 ListTileFlutter

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です