플러터 Expansion Tile 위젯 완벽 가이드: 사용법과 주요 옵션 총정리

 

플러터(Flutter)에서 Expansion Tile 위젯 사용 방법 및 주요 옵션 알아보기

 

Flutter는 모바일, 웹, 데스크톱 애플리케이션 개발에 강력한 도구를 제공하는 프레임워크로, 다양한 위젯을 통해 UI를 쉽게 구성할 수 있습니다.

그중에서도 Expansion Tile 위젯은 클릭 한 번으로 내용을 확장하거나 축소할 수 있는 기능을 제공하여, 복잡한 UI 구조를 간단하게 구현할 수 있습니다.

오늘은 이 Expansion Tile 위젯의 사용 방법과 주요 옵션들에 대해 쉽게 설명해 드리겠습니다.

1. Expansion Tile 위젯이란?

Expansion Tile 위젯은 사용자가 클릭하면 하위 항목들이 펼쳐지는 일종의 아코디언(Accordion) 메뉴입니다.

주로 FAQ 페이지, 설정 화면, 리스트 항목을 세분화할 때 사용됩니다. 이 위젯은 기본적으로 제목(Title)과 확장 가능한 본문(Content)을 포함합니다.

코드 예시

ExpansionTile(
  title: Text('타이틀 제목'),
  children: <Widget>[
    ListTile(title: Text('하위 항목 1')),
    ListTile(title: Text('하위 항목 2')),
  ],
)

이 예제는 간단한 타이틀과 두 개의 하위 항목으로 구성된 Expansion Tile을 생성합니다

2. Expansion Tile의 주요 옵션

Expansion Tile 위젯을 효과적으로 사용하기 위해서는 다양한 옵션들을 이해하고 활용하는 것이 중요합니다. 주요 옵션들을 하나씩 살펴보겠습니다.

a. title

• 설명: Expansion Tile의 제목 부분입니다. 주로 Text 위젯을 사용하여 타이틀을 지정합니다.
• 예시

title: Text('설정 메뉴'),

b. subtitle

• 설명: 타이틀 아래에 부가적인 설명을 추가할 수 있는 옵션입니다.
• 예시

subtitle: Text('세부 설정을 보려면 클릭하세요'),

c. children

• 설명: 확장될 때 표시될 하위 위젯들을 정의합니다. ListTile, Column, Row 등 다양한 위젯을 넣을 수 있습니다.
• 예시

children: <Widget>[
  ListTile(title: Text('알림 설정')),
  ListTile(title: Text('보안 설정')),
],

d. leading

• 설명: 타이틀 앞에 아이콘이나 이미지를 추가할 수 있는 옵션입니다.
• 예시

leading: Icon(Icons.settings),

e. trailing

• 설명: 타이틀 끝에 아이콘이나 위젯을 추가할 수 있는 옵션입니다. 기본적으로 확장/축소 상태를 나타내는 아이콘이 들어갑니다.
• 예시

trailing: Icon(Icons.expand_more),

f. initiallyExpanded

• 설명: Expansion Tile이 처음부터 확장되어 있을지 여부를 결정합니다. 기본값은 false입니다.
• 예시

initiallyExpanded: true,

g. backgroundColor

• 설명: Expansion Tile의 배경색을 설정합니다. 확장 여부에 상관없이 동일한 색상을 유지합니다.
• 예시

backgroundColor: Colors.grey[200],

h. onExpansionChanged

• 설명: Expansion Tile이 확장되거나 축소될 때 호출되는 콜백 함수입니다. 확장 상태를 추적할 때 유용합니다.
• 예시

onExpansionChanged: (bool expanded) {
  print('Expansion 상태: $expanded');
},

3. Expansion Tile 활용 예제

아래는 다양한 옵션을 활용하여 구성한 조금 더 복잡한 예제입니다.

ExpansionTile(
  leading: Icon(Icons.folder),
  title: Text('문서'),
  subtitle: Text('여기에 문서를 보관하세요'),
  trailing: Icon(Icons.arrow_drop_down),
  backgroundColor: Colors.blue[50],
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.insert_drive_file),
      title: Text('보고서.pdf'),
    ),
    ListTile(
      leading: Icon(Icons.insert_drive_file),
      title: Text('제안서.docx'),
    ),
  ],
  initiallyExpanded: false,
  onExpansionChanged: (bool expanded) {
    if (expanded) {
      print('문서가 열렸습니다.');
    } else {
      print('문서가 닫혔습니다.');
    }
  },
)

 

Flutter의 Expansion Tile 위젯은 사용자 인터페이스를 단순하고 직관적으로 만들 수 있는 강력한 도구입니다. 다양한 옵션을 활용하여 사용자 경험을 극대화할 수 있습니다.

이 글이 Expansion Tile 위젯을 이해하고 활용하는 데 도움이 되었기를 바랍니다. 더 궁금한 점이 있다면 댓글로 질문해주세요!

공감과 댓글은 저에게 큰 힘이 됩니다.

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱