소개

디자인 패턴은 앱 또는 웹 개발에서 중요한 개념입니다. 이는 코드 구조와 기능을 쉽게 구성할 수 있게 도와주는 효율적인 방법론입니다. 이번 글에서는 플러터의 expandable을 이용한 디자인 패턴에 대해 알아보겠습니다. expandable은 플러터에서 특정 위젯을 확장하고 축소하는 기능을 제공하는 패키지입니다.

expandable 패키지 설치

먼저, expandable 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음 코드를 추가해주세요:

dependencies:
  expandable: ^4.1.3

그리고 flutter pub get 명령어를 터미널에 입력하여 패키지를 설치합니다.

expandable 사용법

expandable 패키지를 사용하기 위해 먼저 ExpandableNotifier 위젯을 사용해야 합니다. 이 위젯은 확장 및 축소 동작을 관리하는 역할을 합니다.

ExpandableNotifier(
  child: ListView.builder(
    itemCount: data.length,
    itemBuilder: (context, index) {
      return ExpandablePanel(
        header: Text('Header'),
        collapsed: Text('Content'),
        expanded: Text('Expanded Content'),
        tapHeaderToExpand: true,
        hasIcon: false,
      );
    },
  ),
)

위 예제에서 ListView.builder 위젯을 사용하여 리스트 아이템을 생성하고, ExpandablePanel 위젯으로 각 아이템을 확장 가능한 패널로 만들었습니다. header는 패널의 헤더 부분에 표시될 위젯이고, collapsed는 패널이 축소된 상태에서 표시될 위젯입니다. expanded는 패널이 확장된 상태에서 표시될 위젯입니다.

tapHeaderToExpand 속성은 헤더를 클릭하여 패널을 확장할지 여부를 결정합니다. hasIcon 속성은 패널 옆에 확장/축소 아이콘을 표시할지 여부를 결정합니다.

확장 가능한 리스트 만들기

위에서 설명한 expandable 패키지를 사용하면 확장 가능한 리스트를 쉽게 만들 수 있습니다. 이를 통해 앱의 사용자 경험을 향상시킬 수 있습니다.

class ExpandableList extends StatelessWidget {
  final List<Item> data;

  ExpandableList({required this.data});

  @override
  Widget build(BuildContext context) {
    return ExpandableNotifier(
      child: ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, index) {
          return ExpandablePanel(
            header: Text(data[index].title),
            collapsed: Text(data[index].description),
            expanded: Column(
              children: [
                Text('Details:'),
                Text(data[index].details),
              ],
            ),
            tapHeaderToExpand: true,
            hasIcon: false,
          );
        },
      ),
    );
  }
}

위 코드는 ExpandableList라는 위젯을 정의하는 예제입니다. data는 확장 가능한 리스트에 표시될 데이터를 저장하는 목록입니다. ListView.builder를 사용하여 리스트 아이템을 생성하고, ExpandablePanel을 이용하여 각 아이템을 확장 가능한 패널로 만들어줍니다. 각 패널의 헤더, 축소 및 확장 상태에서의 내용은 data에서 가져온 값을 사용합니다.

결론

플러터에서 expandable 패키지를 이용하면 간단하게 확장 가능한 디자인 패턴을 구현할 수 있습니다. 이를 통해 앱의 사용자 인터페이스를 더욱 유연하고 직관적으로 만들 수 있습니다. expandable 패키지의 다양한 속성을 활용하면 좀 더 다양한 디자인을 구성할 수도 있습니다.