[Flutter] ExpansionTile padding,border 다루기

 

ExpansionTile을 사용하면 손쉽게 collapse 기능을 이용할 수 있다. 하지만 ExpansionTile을 사용할 때, ExpansionTile위젯 내부 속성으로 padding이나 border 등을 조작할 수가 없어 헤맨 경험이 한 번쯤은 있을 것 같다. 

 

ExpansionTile의 속성에 없는 값을 조정하고 싶을 때는 아래와 같이 Theme을 이용하면 된다. 

 

// 하위 위젯의 구분선을 투명하게 만듦
Theme(
   data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
        child: ExpansionTile(...)
)

 

Theme은 주로 MaterialApp의 theme속성에서 사용된다. theme을 통해  MaterialApp에 대한 전체적인 시각적 효과 또는 앱 내의 위젯 하위 트리 구성을 정의할 수 있는데, 하나의 위젯에만 적용을 하고 싶을 때는 Theme 위젯을 사용하여 위젯을 감싸주면 된다. 

 

Theme에도 종류가 있는데 ExpansionTile에서 padding을 없애기 위해서는 ListTileTheme을 사용해주면 된다. 

 

ListTileTheme(
            contentPadding: EdgeInsets.all(0),
            child: ExpansionTile(...)
)

 

ExpansionTile의 padding을 없애는데 갑자기 ListTileTheme이 나와 당황할 수 도 있지만 위젯의 이름보다는 위젯이 가진 속성을 잘 살펴 보는 것이 중요하다.

 

ListTileTheme의 생성자를 살펴보자

const ListTileTheme({
  super.key,
  ... 
  
  EdgeInsetsGeometry? contentPadding,
  Color? tileColor,
  Color? selectedTileColor,
  
  ...
})

 

ListTileTheme에 있는 contentPadding이 EdgeInsetsGeometry타입의 값을 사용하고 있고, 이를 통해 padding값을 조절할 수 있기 때문에 ListTileTheme을 사용해준다라고 생각하는 것이 이해하기가 쉬울 것 같다.