[Flutter] ListTile Widget 사용법

 

 

 

ListTile을 사용하면 간단한 위젯을 만들 때는 편했지만 디테일한 UI를 구성할 때는 불편해서 잘 사용하지 않았었습니다.

주로 padding문제 때문이었는데, 이 기회에 어떤 특성들이 padding을 갖고 있는지 체크해봤습니다. 

 

 

1. ListTile은 기본적으로 좌우 패딩이 들어가 있습니다. 그래서 원하는 패딩 값을 넣기 위해서는 contentPadding 특성에 EdgeInsets 형태의 값을 넣어줘야 합니다. 

 

2. 세로 또한 기본 패딩 값이 들어가있는데 변경하려면 minVerticalPadding 특성에 double 값을 넣어주면 됩니다. 

 

3. 그리고 ListTile에는 leading, tile, trailing 3개의 위젯이 들어갑니다. 이 3개의 위젯 사이에도 기본적인 간격이 들어가 있는데 간격을 수정하기 위해서는 horizontalTiltleGap 특성에 double 값을 넣어주면 됩니다. 

 

 

아래 예제에서는 위에 설명한 3가지 특성과 leading, tile, trailing 위젯을 사용해봤습니다.

 

ListTile(
  /// 좌우 패딩
  contentPadding: const EdgeInsets.symmetric(horizontal: 10),

  /// listTile의 세로 padding 값 설정
  minVerticalPadding: 20,

  /// leading, title, trainling 위젯 간의 사이 간격
  horizontalTitleGap: 10,

  /// leading = 왼쪽에 노출되는 위젯
  leading: Icon(Icons.add),

  /// title = 가운데 노출되는 위젯
  title: Text(
    "text",
    style: const TextStyle(fontSize: 18),
  ),

  /// trailing = 오른쪽에 노출되는 위젯
  trailing: IconButton(
      onPressed: () {
        setState(() {
          // event 
        });
      },
      icon: const Icon(Icons.delete)),
);