【Flutter】ListTileの使い方｜リスト用のタイルカードを作る

今回は「ListTile」の基本的な使い方について紹介します。

ListTileを使えば手軽にListViewなどのリスト用のタイルを作成できます！

ListTileの基本プロパティ

leading

leadingプロパティでListTileの1番左（titleの前）表示されるWidgetを指定できます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListTile'),
        ),
        body: Center(
          child: Card(
            child: ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.face),
              ),
            ),
          ),
        ),
      ),
    );
  }

title

titleプロパティでメインWidgetを指定できます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListTile'),
        ),
        body: Center(
          child: Card(
            child: ListTile(
              leading: CircleAvatar(
                child: Icon(
                  Icons.face,
                ),
              ),
              title: Text("Yamada Taro"),
            ),
          ),
        ),
      ),
    );
  }

trailing

trailingプロパティでListTileの1番右（titleの後）表示されるWidgetを指定できます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListTile'),
        ),
        body: Center(
          child: Card(
            child: ListTile(
              leading: CircleAvatar(
                child: Icon(
                  Icons.face,
                ),
              ),
              title: Text(
                "Yamada Taro",
              ),
              trailing: Icon(
                Icons.list,
              ),
            ),
          ),
        ),
      ),
    );
  }

subtitle

subtitleプロパティでtitleの下にサブとなるWidgetを指定できます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListTile'),
        ),
        body: Center(
          child: Card(
            child: ListTile(
              leading: CircleAvatar(
                child: Icon(
                  Icons.face,
                ),
              ),
              title: Text(
                "Yamada Taro",
              ),
              subtitle: Text("Hello World"),
              trailing: Icon(
                Icons.list,
              ),
            ),
          ),
        ),
      ),
    );
  }

dense

denseプロパティで垂直方向に対して密度を高めることができます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListTile'),
        ),
        body: Center(
          child: Card(
            child: ListTile(
              leading: CircleAvatar(
                child: Icon(
                  Icons.face,
                ),
              ),
              title: Text(
                "Yamada Taro",
              ),
              subtitle: Text("Hello World"),
              trailing: Icon(
                Icons.list,
              ),
              dense: true,
            ),
          ),
        ),
      ),
    );
  }

onTap & onLongPress

onTapプロパティはクリックされた時、onLongPressプロパティでは長押しされた時に定義したコールバック関数を実行します。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListTile'),
        ),
        body: Center(
          child: Card(
            child: ListTile(
              leading: CircleAvatar(
                child: Icon(
                  Icons.face,
                ),
              ),
              title: Text(
                "Yamada Taro",
              ),
              subtitle: Text("Hello World"),
              trailing: Icon(
                Icons.list,
              ),
              dense: true,
              onTap: () {
                print("クリック");
              },
              onLongPress: () {
                print("ロングプレス");
              },
            ),
          ),
        ),
      ),
    );
  }

以上です。

おすすめ記事

参考

• A complete guide to Flutter’s ListTile