🎬

ListTileを使ってみた

2024/02/04に公開

Flutter

はじめに

今回はListTileについてまとめようと思います。

ListTileとは

ListTileとは高さが固定されているものであり、先頭または末尾にアイコンを設定することが可能です。
このWidgetはListViewかDrawersやCardsの中のColumnsで使用されます。プロパティを利用することでタイトルやアイコンをいい感じにつけることが可能です。

使用方法

それでは実際に使ってみたいと思います。今回は簡単なListTileを１つ作成してみたいと思います。

import 'package:flutter/material.dart';

void main() {
  runApp(ListTileApp());
}

class ListTileApp extends StatelessWidget {
  ListTileApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Material(
        child: Center(
          child: Container(
            child: ListTile(
              leading: FlutterLogo(size: 20),
              title: Text('ListTile Example'),
              subtitle: Text('Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title'),
              tileColor: Colors.red,
              trailing: Icon(Icons.more_vert),
              isThreeLine: true,
            ),
          ),
        ),
      ),
    );
  }
}

すると以下の画像のようになります。

解説

それではListTileの部分を解説します。

        child: ListTile(
              leading: FlutterLogo(size: 20),
              title: Text('ListTile Example'),
              subtitle: Text('Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title Sub Title'),
              tileColor: Colors.red,
              trailing: Icon(Icons.more_vert),
              isThreeLine: true,
            ),

leadingプロパティとtrailingプロパティを使って先頭と末尾にアイコンを設定しています。titleプロパティでListTileの主要な文章をsubtitleプロパティで２行目以降の文章を設定しています。tileColorで色の設定をしています。isThreeLineをtrueにすると、ListTileが３行のテキストを意図しているかどうかを設定しています。また先頭と末尾のアイコンが上部に固定されます。

おわりに

今回はListTileの基本的な使い方を説明しました。一覧表示によく使われたりするので実際に自分でいろんなプロパティを使いながら理解していくのがいいかもしれないです。最後まで読んでいただきありがとうございました。