[Flutter] ListTileの設定。メニュー付

2022年3月18日
2022年3月18日
Widget

Widget

Flutterで一覧を作成するときには、ListTileを使用します。ListTileのサンプルはたくさん見つかります。ただ、メニューも含めてコピペできるソースがなかったので、作成しました。

コピペ用のソース

import 'package:flutter/material.dart';

class ListTileTest extends StatelessWidget {
  const ListTileTest({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListTile(
      tileColor: Colors.black12,
      title: Text('タイトル'),
      subtitle: Text(
        'サブタイトル',
      ),
      onTap: () => print('ListTileが押された'),
      leading: FlutterLogo(),
      trailing: IconButton(
        icon: const Icon(Icons.more_vert),
        onPressed: () {
          showMenu<String>(
            context: context,
            position: const RelativeRect.fromLTRB(25.0, 25.0, 0.0, 0.0),
            items: <PopupMenuItem<String>>[
              PopupMenuItem<String>(
                  child: Row(
                    children: const [
                      Icon(Icons.edit),
                      Text('修正'),
                    ],
                  ),
                  value: '修正'),
              PopupMenuItem<String>(
                  child: Row(
                    children: const [
                      Icon(Icons.delete),
                      Text('削除'),
                    ],
                  ),
                  value: '削除'),
            ],
          ).then((value) {
            print('$value が押された');
          });
        },
      ),
    );
  }
}

解説

画像がほぼ全てですが、、、

title: タイルのメインのコンテンツ。情報の名前など。
subtitle: タイルのサブのコンテンツ。情報の補足説明など。
leading: タイルの先頭のコンテンツ。情報のアイキャッチ画像、など
trailing: タイルの後ろのコンテンツ。情報に対するアクションのアイコン、など
tileColor: タイルの色

leadingとtrailingにRowを入れると、表示されなくなった。(trailingにアイコンを並べたかった)何かすれば表示されるかも知れないが、そのパッションはありませんでした、、

タイルに対するアクション

trailingのメニューアイコンを押すと、以下のようなメニューが出るように仕込んでます。適切に処理してください。

スタイル

外枠の色、サイズ。角を丸くする設定には、shapeを追加しましょう。ListTile内に定義すれば、個別に設定できます。Thema.listTileThemeに設定すると、全てのListTileに設定を反映できます。以下のサンプルです。

      shape: RoundedRectangleBorder(
        side: const BorderSide(
          color: Colors.blue,
          width: 0.5,
        ),
        borderRadius: BorderRadius.circular(5),
      ),

何も実施しないと、文字のスタイルとして、以下が使用されます、と思われる。(←色々と分岐があるようで、詳しく分かっていない)