[Flutter] Widget(8) - ListTile에서 leading, tailing에 위젯 여러개 넣는 법

 

ListTile을 사용하면 leading과 tailing에 손쉽게 아이콘과 같은 위젯들을 추가할 수 있다. 이런 장점때문에 UI를 그릴 때 자주 사용되게 되는데, Leading에 아이콘을 여러게 넣고 싶어지는 경우가 있을 것이다.

 

이를 위해 leading에 Row위젯을 사용하여 두개의 아이콘을 넣어보자. 만약

 

ListTile(
  title: Text("This is my ListTile"),
  trailing: Row(
    children: <Widget>[
      Icon(Icons.call), // icon-1
      Icon(Icons.message), // icon-2
    ],
  ),
)

 

이렇게 Row를 사용해서 Icon을 여러개 넣어주면

 

"Leading widget consumes entire tile width. Please use a sized widget, or consider replacing ListTile with a custom widget

 

이라는 에러가 발생하게 된다. 해석해보면 Leading은 타일의 전체 너비를 사용하기 때문에 Sized위젯을 사용하거나 커스텀위젯으로 교체해서 사용해라는 문구이다. 하지만 꼭 listTile을 써야하는 상황이라면 Wrap이라는 위젯으로 이를 해결할 수 있다.

 

ListTile(
  title: Text("This is my ListTile"),
  leading: Wrap(
    children: <Widget>[
      Icon(Icons.call), // icon-1
      Icon(Icons.message), // icon-2
    ],
  ),
)