[flutter] ExpansionPanelList에서 패널 확장/축소 애니메이션 지연 설정 방법

07 Dec 2023

flutter

ExpansionPanelList 위젯은 패널을 확장하거나 축소하는 동적인 UI를 만들 때 유용한 위젯입니다. 하지만 기본적으로 패널의 확장 및 축소 애니메이션은 즉시 발생하게 되어 있습니다. 이번 기술 블로그에서는 ExpansionPanelList에서 패널 확장 및 축소 애니메이션을 지연시키는 방법을 알려드리겠습니다.

패널 확장/축소 애니메이션 지연 설정 방법

ExpansionPanelList에서 패널 확장/축소 애니메이션을 지연시키기 위해서는 ExpansionPanelList 위젯의 expansionCallback 속성을 활용해야 합니다. expansionCallback은 패널이 확장/축소될 때 호출되는 콜백 함수입니다.

아래는 ExpansionPanelList에서 패널 확장/축소 애니메이션을 지연시키는 예시 코드입니다.

import 'package:flutter/material.dart';

class CustomExpansionPanelList extends StatefulWidget {
  @override
  _CustomExpansionPanelListState createState() => _CustomExpansionPanelListState();
}

class _CustomExpansionPanelListState extends State<CustomExpansionPanelList> {
  List<Item> _items = [
    Item(
      headerValue: '패널 1',
      expandedValue: '패널 1 확장 뷰입니다.',
      isExpanded: false,
    ),
    Item(
      headerValue: '패널 2',
      expandedValue: '패널 2 확장 뷰입니다.',
      isExpanded: false,
    ),
    Item(
      headerValue: '패널 3',
      expandedValue: '패널 3 확장 뷰입니다.',
      isExpanded: false,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        child: ExpansionPanelList(
          elevation: 1,
          expandedHeaderPadding: EdgeInsets.zero,
          expansionCallback: (int index, bool isExpanded) {
            setState(() {
              _items[index].isExpanded = !isExpanded;
            });
            Future.delayed(Duration(milliseconds: 300), () {
              _updatePanelVisibility(index);
            });
          },
          children: _items.map<ExpansionPanel>((Item item) {
            return ExpansionPanel(
              headerBuilder: (BuildContext context, bool isExpanded) {
                return ListTile(
                  title: Text(item.headerValue),
                );
              },
              body: ListTile(
                title: Text(item.expandedValue),
              ),
              isExpanded: item.isExpanded,
            );
          }).toList(),
        ),
      ),
    );
  }

  void _updatePanelVisibility(int index) {
    setState(() {
      _items[index].isVisible = !_items[index].isVisible;
    });
  }
}

class Item {
  Item({
    required this.headerValue,
    required this.expandedValue,
    this.isExpanded = false,
  });

  final String headerValue;
  final String expandedValue;
  bool isExpanded;
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: CustomExpansionPanelList(),
    ),
  ));
}

위의 코드에서는 ExpansionPanelList 위젯을 사용하여 패널을 확장/축소하는 동적인 UI를 만들었습니다. expansionCallback 내에서는 패널의 확장/축소 상태를 업데이트하고 지연된 시간(Duration(milliseconds: 300)) 이후에 _updatePanelVisibility 함수를 호출하여 패널의 가시성을 업데이트합니다.

이제 ExpansionPanelList 위젯을 사용하여 패널 확장/축소 애니메이션을 지연시킬 수 있는 방법을 알아보았습니다. 이를 활용하여 동적인 UI를 더욱 효과적으로 구현할 수 있습니다.

참고 문서:

ExpansionPanelList class - flutter.dev