[flutter] 플러터 ListTile을 이용하여 List만들어보기

플러터에서 List를 만들 때 자주 사용하는 것이 ListTile입니다. ListTile은 리스트의 한 열을 그릴 때 사용합니다.

 

 

◆ ListTile이란?

이해를 쉽게 하기 위해 이미지를 보시면 초록색 네모칸의 아이콘, 텍스트, 아이콘과 같이 한 줄에 여러개의 위젯을 배치할 때 ListTile을 이용합니다.

ListTile

 

◆ ListTile사용 방법

ListTile 중 가장 많이 사용하는 인자는leading, title, trailing입니다. leading은 좌측에 올 위젯, title은 리스트의 중앙에 배치할 위젯, trailing은 리스트의 우측에 배치할 위젯을 넣어 줍니다. 아래 예제는 leading에 home아이콘, title은 home, trailing은 add아이콘을 배치한 것입니다,

  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            UserAccountsDrawerHeader(
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/man.png'),
              ),
              accountName: Text('tongkee'),
              accountEmail: Text('tongkee@naver.com'),
            ),
            ListTile(
              leading: Icon(
                Icons.home,
                color: Colors.grey[850],
              ),
              title: Text('home'),
              onTap: () {
                print('click home');
              },
              trailing: Icon(Icons.add),
            ),
            ListTile(
              leading: Icon(
                Icons.settings,
                color: Colors.grey[850],
              ),
              title: Text('setting'),
              onTap: () {
                print('click setting');
              },
              trailing: Icon(Icons.add),
            ),
            ListTile(
              leading: Icon(
                Icons.question_answer,
                color: Colors.grey[850],
              ),
              title: Text('Q&A'),
              onTap: () {
                print('click Q&A');
              },
              trailing: Icon(Icons.add),
            ),
          ],
        ),
      ),