플러터(https://flutter.dev)는 크로스 플랫폼 모바일 애플리케이션 개발을 위한 프레임워크입니다. 플러터의 다양한 위젯 중 하나인 Expandable을 이용하면 접고 펼칠 수 있는 확장 패널을 간편하게 구현할 수 있습니다. 이번 글에서는 Expandable 위젯을 사용하는 방법에 대해 알아보겠습니다.

Expandable 위젯

Expandable 위젯은 플러터의 flutter_expandable 패키지를 통해 제공됩니다. 이 패키지는 확장 패널 용도로 사용되며, 위젯 내의 내용을 접을 때와 펼칠 때의 애니메이션 효과를 제공합니다.

패키지 추가

flutter_expandable 패키지를 사용하기 위해서는 먼저 해당 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  flutter_expandable: ^1.0.0

의존성을 추가한 후에는 패키지를 설치하기 위해 프로젝트 폴더에서 flutter pub get 명령을 실행합니다.

Expandable 사용하기

1. 먼저 flutter_expandable 패키지를 import 합니다:

import 'package:flutter_expandable/flutter_expandable.dart';

1. ExpandablePanel 위젯을 사용하기 위해, 이를 감싸는 ExpandableNotifier 위젯을 생성합니다:

ExpandableNotifier(
  child: ExpandablePanel(
    header: Text("제목"),
    collapsed: Text("접힌 내용"),
    expanded: Text("열린 내용"),
    tapHeaderToExpand: true,
    hasIcon: true,
  ),
)

ExpandablePanel 위젯은 header, collapsed, expanded 등 다양한 속성을 가지고 있습니다. header는 패널 상단에 표시되는 위젯이고, collapsed는 패널이 접혔을 때 표시되는 위젯입니다. expanded는 패널이 열렸을 때 표시되는 위젯입니다. tapHeaderToExpand 속성은 패널 헤더를 탭하여 패널을 확장할지 여부를 결정하며, hasIcon 속성은 패널 헤더에 아이콘을 표시할지 여부를 결정합니다.

1. Expandable 위젯으로 확장 가능한 내용을 추가할 수 있습니다. 예를 들어, 텍스트와 이미지를 포함한 내용을 추가하려면 다음과 같이 작성할 수 있습니다:

Expandable(
  collapsed: Text("접힌 내용"),
  expanded: Column(
    children: [
      Text("펼친 내용"),
      Image.asset("assets/image.png"),
    ],
  ),
)

1. 나머지 내용을 필요에 따라 디자인 및 기능을 추가하면 됩니다.

결론

위의 단계를 따라하면 간단하게 플러터의 Expandable을 사용할 수 있습니다. flutter_expandable 패키지를 추가하고 ExpandablePanel, Expandable 위젯을 사용하여 접고 펼칠 수 있는 확장 패널을 구현할 수 있습니다.