Flutter ExpansionPanel 문서

ExpansionPanel, ExpansionPanelList

ExpansionPanel은 주로 자세한 정보를 전달할 때 사용하거나 오른쪽 사진처럼 분류할 때도 사용하기 좋습니다. 다만, ExpansionPanel은 단독으로 사용이 불가능하며 ExpansionPanelList의 자식으로만 사용이 가능합니다.

---

프로퍼티 종류

• headerBuilder - 헤더를 생성하는 builder
• body - 펼쳤을 때 보이는 공간
• isExpanded - 확장 여부
• canTapOnHeader - default Tap 영역은 화살표 아랫방향을 눌러야 펼쳐지지만 이 프로퍼티를 true 하게 되면 터치영역이 header까지 늘어나게 됨
• backgroundColor

SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.all(10),
          child: ExpansionPanelList(
            animationDuration: Duration(milliseconds: 1000),
            elevation: 4,
            children: list.map<ExpansionPanel>((Ramen ramen) {
              return ExpansionPanel(
                  headerBuilder: (BuildContext context, bool isExpanded) {
                    return ListTile(
                      title: Text(ramen.header),
                    );
                  },
                  body: Container(
                    padding: EdgeInsets.fromLTRB(10, 0, 10, 10),
                    child: Text(
                      ramen.body,
                      style: TextStyle(fontSize: 17),
                    ),
                  ),
                  isExpanded: ramen.expanded,
                  canTapOnHeader: true);
            }).toList(),
            expansionCallback: (int index, bool isExpanded) {
              setState(() {
                list[index].expanded = !isExpanded;
              });
            },
          ),
        ),
      ),

ExpansionPanelList.radio?

• ExpansionPanelList 같은 경우 여러 개의 패널들을 확장시킬 수 있지만 ExpansionPanelList.radio의 경우는 오직 하나만 확장시킬 수 있음
• ~list.radio 에서는 각 패널의 id 값이 필요함
  • 이유 : A unique identifier [value] must be assigned to each panel. This identifier allows the [ExpansionPanelList] to determine which [ExpansionPanelRadio] instance should be expanded.

ExpansionPanelRadio와 ExpansionPanel의 차이점

일반 Panel 은 모두 확장이 가능해서 각각의 패널에 확장 여부를 저장시키는 변수가 필요하지만 ExpansionPanelRadio의 경우에는 하나만 확장될 수 있기 때문에 확장 여부를 저장시키는 변수가 필요 없기 때문에 isExpanded 프로퍼티가 필요하지 않음

ExpansionPanel({
  required this.headerBuilder,
  required this.body,
  // 존재
  this.isExpanded = false,
  this.canTapOnHeader = false,
  this.backgroundColor,
}) : assert(headerBuilder != null),
     assert(body != null),
     assert(isExpanded != null),
     assert(canTapOnHeader != null);
     
ExpansionPanelRadio({
  required this.value,
  required ExpansionPanelHeaderBuilder headerBuilder,
  required Widget body,
  bool canTapOnHeader = false,
  Color? backgroundColor,
}) : assert(value != null),
    super(
      body: body,
      headerBuilder: headerBuilder,
      canTapOnHeader: canTapOnHeader,
      backgroundColor: backgroundColor,
    );

// id가 필요하기 때문에 생성된 위치의 index 값을 넣음 또는 id 를 생성할 로직을 구현하면 됨
List<Ramen> generateRamen(int numberOfRamen) {
  return List.generate(numberOfRamen, (index) => Ramen(list[index].header, list[index].body, id: index));
}

List<Ramen> list = generateRamen(7);

ExpansionPanelList.radio(
            animationDuration: Duration(milliseconds: 1000),
            children: list.map<ExpansionPanelRadio>((Ramen ramen) {
              return ExpansionPanelRadio(
                value: ramen.id,
                headerBuilder: (BuildContext context, bool isExpanded) {
                  return ListTile(
                    title: Text(ramen.header),
                  );
                },
                body: Container(
                  padding: EdgeInsets.fromLTRB(10, 0, 10, 10),
                  child: Text(
                    ramen.body,
                    style: TextStyle(fontSize: 17),
                  ),
                ),
              );
            }).toList(),
          ),

Source Code

SeongWoo-97/blog_upload_project