[ Flutter ] ExpansionTile 확장 리스트

확장 리스트를 만들기 위해

ExpansionTile을 이용

누르면 리스트가 확장되고 접히는 기능을 구현

---

 

text가 다크테마에 적용되도록 style적용

기존에 child는 title, subTitle로 구성되어있어서

Row를 주어 한 줄로 표시 이후 spaceBetween으로 양 사이드에 위치하도록 적용

 bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return ExpansionTile(
      title: Text('Item 1',style: TextStyle(color: textColor)),
      children: [
        Padding(
          padding: EdgeInsets.all(16.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('Item 1 child',style: TextStyle(color: textColor),),
              Text('Details go here',style: TextStyle(color: textColor),),
            ],
          ),
        ),
      ],
      onExpansionChanged: (bool expanded) {
        setState(() {
          _isExpanded = expanded;
        });
      },
    );
  }

 

ExpansionTile을 이용하면 위 아래로 divider가 나와서 divider를 안보여주게 하기 위해서 투명색으로 적용

Theme widget을 활용하여 dividerColor를 투명색으로 적용

Theme(
      data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
      child: Padding(
        padding: EdgeInsets.fromLTRB(4.0, 4.0, 4.0, 4.0),
        child: ExpansionTile(
          ...
        ),
      ),
    );

반응형

이후 어플의 컨셉에 맞추기 위해서

따로 만들어둔 CustomContainer를 적용

 

customContainer는 현재 높이만 따로 받도록 구현

class CustomContainer extends StatelessWidget {
  final double? height;
  final Widget child;

  const CustomContainer({
    Key? key,
    this.height,
    required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 0.0),
      child: Container(
        height: height,
        decoration: buildDecoration(),
        child: child,
      ),
    );
  }
}