[flutter] ExpansionPanel의 확장 및 축소 애니메이션 효과
개요
Flutter의 ExpansionPanel 위젯은 목록 아이템을 확장하거나 축소하는 기능을 제공합니다. 기본적으로는 사용자가 제목을 클릭하여 내용을 토글할 수 있으며, 이러한 기능에 애니메이션을 추가하면 사용자 경험을 향상시킬 수 있습니다.
ExpansionPanelList 위젯 설정
ExpansionPanel 위젯을 사용하기 위해서는 ExpansionPanelList 위젯을 구성해야 합니다. ExpansionPanelList는 ExpansionPanel 위젯을 내부에 가지고 있으며, 필요한 ExpansionPanel을 추가할 수 있습니다.
ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
// 해당 ExpansionPanel이 확장되었는지 여부를 업데이트
_expandedItems[index] = !isExpanded;
});
},
children: _items.map<ExpansionPanel>((Item item) {
return ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(item.title),
);
},
body: ListTile(
title: Text(item.contents),
),
isExpanded: _expandedItems[_items.indexOf(item)],
);
}).toList(),
)
애니메이션 효과 추가
ExpansionPanelList를 사용하여 ExpansionPanel을 구성한 후, 애니메이션 효과를 추가할 수 있습니다.
ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_expandedItems[index] = !isExpanded;
});
},
animationDuration: Duration(milliseconds: 500),
children: _items.map<ExpansionPanel>((Item item) {
return ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(item.title),
);
},
body: ListTile(
title: Text(item.contents),
),
isExpanded: _expandedItems[_items.indexOf(item)],
);
}).toList(),
)
위의 코드에서는 animationDuration 프로퍼티를 사용하여 애니메이션의 지속 시간을 설정하였습니다. 여기서는 500밀리초로 설정하였으며, 이 값을 조절하여 원하는 애니메이션 속도를 얻을 수 있습니다.
결론
ExpansionPanel을 사용하여 리스트 뷰의 아이템을 확장 및 축소하는 기능을 구현할 수 있습니다. 애니메이션 효과를 추가하면 사용자들의 경험을 더욱 향상시킬 수 있습니다. 추가적으로, animationDuration 프로퍼티를 조절하여 애니메이션의 속도를 조정할 수 있습니다.