플러터 ExpansionTile 위젯: 사용방법 및 옵션

 

ExpansionTile 위젯은 타이틀과 리딩(leading) 아이콘을 제공하고, 제목을 탭하면 확장되어 추가 콘텐츠를 표시할 수 있는 위젯입니다.

주로 앱 내에서 메뉴, FAQ, 설정 항목 등을 구현할 때 사용됩니다.

이 글에서는 ExpansionTile 위젯의 기본 사용법과 다양한 옵션들을 소개하겠습니다.

1. ExpansionTile 기본 사용법

ExpansionTile의 가장 기본적인 형태는 타이틀과 확장될 때 보여질 자식 위젯들을 지정하는 것입니다.

예시: 기본 ExpansionTile 사용

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ExpansionTile Example')),
      body: ListView(
        children: <Widget>[
          ExpansionTile(
            title: Text('Click to expand'),
            children: <Widget>[
              ListTile(title: Text('Item 1')),
              ListTile(title: Text('Item 2')),
              ListTile(title: Text('Item 3')),
            ],
          ),
        ],
      ),
    );
  }
}

위 예시에서는 ExpansionTile을 사용하여 "Click to expand"라는 제목과 확장 시 나타나는 세 개의 리스트 항목을 정의했습니다.

2. ExpansionTile의 주요 옵션

ExpansionTile에는 다양한 옵션이 있어, 이를 통해 UI를 더 세부적으로 조정할 수 있습니다.

2.1. title

title은 확장 타일의 제목을 정의합니다. Text, Icon, Row 등 다양한 위젯을 사용할 수 있습니다.

ExpansionTile(
  title: Text('Settings'),
)

2.2. leading

leading은 타이틀 왼쪽에 위치할 위젯을 정의합니다. 주로 아이콘을 사용하여 항목을 구분합니다.

ExpansionTile(
  leading: Icon(Icons.settings),
  title: Text('Settings'),
)

2.3. children

children은 타일이 확장되었을 때 표시될 자식 위젯들을 정의합니다.

ExpansionTile(
  title: Text('Items'),
  children: <Widget>[
    ListTile(title: Text('Item A')),
    ListTile(title: Text('Item B')),
  ],
)

2.4. trailing

trailing은 타이틀의 오른쪽에 위치할 위젯을 정의합니다. 기본적으로는 확장 여부에 따라 회전하는 아이콘이 표시됩니다.

이를 커스터마이징할 수도 있습니다.

ExpansionTile(
  title: Text('Notifications'),
  trailing: Icon(Icons.notifications),
  children: <Widget>[
    ListTile(title: Text('New message')),
  ],
)

2.5. initiallyExpanded

initiallyExpanded는 타일이 처음 표시될 때 확장 상태인지 여부를 설정합니다.

기본값은 false이며, true로 설정하면 처음부터 확장된 상태로 표시됩니다.

ExpansionTile(
  title: Text('FAQ'),
  initiallyExpanded: true, // 기본적으로 확장된 상태
  children: <Widget>[
    ListTile(title: Text('Question 1')),
    ListTile(title: Text('Question 2')),
  ],
)

2.6. onExpansionChanged

onExpansionChanged는 사용자가 타일을 확장하거나 축소할 때 호출되는 콜백 함수를 정의합니다.

이 콜백은 확장 상태를 나타내는 bool 값을 매개변수로 받습니다.

ExpansionTile(
  title: Text('Profile'),
  onExpansionChanged: (bool expanded) {
    print('Tile is expanded: $expanded');
  },
  children: <Widget>[
    ListTile(title: Text('User details')),
  ],
)

3. ExpansionTile의 스타일링 옵션

ExpansionTile은 기본적으로 매우 단순한 스타일을 가지고 있지만, backgroundColor 및 textColor 등을 이용해 스타일을 조정할 수 있습니다.

ExpansionTile(
  title: Text('Themed Tile'),
  backgroundColor: Colors.lightBlueAccent,
  textColor: Colors.white,
  iconColor: Colors.white,
  children: <Widget>[
    ListTile(title: Text('Styled Content')),
  ],
)

위 예시에서는 ExpansionTile의 배경색, 텍스트 색상, 아이콘 색상을 커스터마이징하였습니다.

마치며

ExpansionTile 위젯은 Flutter에서 매우 유용하게 사용할 수 있는 위젯 중 하나입니다. 복잡한 내용을 간단하게 숨기고, 필요한 경우에만 확장하여 표시할 수 있어 사용자가 UI를 깔끔하게 사용할 수 있게 도와줍니다. 위젯의 다양한 옵션을 활용하여 원하는 디자인과 기능을 구현해보세요!

 

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

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