[flutter] ExpansionPanel 애니메이션 효과 커스터마이징 방법

07 Dec 2023

flutter

ExpansionPanel 위젯은 펼쳐지고 접히는 패널을 만들어주는 유용한 위젯입니다. 기본적으로 ExpansionPanel은 부드러운 애니메이션 효과와 함께 동작하지만, 때때로 다른 애니메이션 효과를 적용하고 싶을 수 있습니다. 이 글에서는 ExpansionPanel 애니메이션 효과를 커스터마이징하는 방법을 알아보겠습니다.

애니메이션 커스터마이징하기

ExpansionPanel의 애니메이션 효과를 커스터마이징하기 위해선 PanelController를 사용해야 합니다. PanelController는 ExpansionPanel의 상태를 제어하고 애니메이션을 조작하는 역할을 합니다.

먼저, PanelController를 초기화해주어야 합니다. 그런 다음 각 ExpansionPanel에 해당 PanelController를 지정해야 합니다. 이렇게 하면 해당 ExpansionPanel의 애니메이션 상태를 PanelController로 제어할 수 있습니다.

PanelController _panelController = PanelController();

ExpansionPanelList(
  expansionCallback: (index, isExpanded) {
    _panelController.toggle();
  },
  children: [
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return ListTile(
          title: Text('Expansion Panel Header'),
        );
      },
      body: ListTile(
        title: Text('Expansion Panel Body'),
      ),
      isExpanded: _panelController.isPanelOpen,
    ),
    // Add more ExpansionPanel widgets here
  ],
)

위의 예시에서는 _panelController를 선언하고 expansionCallback 콜백에서 _panelController.toggle()을 호출하여 애니메이션 상태를 제어합니다. isExpanded 상태를 _panelController.isPanelOpen에 할당하여 ExpansionPanel의 초기 확장 상태를 제어합니다.

추가적인 커스터마이징

애니메이션 커스터마이징 이외에도 ExpansionPanel의 레이아웃과 스타일을 커스터마이징할 수 있습니다. ExpansionPanel에서 제공하는 다양한 속성을 활용하여 헤더와 바디의 디자인을 변경하거나, 애니메이션의 속도와 타이밍을 조정할 수 있습니다.

ExpansionPanelList(
  elevation: 2, // 그림자 효과
  animationDuration: Duration(milliseconds: 500), // 애니메이션 속도
  expandedHeaderPadding: EdgeInsets.all(16), // 확장 시 헤더 패딩
  collapsedHeaderPadding: EdgeInsets.all(16), // 접힐 시 헤더 패딩
  children: [
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return ListTile(
          title: Text('Expansion Panel Header'),
        );
      },
      body: ListTile(
        title: Text('Expansion Panel Body'),
      ),
      isExpanded: true,
    ),
    // Add more ExpansionPanel widgets here
  ],
)

위의 예시에서는 elevation을 사용하여 그림자 효과를 추가하고, animationDuration을 사용하여 애니메이션 속도를 조정합니다. 또한, expandedHeaderPadding과 collapsedHeaderPadding을 사용하여 헤더의 패딩을 조정할 수 있습니다.

결론

이처럼 ExpansionPanel 위젯의 애니메이션 효과를 커스터마이징하는 방법을 알아보았습니다. PanelController를 활용하여 원하는 애니메이션 효과와 속도를 적용할 수 있으며, 기타 속성을 사용하여 더 많은 커스터마이징을 할 수 있습니다. Flutter에서 제공하는 다양한 위젯을 활용하여 앱의 사용자 경험을 향상시킬 수 있습니다.

애니메이션 커스터마이징하기

추가적인 커스터마이징

결론

참고 자료