[flutter] Row 위젯과 ListView 위젯의 조합 사용하기

Flutter에서는 Row 위젯과 ListView 위젯을 조합하여 다양한 레이아웃을 구현할 수 있습니다. Row 위젯은 가로 방향으로 요소를 배치하고, ListView 위젯은 세로 방향으로 스크롤 가능한 목록을 제공합니다.

이번에는 Row 위젯과 ListView 위젯을 조합하여 가로로 스크롤 가능한 목록을 만드는 방법을 알아보겠습니다.

1. Row 위젯 생성하기

먼저 Row 위젯을 생성하여 가로로 요소를 배치합니다. 예를 들어, 아이콘과 텍스트를 가로로 나란히 배치하고 싶다면 다음과 같이 코드를 작성할 수 있습니다:

Row(
  children: [
    Icon(Icons.email),
    Text('example@example.com'),
  ],
)

2. ListView 위젯 생성하기

다음으로 ListView 위젯을 생성하여 세로로 스크롤 가능한 목록을 만듭니다. ListView 위젯은 자체적인 스크롤을 제공하므로, 화면에 표시되는 영역을 벗어난 내용은 자동으로 스크롤됩니다. 예를 들어, 다음과 같이 코드를 작성할 수 있습니다:

ListView(
  children: [
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
    ListTile(title: Text('Item 4')),
  ],
)

3. Row와 ListView 조합하기

마지막으로, Row 위젯과 ListView 위젯을 조합하여 가로로 스크롤 가능한 목록을 만듭니다. 이를 위해서는 ListView를 Row의 자식으로 추가하면 됩니다. 다음은 예시 코드입니다:

Row(
  children: [
    ListView(
      scrollDirection: Axis.horizontal,
      shrinkWrap: true,
      children: [
        ListTile(title: Text('Item 1')),
        ListTile(title: Text('Item 2')),
        ListTile(title: Text('Item 3')),
        ListTile(title: Text('Item 4')),
      ],
    ),
  ],
)

여기서 scrollDirection 속성을 이용하여 가로 스크롤을 설정하고, shrinkWrap 속성을 이용하여 Row와 ListView의 크기를 내용에 맞게 조정합니다.

이제 위의 코드를 실행하면 가로로 스크롤 가능한 목록이 나타납니다. 필요에 따라 Row와 ListView의 속성을 조절하여 다양한 레이아웃을 구현할 수 있습니다.

이 글은 Flutter의 Row 위젯과 ListView 위젯을 조합하여 가로로 스크롤 가능한 목록을 생성하는 방법을 설명했습니다. Flutter에서 Row와 ListView를 유연하게 결합하여 다양한 레이아웃을 구성할 수 있습니다. 코드를 작성하고 실행하여 원하는 레이아웃을 만들어보세요!