[flutter] 플러터(expandable)을 이용한 앱 개발 사례

04 Dec 2023

flutter

플러터(flutter)는 구글에서 개발한 UI 프레임워크로, iOS와 Android 모두에서 동일한 코드로 앱을 개발할 수 있는 장점이 있습니다. 플러터의 다양한 위젯 중 하나인 “expandable”은 펼침/접힘 기능을 제공하여 사용자 경험을 향상시킬 수 있습니다. 이번 글에서는 플러터(expandable)을 이용하여 개발된 앱 사례를 살펴보겠습니다.

1. 확장 가능한 리스트

확장 가능한 리스트 앱

위의 화면은 플러터(expandable)의 “리스트” 위젯을 활용한 앱입니다. 사용자는 리스트의 각 항목을 터치하여 자식 항목을 확장 또는 접을 수 있습니다. 이렇게 함으로써 사용자는 필요한 정보에 쉽게 접근할 수 있습니다.

이러한 앱은 일반적으로 FAQ, 쇼핑 앱의 카테고리 목록 등 다양한 곳에서 사용될 수 있습니다.

import 'package:flutter/material.dart';

class ExpandableListApp extends StatefulWidget {
  @override
  _ExpandableListAppState createState() => _ExpandableListAppState();
}

class _ExpandableListAppState extends State<ExpandableListApp> {
  List<bool> _expanded = List<bool>.generate(3, (index) => false);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 3,
      itemBuilder: (BuildContext context, int index) {
        return ExpansionPanelList(
          elevation: 1,
          expandedHeaderPadding: EdgeInsets.all(0),
          expansionCallback: (int panelIndex, bool isExpanded) {
            setState(() {
              _expanded[panelIndex] = !isExpanded;
            });
          },
          children: [
            ExpansionPanel(
              body: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text(
                  '내용 ${index + 1}',
                  style: TextStyle(fontSize: 16.0),
                ),
              ),
              headerBuilder: (BuildContext context, bool isExpanded) {
                return ListTile(
                  title: Text('항목 ${index + 1}'),
                );
              },
              isExpanded: _expanded[index],
            ),
          ],
        );
      },
    );
  }
}

void main() {
  runApp(MaterialApp(home: ExpandableListApp()));
}

2. 펼침/접힘 애니메이션

펼침/접힘 애니메이션

위의 화면은 플러터(expandable)를 이용하여 펼침/접힘 애니메이션을 적용한 앱입니다. 사용자는 각각의 카드를 터치하여 해당 카드의 내용을 펼칠 수 있습니다. 이렇게 함으로써 사용자는 정보를 세부적으로 확인할 수 있습니다.

펼침/접힘 애니메이션은 앱에 동적인 요소를 제공하고 사용자와의 상호작용을 생생하게 만들어줍니다.

import 'package:flutter/material.dart';

class ExpandableCardsApp extends StatefulWidget {
  @override
  _ExpandableCardsAppState createState() => _ExpandableCardsAppState();
}

class _ExpandableCardsAppState extends State<ExpandableCardsApp> {
  List<bool> _expanded = List<bool>.generate(3, (index) => false);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 3,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          elevation: 2,
          margin: EdgeInsets.all(16.0),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8.0),
          ),
          child: ExpansionPanelList(
            elevation: 0,
            expansionCallback: (int panelIndex, bool isExpanded) {
              setState(() {
                _expanded[index] = !isExpanded;
              });
            },
            children: [
              ExpansionPanel(
                body: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Text(
                    '내용 ${index + 1}',
                    style: TextStyle(fontSize: 16.0),
                  ),
                ),
                headerBuilder: (BuildContext context, bool isExpanded) {
                  return ListTile(
                    title: Text('카드 ${index + 1}'),
                  );
                },
                isExpanded: _expanded[index],
              ),
            ],
          ),
        );
      },
    );
  }
}

void main() {
  runApp(MaterialApp(home: ExpandableCardsApp()));
}

마무리

플러터의 “expandable” 위젯을 활용하면 펼침/접힘 기능을 간편하게 구현할 수 있습니다. 위의 예시를 참고하여 플러터(expandable)을 이용한 앱을 개발해보세요. 더 많은 플러터 관련 정보는 공식 문서를 참조하시기 바랍니다.