flutter & dart - 아코디언 같은 ExpantionPanelList

Overview.

어 이거 그냥 딱 보면 아 걔네? 알거다. 왜냐면 아코디언 같거든요 아무튼 목차부터

1. ExpantionPanelList

 

0. 문서

https://api.flutter.dev/flutter/material/ExpansionPanelList-class.html

ExpansionPanelList class - material library - Dart API

 

1. ExpansionPanelList 란?

하위 항목을 배치하고 확장에 애니메이션을 적용하는 재질 확장 패널 목록입니다.

확장 상태가 변경되면 ExpandCallback이 호출 됩니다 . 일반 ExpansionPanelList 위젯의 경우 ExpansionPanel.isExpanded 에 대한 업데이트된 값으로 ExpansionPanelList를 다시 빌드하는 것은 상위 위젯의 책임입니다 . ExpansionPanelList.radio 위젯 의 경우 열린 상태는 내부적으로 추적되며 이전에 열린 패널(닫고 있음)과 이전에 닫힌 패널(열림) 모두에 대해 콜백이 호출됩니다.

 

뭐 아무튼 바로 해봅시다.

Dismission 스와이프도 사용하였습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _Home(),
    );
  }
}

class _Home extends StatefulWidget {
  const _Home({super.key});

  @override
  State<_Home> createState() => _HomeState();
}

class Item {
  int id;
  bool isState;

  Item(this.id, this.isState);
}

class _HomeState extends State<_Home> {
  var data = [
    Item(1, false),
    Item(2, false),
    Item(3, false),
    Item(4, false),
    Item(5, false),
    Item(6, false),
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        // ExpantionPanelList 는 제한이 없으므로 오류가 나옴
        // 따라서 SingleChildScrollView로 감싸야함
        body: SingleChildScrollView(
          // 확장 List 형식
          child: ExpansionPanelList(
            children: List.generate(
              data.length,
              (index) => buildExpansionPanel(data[index]),
            ),
          ),
        ),
      ),
    );
  }

  ExpansionPanel buildExpansionPanel(Item item) {
    return ExpansionPanel(
      isExpanded: item.isState, // 확장 : true , 미확장  : false
      // build 되었을 때
      headerBuilder: (context, isExpanded) {
        return Dismissible(
          key: UniqueKey(), // 배열요소 (수정,삭제,추가)
          onDismissed: (direction) {
            print("item id : ${item.id}"); // 해당 값 삭제
            // where 함수 : 값을 걸러내서 return 을 해줌 그것을 새로운 배열에 담을 수 있음
            // removeWhere함수 : 실제 값을 수정함.
            setState(() {
              data.removeWhere((element) => element.id == item.id);
            });
          },
          child: ListTile(
            title: Text("item Child : ${item.id} 번"),
            onTap: () {
              // 스테이트변경
              setState(() {
                item.isState = !isExpanded;
              });
            },
          ),
        );
      },
      body: ListTile(
        title: Text("item Child"),
      ),
    );
  }
}

 

2. 차근차근 봐보자

첫째. 아코디언과 마찬가지로 이놈들은 개별적으로 움직여야 한다. 따라서 id [아니면 index 값으로] , 초기값을 false 로 한 객체를 생성했다. 다른 방식도 가능하다.

class Item {
  int id;
  bool isState;

  Item(this.id, this.isState);
}

  var data = [
    Item(1, false),
    Item(2, false),
    Item(3, false),
    Item(4, false),
    Item(5, false),
    Item(6, false),
  ];

 

둘째 . ExpansionPanelList

이는 아코디언 리스트를 뿌릴 수 있는 리스트 위젯을 생성한다. 그 안에는 children 으로 여러 배열을 생성할 수 있게 해주는데 이때 List.generate 를 사용했다.

 

추가적으로 주의점은 ExpantionPanelList 는 확장이 겁나되나보다. 에러가 나므로 SingleChildScrollView로 감싼형태로 진행했다.

SingleChildScrollView(
          // 확장 List 형식
          child: ExpansionPanelList(
            children: List.generate(
              data.length,
              (index) => buildExpansionPanel(data[index]),
            ),
          ),
        )

 

셋째. ExpansionPanel

이 위젯에는 isExpanded [확장 여부] 와 headerBuilder , body 가 있다.

headerBuilder 는 처음 보여질 컨테이너고 body 는 확장 되었을때 보여줄 컨테이너이다.

onTap 에서 Item 객체의 isState 를 변경 후 setState 로 재 빌드를 실행한다.

나머지는 뭐.. 다들 아실 거라 생각해서 생략하겠다.

  ExpansionPanel buildExpansionPanel(Item item) {
    return ExpansionPanel(
      isExpanded: item.isState, // 확장 : true , 미확장  : false
      // build 되었을 때
      headerBuilder: (context, isExpanded) {
        return Dismissible(
          key: UniqueKey(), // 배열요소 (수정,삭제,추가)
          onDismissed: (direction) {
            print("item id : ${item.id}"); // 해당 값 삭제
            // where 함수 : 값을 걸러내서 return 을 해줌 그것을 새로운 배열에 담을 수 있음
            // removeWhere함수 : 실제 값을 수정함.
            setState(() {
              data.removeWhere((element) => element.id == item.id);
            });
          },
          child: ListTile(
            title: Text("item Child : ${item.id} 번"),
            onTap: () {
              // 스테이트변경
              setState(() {
                item.isState = !isExpanded;
              });
            },
          ),
        );
      },
      body: ListTile(
        title: Text("item Child"),
      ),
    );
  }