[flutter] ExpansionPanel에서 아이콘을 클릭하여 특정 작업 수행하는 방법

07 Dec 2023

flutter

ExpansionPanel 위젯은 확장 가능한 패널을 만들기 위해 사용되는 Flutter의 내장 위젯입니다. 일반적으로 패널을 펼치거나 접을 때는 패널 자체를 클릭하게 됩니다. 그러나 패널 내부의 아이콘을 클릭하여 특정 작업을 수행하고 싶을 때는 어떻게 해야 할까요? 이 글에서는 ExpansionPanel에서 아이콘을 클릭하여 특정 작업을 수행하는 방법에 대해 알아보겠습니다.

ExpansionPanel 생성하기

먼저, ExpansionPanel 위젯을 생성하여 화면에 표시해야 합니다. 아래의 코드는 ExpansionPanelList 위젯을 사용하여 ExpansionPanel을 생성하는 간단한 예제입니다.

ExpansionPanelList(
  children: [
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return ListTile(
          title: Text('패널 타이틀'),
        );
      },
      body: ListTile(
        title: Text('패널 내용'),
      ),
      isExpanded: false,
    ),
  ],
),

위의 코드에서는 ExpansionPanelList의 children 속성에 ExpansionPanel 위젯을 추가해주고, 각 ExpansionPanel은 headerBuilder, body, isExpanded 등의 속성을 지정하여 표시될 내용을 설정합니다.

패널 아이콘 추가하기

이제 ExpansionPanel에 아이콘을 추가해보겠습니다. 아래의 코드는 ExpansionPanel의 헤더 부분에 아이콘을 추가하는 예제입니다.

ExpansionPanelList(
  children: [
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return ListTile(
          leading: Icon(Icons.expand_more), // 패널 아이콘 추가
          title: Text('패널 타이틀'),
        );
      },
      body: ListTile(
        title: Text('패널 내용'),
      ),
      isExpanded: false,
    ),
  ],
),

위의 코드에서는 ListTile 위젯의 leading 속성에 Icon 위젯을 추가하여 패널의 헤더 부분에 아이콘을 표시합니다. 이제 아이콘을 클릭하여 특정 작업을 수행하도록 코드를 수정해보겠습니다.

아이콘 클릭 이벤트 처리하기

ExpansionPanel의 아이콘을 클릭하여 특정 작업을 수행하려면, GestureDetector와 onTap이벤트를 사용하여 클릭 이벤트를 처리해야 합니다. 아래의 코드는 ExpansionPanel의 헤더 부분에 GestureDetector를 추가하여 아이콘 클릭 이벤트를 처리하는 예제입니다.

ExpansionPanelList(
  children: [
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return ListTile(
          leading: GestureDetector(
            child: Icon(Icons.expand_more), // 패널 아이콘 추가
            onTap: () {
              // 아이콘이 클릭되었을 때 수행할 작업 작성
              // 예) 패널을 펼치거나 접는 등의 작업 수행
              setState(() {
                isExpanded = !isExpanded;
              });
            },
          ),
          title: Text('패널 타이틀'),
        );
      },
      body: ListTile(
        title: Text('패널 내용'),
      ),
      isExpanded: false,
    ),
  ],
),

위의 코드에서는 GestureDetector 위젯을 사용하여 아이콘 클릭 이벤트를 처리하고, onTap 속성에 클릭되었을 때 수행할 작업을 작성합니다. 예를 들어, 패널을 펼치거나 접는 등의 작업을 수행할 수 있습니다. 위의 예제에서는 isExpanded 값을 변경하여 패널을 펼칠지 접을지 결정하도록 하였습니다.

이제 ExpansionPanel에서 아이콘을 클릭하여 원하는 작업을 수행할 수 있습니다. ExpansionPanelList와 GestureDetector를 조합하여 다양한 기능을 구현할 수 있으니, 필요한 작업에 맞게 코드를 수정하시면 됩니다.

참고문서: