플러터(Flutter)는 Google에서 개발한 크로스 플랫폼 앱 개발 프레임워크로, 멋진 애니메이션 효과를 쉽게 구현할 수 있는 기능을 제공합니다. 이 중에서도 expandable을 이용하면 앱 화면에서 펼침 및 접힘 효과를 구현할 수 있습니다.

1. expandable 패키지 추가하기

애니메이션 효과를 구현하기 위해 먼저 expandable 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음의 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  expandable: ^5.0.1

의존성 추가 후, 터미널에서 flutter pub get 명령어를 입력하여 패키지를 설치합니다.

2. ExpandableNotifier를 이용한 화면 구성

expandable 패키지를 추가한 후, 화면에서 펼침 및 접힘 효과를 구현하기 위해 ExpandableNotifier 위젯을 사용합니다. 이 위젯은 확장 가능한 부분을 제어하기 위한 상태 정보를 제공합니다. 따라서 화면을 구성할 때, ExpandableNotifier를 상위 위젯으로 감싸줍니다.

class ExpandableAnimationScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ExpandableNotifier(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Expandable Animation'),
        ),
        body: ListView(
          children: [
            ExpandablePanel(
              header: Text('Click to Expand'),
              expanded: Text('Hidden Content'),
              tapHeaderToExpand: true,
              hasIcon: true,
            ),
            // ...
          ],
        ),
      ),
    );
  }
}

3. 펼침 및 접힘 효과 적용하기

ExpandablePanel 위젯을 이용하여 실제로 펼침 및 접힘 효과를 적용할 수 있습니다. 이 위젯은 헤더와 내용으로 구성되며, 헤더를 누르면 내용이 펼쳐지고, 다시 누르면 접히도록 동작합니다.

ExpandablePanel(
  header: Text('Click to Expand'),
  expanded: Text('Hidden Content'),
  tapHeaderToExpand: true,
  hasIcon: true,
),

다양한 옵션을 설정하여 효과를 커스터마이징할 수도 있습니다.

• tapHeaderToExpand: true로 설정하면, 헤더를 누르면 내용이 펼쳐집니다.
• hasIcon: true로 설정하면, 헤더 오른쪽에 화살표 아이콘이 추가됩니다.

마무리

플러터의 expandable 패키지를 이용하면 애니메이션 효과를 구현하기 쉽게 할 수 있습니다. 확장 가능한 부분을 제어하기 위해 ExpandableNotifier 위젯을 사용하고, ExpandablePanel 위젯으로 펼침 및 접힘 효과를 구현할 수 있습니다. 추가적으로 tapHeaderToExpand와 hasIcon 옵션을 설정하여 효과를 커스터마이즈할 수 있습니다.

더 자세한 내용은 expandable 패키지 GitHub 저장소를 참고하시기 바랍니다.

Happy coding!