[flutter] ExpansionPanel 위젯의 마우스 호버 효과 추가하기

07 Dec 2023

flutter

이번 글에서는 Flutter의 ExpansionPanel 위젯에 마우스 호버 효과를 추가하는 방법에 대해 알아보겠습니다.

ExpansionPanel 위젯은 리스트나 그리드와 같이 여러 아이템을 확장하여 추가 정보를 표시할 수 있는 위젯입니다. 기본적으로는 탭을 통해 확장/축소되지만, 우리는 이 위젯에 마우스 호버 효과를 추가하고 싶습니다.

ExpansionTile 사용하기

ExpansionPanel 위젯을 사용하기 전에 ExpansionTile을 먼저 사용해보겠습니다. ExpansionTile은 ExpansionPanelList를 감싸는 위젯으로서, 좀 더 쉽게 확장 가능한 아이템을 생성할 수 있습니다.

ExpansionTile(
  title: Text('타이틀'),
  leading: Icon(Icons.arrow_drop_down),
  children: <Widget>[
    ListTile(
      title: Text('내용'),
    ),
  ],
)

위 코드에서는 ExpansionTile의 title에 ‘타이틀’을, leading에 드롭다운 아이콘을 설정하였습니다. 그리고 children 속성을 통해 확장된 내용을 구성하였습니다. ListTile을 통해 확장된 내용의 아이템을 추가할 수 있습니다.

마우스 호버 효과 추가하기

ExpansionPanel 위젯에 마우스 호버 효과를 추가하기 위해서는 GestureDetector 위젯을 사용하면 됩니다. GestureDetector는 다양한 터치 제스처를 처리할 수 있는 위젯입니다.

ExpansionPanelList(
  expansionCallback: (int index, bool isExpanded) {
    setState(() {
      items[index].isExpanded = !isExpanded;
    });
  },
  children: items.map<ExpansionPanel>((Item item) {
    return ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        return GestureDetector(
          behavior: HitTestBehavior.translucent,
          onHover: (event) {
            setState(() {
              item.isHovered = true;
            });
          },
          onExit: (event) {
            setState(() {
              item.isHovered = false;
            });
          },
          child: Container(
            padding: EdgeInsets.all(10.0),
            color: item.isHovered ? Colors.grey : Colors.white,
            child: Text('${item.title}'),
          ),
        );
      },
      body: ListTile(
        title: Text('${item.body}'),
      ),
      isExpanded: item.isExpanded,
    );
  }).toList(),
)

위 코드에서는 ExpansionPanelList의 headerBuilder로 GestureDetector를 추가하였습니다. GestureDetector에 onHover 콜백을 등록하여 마우스가 위젯 위로 올라갈 때 아이템의 isHovered 값을 true로 변경하였고, onExit 콜백을 등록하여 마우스가 위젯 밖으로 나갈 때는 isHovered 값을 false로 변경하였습니다.

Container의 색상을 조절하기 위해 item.isHovered 값을 사용하여 마우스가 호버 상태인지 아닌지를 확인하고, 그에 따라 배경색을 변경하였습니다.

마무리

이제 위 코드를 사용하여 ExpansionPanelList 위젯에 마우스 호버 효과를 추가할 수 있습니다. 적용하고자 하는 프로젝트에 따라 다양한 스타일링을 추가할 수 있으니 참고해보세요.

참고 자료: