ListView & ListTile

ListView와 ListTile은 Flutter에서 자주 사용되는 위젯이지만, 그들의 역할과 용도는 매우 다릅니다.

1. ListView:

   • ListView는 스크롤 가능한 리스트를 만드는 위젯입니다.
   • 여러 개의 자식 위젯(예: ListTile, Container, Text 등)을 포함할 수 있습니다.
   • 수직 또는 수평으로 스크롤이 가능하며, 아이템이 많을 경우 자동으로 스크롤바를 보여줍니다.
   • ListView.builder와 같은 생성자를 사용하여 대량의 데이터로부터 아이템을 지연 로딩할 수 있습니다.

   예시:

   ListView(
     children: <Widget>[
       ListTile(title: Text('아이템 1')),
       ListTile(title: Text('아이템 2')),
     ],
   )

2. ListTile:

   • ListTile은 고정 높이를 가진 단일 행 위젯으로 주로 리스트에서 각 아이템을 표시하는 데 사용됩니다.
   • 일반적으로 ListView 내부에서 사용되며, 주로 아이콘, 제목, 부제목 및 트레일링 위젯과 같은 추가적인 정보를 포함합니다.
   • 리스트의 각 아이템을 클릭할 때 반응하기 쉽게 만들 수 있습니다.

   예시:

   ListTile(
     leading: Icon(Icons.star),
     title: Text('제목'),
     subtitle: Text('부제목'),
     trailing: Icon(Icons.arrow_forward),
   )

요약하면, ListView는 스크롤 가능한 아이템의 컨테이너 역할을 하며, ListTile은 그러한 리스트 내부의 각각의 아이템을 표현하는 위젯입니다.

코드를 포매팅하면 다음과 같습니다:

ListTile(
  leading: Container(
    width: Sizes.size52,
    decoration: const BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.blue,
    ),
    child: const Center(
      child: FaIcon(
        FontAwesomeIcons.users,
        color: Colors.white,
      ),
    ),
  ),
  title: const Text(
    'New followers',
    style: TextStyle(
      fontWeight: FontWeight.w600,
      fontSize: Sizes.size16,
    ),
  ),
  subtitle: const Text(
    'Messages from followers will appear here.',
    style: TextStyle(
      fontSize: Sizes.size14,
    ),
  ),
  trailing: const FaIcon(
    FontAwesomeIcons.chevronRight,
    size: Sizes.size14,
    color: Colors.black,
  ),
)

이 코드는 ListTile 위젯을 사용하여 목록 아이템을 나타내는 예제입니다. 각 속성별로 설명하겠습니다.

1. leading:

   • ListTile의 왼쪽에 위치하는 위젯을 나타냅니다.
   • 여기서는 Container를 사용하여 원형의 파란색 배경을 갖는 아이콘을 표시합니다.
   • BoxShape.circle를 사용하여 Container의 모양을 원형으로 만들었습니다.
   • Center 위젯을 사용하여 자식 아이콘(FaIcon)을 중앙에 배치합니다.

2. title:

   • ListTile의 주요 텍스트입니다.
   • "New followers"라는 텍스트를 보여줍니다. 여기서는 텍스트의 스타일로 글꼴 크기와 두께를 조절했습니다.

3. subtitle:

   • ListTile의 부제목으로 사용되는 텍스트입니다.
   • 여기서는 "Messages from followers will appear here."라는 텍스트를 보여줍니다. 텍스트의 크기를 조절하여 부제목을 나타냈습니다.

4. trailing:

   • ListTile의 오른쪽에 위치하는 위젯을 나타냅니다.
   • 여기서는 화살표 아이콘(FaIcon)을 사용하여 다음 화면으로 이동하거나 추가 정보가 있음을 나타내는 데 사용됩니다.

이 ListTile은 사용자에게 새 팔로워와 관련된 메시지를 보여주는 UI를 구성하는 데 사용될 수 있습니다.