이 포스트에서는 Flutter의 ExpansionPanel 위젯에서 이미지 버튼을 추가하고, 해당 버튼에 이벤트를 처리하는 방법에 대해 알아보겠습니다.

ExpansionPanel은 펼치고 닫을 수 있는 패널을 만들기 위해 사용되는 유용한 위젯입니다. 기본적으로 제목과 내용을 포함하고 있으며, 제목을 클릭하면 내용이 펼쳐지거나 닫히게 됩니다.

하지만 ExpansionPanel 자체에는 이미지 버튼을 추가할 수 있는 기능이 없습니다. 따라서 직접 이미지 버튼을 추가하고 해당 버튼에 클릭 이벤트를 처리하는 방법에 대해 알아보겠습니다.

1. 이미지 버튼 추가하기

ExpansionPanel의 제목에 이미지 버튼을 추가하기 위해서는 ExpansionPanelHeaderBuilder을 사용합니다. 이를 통해 제목 위젯을 생성할 수 있습니다.

ExpansionPanelHeaderBuilder _buildHeaderBuilder(int index, bool isExpanded) {
  return (BuildContext context, bool isExpanded) {
    return ListTile(
      title: Text("Panel $index"),
      leading: isExpanded ? Icon(Icons.expand_less) : Icon(Icons.expand_more),
      trailing: IconButton(
        icon: Icon(Icons.image),
        onPressed: () {
          // 이미지 버튼 클릭 이벤트 처리
          // TODO: 추가적인 처리 로직을 작성하세요.
        },
      ),
    );
  };
}

위 예시에서는 ListTile을 사용하여 ExpansionPanel의 제목을 생성하고, leading 속성을 사용하여 패널이 펼쳐진 상태에 따라 아이콘을 변경합니다. 마지막으로 trailing 속성에 IconButton을 추가하여 이미지 버튼을 생성하고, onPressed 콜백에서 이미지 버튼 클릭 이벤트를 처리합니다.

2. 이미지 버튼 이벤트 처리하기

이미지 버튼을 클릭했을 때 수행할 작업을 구현하기 위해서는 onPressed 콜백 메서드에 원하는 로직을 작성하면 됩니다. 이 액션에 맞춰 추가적인 작업을 수행하고자 할 때는 해당 로직을 작성하세요.

trailing: IconButton(
  icon: Icon(Icons.image),
  onPressed: () {
    // 이미지 버튼 클릭 이벤트 처리
    // TODO: 추가적인 처리 로직을 작성하세요.
    // 예시) 이미지를 업로드하는 함수 호출
    _uploadImage();
  },
),

위 예시에서는 onPressed 콜백에서 _uploadImage 함수를 호출하여 이미지를 업로드하는 처리를 수행합니다.

마무리

이와 같이 Flutter의 ExpansionPanel 위젯에서 이미지 버튼을 추가하고 클릭 이벤트를 처리하는 방법에 대해서 알아보았습니다. 이를 활용하여 더 유연하고 다양한 기능이 있는 ExpansionPanel을 구현할 수 있습니다. 자세한 내용은 공식 문서를 참고하시기 바랍니다.