【Flutter】【1分で分かる】ListTileの基本の使い方を解説【サンプルコード付き】

今回はListViewなどでよく使われる「ListTile」ウィジェットについてです。

この記事で分かること

✅「ListTile」ウィジェットって何？
✅「ListTile」ウィジェットの基本的な使い方
✅「ListTile」ウィジェットの主なプロパティとメソッドについて

目次

「ListTile」ウィジェットとは

ListTileは高さが固定された単一の行で、通常はテキストと先頭または末尾にアイコンが置けるウィジェットです。大体は「ListView」「Card」「Drawer」ウィジェットの中で使用されます。

使用例

サンプルコード

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        children: const <Widget> [
          ListTile(title: Text("1行目")),
          Divider(),
          ListTile(
            leading: FlutterLogo(),
            title: Text("2行目"),
          ),
          Divider(),
          ListTile(
            title: Text("3行目"),
            trailing: Icon(Icons.more_vert),
          ),
          Divider(),
          ListTile(
            leading: FlutterLogo(),
            title: Text("4行目"),
            trailing: Icon(Icons.more_vert),
          ),
          Divider(),
          ListTile(
            leading: FlutterLogo(),
            title: Text("5行目"),
            subtitle: Text("サブタイトル"),
            trailing: Icon(Icons.more_vert),
          ),
          Divider(),
          ListTile(
            leading: FlutterLogo(),
            title: Text("6行目"),
            subtitle: Text("サブタイトルサブタイトルサブタイトルサブタイトル"),
            trailing: Icon(Icons.more_vert),
            isThreeLine: true,
          ),
        ],
      ),
    );
  }
}

画面

各プロパティの説明

leading

ListTileの先頭位置にアイコンやボタンを表示できる。

title

表示する文字列を指定できる。

subtitle

titleの下に表示する文字列を指定できる。

trailing

ListTileの末尾位置にアイコンやボタンを表示できる。

isThreeLine

ListTileが3行のテキストを表示することを意図しているかどうかを示す。isThreeLineがtrueの場合、subtitleはnull以外でなければなりません（2行目と3行目のテキストを提供することが期待されているため）。isThreeLineがfalseでsubtitleがnullの場合、ListTileは1行として扱われ、subtitleがnull以外の場合、2行として扱われます。

まとめ

今回はFlutterのListTileウィジェットについて基本的な使い方を解説しました。ListTileは一覧表示を実装する際によく使用すると思うので、ここの内容はしっかりおさえておきましょう！

以上となります、最後までお読みいただきありがとうございました！

Flutterの基本をがっちり固めるためには以下記事で紹介している本がおすすめです。