[Flutter] 목록 펼치기 (서브 카테고리 만들기)

ExpansionTile

한번에 페이지에 시현되는 정보가 너무 많으면, 원하는 정보를 찾기도 어려워 사용자에게 피로감을 주는 문제가 있다.

이러한 문제는 상위 카테고리를 만들어 각 항목들을 묶어줌으로써 개선할 수 있다. 

 

카테고리로 묶어주는 보편적인 방법에는 드롭다운이 있다.

플러터에서는 ExpansionTile 을 사용하여 드롭다운 형태로 카테고리를 분류할 수 있다.

https://api.flutter.dev/flutter/material/ExpansionTile-class.html

ExpansionTile class - material library - Dart API

구현

ExpansionTile & ListTile 구성 및 속성

ExpansionTile 은 내부 하위 항목으로 ListTile 을 가진다.

ExpansionTileController 를 사용하면, 기본적으로 제공하는 확장/축소 버튼 이외에도 자신이 직접 확장/축소 시킬수 있다

(아래 코드에서는 미사용함.)

ExpansionTile 은 확장시, 상위 카테고리의 색상이 변경된다. textColor 를 통해 색상을 지정할 수 있다.

ExpansionTile 은 확장시, 하위 항목(ListTile)에 인덴트(들여쓰기)가 없다. childrenPadding 으로 인덴트를 줄 수 있다.

하위 항목(ListTile)간에 구분선이 없으므로, 하위 항목 사이에 Divider 를 추가하여 구분선을 만들어 줄 수 있다.

...
	Column(
          children: [
            ExpansionTile(
              title: Text('ABC Category'),
              leading: Icon(Icons.abc),
              childrenPadding: EdgeInsets.only(left: 56),
              children: [
                ListTile(
                    leading: Icon(Icons.airplay),
                    title: Text('A'),
                    onTap: () {}),
                Divider(height: 1),
                ListTile(title: Text('B'), onTap: () {}),
                Divider(height: 1),
                ListTile(title: Text('C'), onTap: () {}),
              ],
            ),
          ],
        ),
 ...