[flutter] 플러터(expandable)을 활용한 모바일 앱 개발

04 Dec 2023

flutter

안녕하세요! 오늘은 Flutter의 확장 가능한 위젯인 Expandable을 활용하여 모바일 앱을 개발하는 방법에 대해 알아보겠습니다.

Expandable이란?

Expandable은 사용자가 필요에 따라 확장 또는 축소할 수 있는 위젯을 제공합니다. 이를 통해 사용자는 앱 내의 세부 정보나 추가 옵션 등을 간단히 접고 펼칠 수 있습니다. Expandable은 다양한 상황에서 유연하게 사용할 수 있어 사용자 경험을 향상시키는 데 도움이 됩니다.

플러터에서 Expandable 위젯 사용하기

Expandable 패키지 추가하기

먼저, Flutter 프로젝트에 Expandable 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요.

dependencies:
  expandable: ^5.0.1

이후, 터미널에서 flutter pub get 명령어를 사용하여 패키지를 설치합니다.

Expandable 위젯 사용하기

Expandable 위젯은 ListView나 Column 등과 함께 사용할 수 있습니다. 다음은 Expandable 위젯을 사용한 예시 코드입니다.

import 'package:flutter/material.dart';
import 'package:expandable/expandable.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ExpandableListView(
      children: [
        ExpandablePanel(
          header: Text('축소/확장 가능한 패널'),
          expanded: Text('패널의 내용'),
          collapsed: Text('패널의 축소된 내용'),
          tapHeaderToExpand: true,
          hasIcon: true,
        ),
        // 추가적인 ExpandablePanel 위젯들을 추가할 수 있습니다.
      ],
    );
  }
}

위 코드에서는 ExpandableListView를 사용하여 다수의 Expandable Panel을 담고 있는 ListView를 생성합니다. 각각의 ExpandablePanel은 header, expanded, collapsed 등의 속성을 가지며, 이를 통해 패널의 펼침 여부와 내용을 설정할 수 있습니다.

확장 가능한 앱 디자인 개발하기

플러터에서 Expandable 위젯을 활용하여 확장 가능한 앱 디자인을 개발하는 것은 간단하고 유연한 방법입니다. 다음은 Expandable 위젯을 사용하여 확장 가능한 리스트 아이템을 구현하는 예시 코드입니다.

import 'package:flutter/material.dart';
import 'package:expandable/expandable.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 5,
      itemBuilder: (BuildContext context, int index) {
        return ExpandableNotifier(
          child: Padding(
            padding: const EdgeInsets.all(10),
            child: Card(
              child: Column(
                children: [
                  ExpandablePanel(
                    header: Text('리스트 아이템 $index'),
                    expanded: Text('리스트 아이템 $index의 내용'),
                    collapsed: Text('리스트 아이템 $index의 축소된 내용'),
                    tapHeaderToExpand: true,
                    hasIcon: true,
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

위 코드에서는 ListView.builder를 사용하여 다수의 확장 가능한 리스트 아이템을 생성합니다. 각각의 아이템은 ListTile 위젯과 Expandable 위젯을 조합하여 구현됩니다.

마무리

이렇게 Flutter의 Expandable을 활용하여 모바일 앱 개발을 진행할 수 있습니다. Expandable은 사용자가 필요에 따라 내용을 펼치고 축소할 수 있는 유연한 인터페이스를 제공하여 사용자 경험을 개선하는 데 도움이 됩니다.

더 자세한 내용은 Flutter Expandable 패키지 문서를 참고해주세요. 플러터의 다른 위젯들과 조합하여 다양한 기능을 구현할 수 있습니다.

감사합니다!