Flutter의 ListTile에서 높이를 지정하면 레이아웃이 무너지는 문제

배경

현재 업무로 1개월 반 정도 Flutter를 사용하고 있습니다.

아주 좋은 팀으로, 최근에는 Flutter 자체에도 열중해 왔습니다. 그런 가운데, 자신 안에서 ListTile에 대해 의문이 생기고 있기 때문에, 기사를 작성하기로 했습니다.

ListTile이란?

title, subtitle, leading, trailing 등을 설정하는 것만으로 스테디셀러 레이아웃의 리스트 아이템을 작성할 수 있는 것입니다.



list_screen.dart

class ListScreen extends StatelessWidget {

  final items = [
    'アイテム1',
    'アイテム2',
    'アイテム3',
    'アイテム4',
    'アイテム5',
    'アイテム6',
    'アイテム7',
    'アイテム8',
    'アイテム9',
    'アイテム10',
    'アイテム11',
    'アイテム12',
    'アイテム13',
    'アイテム14',
    'アイテム15',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListTile Sample'),
      ),
      body: ListView.separated(
        itemCount: items.length,
        itemBuilder: (context, int position) {
          return ListTile(
            title: Text(items[position]),
            subtitle: Text('サブタイトル'),
            leading: Icon(Icons.folder),
            trailing: Icon(Icons.more_vert),
          );
        },
        separatorBuilder: (context, _) => const Divider(),
      ),
    );
  }
}

위의 스쿠쇼와 같은 레이아웃이 이렇게 적은 코드로 만들 수 있는 겸손하게 말해 최고입니다.

직면한 문제

특히 업무로 레이아웃을 작성하는 경우에는 리스트의 높이가 정해져 있는 경우가 많다고 생각합니다.
이번에는 SizedBox를 사용하여 height를 50으로 지정합니다. (여기에서 잘못되었거나 하는 것일까..)

itemBuilder: (context, int position) {
          return SizedBox(
            height: 50,
            child: ListTile(
              title: Text(items[position]),
              subtitle: Text('サブタイトル'),
              leading: Icon(Icons.folder),
              trailing: Icon(Icons.more_vert),
            ),
          );
        },

그러면 리스트의 아이템이, 아래의 스쿠쇼와 같이 위에 공백이 생겨 컨텐츠가 아래로 어긋나 버립니다.



예를 들어, trailing의 아이콘을 ButtonIcon 등으로 하면, 탭의 이펙트가 튀어나오거나 합니다.

ListTile을 사용할 때의 해결책

이것을 ListTile를 사용한 채로 회피하기 위해서는, subtitle의 Text아래에 Padding을 붙이거나 등, 상당히 무리한 해결밖에 발견할 수 없습니다. .

// 苦肉の策
subtitle: Padding(
  padding: const EdgeInsets.only(bottom:20),
    child: Text('サブタイトル'),
),

해결책(일단)

ListTile을 사용한 상태에서는 높이를 지정하거나 세세한 레이아웃 조정을 잘 할 수 없었습니다. 일단 내 솔루션으로,

ListTile 사용 안함

라는 방법 밖에 현재 발견 할 수 없습니다. 이번 레이아웃을 ListTile을 사용하지 않고 높이 50의 리스트 아이템을 구현한다면 다음과 같이 될까요? (세세한 곳은 다릅니다만)

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListTile Sample'),
      ),
      body: ListView.separated(
        itemCount: items.length,
        itemBuilder: (context, int position) {
          return SizedBox(
            height: 50,
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: Row(
                children: [
                  Icon(Icons.folder),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 30),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(items[position]),
                          Text('サブタイトル'),
                        ],
                      ),
                    ),
                  ),
                  Icon(Icons.more_vert)
                ],
              ),
            ),
          );
        },
      ),
    );
  }

최근에는 나중에 레이아웃의 미세 조정 등으로 곤란할 정도라면 처음부터 ListTile 사용하지 않도록 할까 생각하고 있습니다.
그렇다고는 해도, 사실은 ListTile에서도 제대로 레이아웃 작성할 수 있는 것은 아닐까? 그리고 모야 모야입니다. .

ListTile에서도 좋은 방법이 있으면, 교수 부탁 할 수 있으면 고맙습니다.

[추기]
고마운 코멘트 받았습니다.
ListTile의 공식 문서에 다음과 같은 설명이 있다는 것을 가르쳐 주셨습니다.

A single fixed-height row that typically contains some text as well as a leading or trailing icon.

역시 스스로 높이를 지정해 사용하는 것은 아닌 것 같네요.