플러터는 Google에서 개발한 UI 프레임워크로, iOS와 Android 앱을 동시에 개발할 수 있는 크로스 플랫폼 개발 도구입니다. 플러터를 사용하면 빠르게 멋진 앱을 만들 수 있으며, Expandable 위젯을 사용하여 편리한 UI 요소를 구현할 수 있습니다. 이 글에서는 플러터와 Expandable 위젯을 사용하여 커뮤니티 앱을 개발하는 방법에 대해 알아보겠습니다.

1. Expandable 위젯 설치

Expandable 위젯을 사용하기 위해 먼저 해당 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 expandable: ^5.0.1을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  expandable: ^5.0.1

설치가 완료되면 pub get 명령어를 실행하여 패키지를 가져옵니다.

2. Expandable 위젯 사용 방법

Expandable 위젯을 사용하기 위해 먼저 expandable.dart를 import합니다.

import 'package:expandable/expandable.dart';

다음으로, Expandable 위젯을 포함할 컨테이너를 만듭니다.

Container(
  child: ExpandablePanel(
    header: Text('제목'),
    expanded: Text('내용'),
    hasIcon: true,
  ),
);

위 코드에서 header는 확장 패널의 헤더입니다. expanded에는 헤더를 클릭했을 때 나타날 내용을 작성합니다. hasIcon은 헤더 오른쪽에 화살표 아이콘을 표시할지 여부를 결정합니다.

3. 커뮤니티 앱에 Expandable 위젯 적용하기

커뮤니티 앱에서는 주로 게시물 목록을 표시하는데, 게시물들의 내용은 펼침/접힘 기능을 가지는 것이 사용자 경험을 향상시킬 수 있습니다.

ListView.builder(
  itemCount: posts.length,
  itemBuilder: (BuildContext context, int index) {
    bool isExpanded = false; // 최초에는 접힌 상태로 표시

    return ExpandablePanel(
      header: ListTile(
        title: Text(posts[index].title),
      ),
      expanded: Text(posts[index].content),
      hasIcon: true,
      collapsed: InkWell(
        onTap: () {
          setState(() {
            isExpanded = !isExpanded; // 펼침/접힘 상태 변경
          });
        },
        child: Row(
          children: [
            Icon(isExpanded ? Icons.expand_less : Icons.expand_more),
            Text(isExpanded ? '접기' : '펼치기'),
          ],
        ),
      ),
    );
  },
);

위 코드에서 posts는 게시물 목록을 가진 List이며, ExpandablePanel은 게시물의 제목을 헤더로, 내용을 내용으로 사용합니다. collapsed는 헤더를 눌렀을 때 펼침/접힘 상태를 변경하고 아이콘과 텍스트를 표시합니다.

결론

플러터와 Expandable 위젯을 사용하여 커뮤니티 앱을 개발하는 방법에 대해 알아보았습니다. 플러터는 다양한 UI 요소를 구현하기 위한 많은 패키지를 제공하고 있으며, Expandable 위젯은 편리한 펼침/접힘 기능을 제공하여 사용자 경험을 향상시킬 수 있습니다. 앱을 개발할 때 이러한 기능을 활용해보세요!