Flutter에서 가로 스크롤 리스트 구현하기: ListView와 `scrollDirection` 활용법

Flutter는 수직 스크롤뿐만 아니라 가로 스크롤 리스트를 간단히 구현할 수 있는 강력한 도구를 제공합니다. 특히 ListView 위젯은 기본적인 스크롤 방향을 변경하여 사용자의 요구에 맞는 UI를 손쉽게 구성할 수 있습니다. 이번 글에서는 ListView를 활용한 가로 스크롤 리스트 구현 방법과 관련 팁을 알아봅니다.

참고. Create a horizontal list

ListView로 가로 스크롤 리스트 생성

기본적으로 ListView는 수직 스크롤을 지원하지만, scrollDirection 속성을 사용하면 가로 스크롤로 쉽게 전환할 수 있습니다. 이를 통해 좌우로 이동할 수 있는 콘텐츠 레이아웃을 간단히 구현할 수 있습니다.

가로 스크롤 리스트 기본 코드

아래 코드는 Flutter의 ListView를 활용해 가로 스크롤 리스트를 구현하는 기본적인 예제입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Horizontal List Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Horizontal List'),
        ),
        body: ListView(
          scrollDirection: Axis.horizontal, // 가로 스크롤 설정
          children: <Widget>[
            Container(
              width: 160,
              color: Colors.red,
            ),
            Container(
              width: 160,
              color: Colors.blue,
            ),
            Container(
              width: 160,
              color: Colors.green,
            ),
            Container(
              width: 160,
              color: Colors.yellow,
            ),
            Container(
              width: 160,
              color: Colors.orange,
            ),
          ],
        ),
      ),
    );
  }
}

코드 설명

1. scrollDirection 속성:
   • 기본값은 Axis.vertical이며, 이를 Axis.horizontal로 설정하면 가로 스크롤이 가능합니다.
2. children 속성:
   • ListView에 들어갈 여러 위젯을 나열합니다.
3. Container:
   • 다양한 색상과 크기로 콘텐츠를 표시하는 데 사용됩니다.

가로 리스트 활용 사례

1. 상품 추천 카탈로그:
   • 쇼핑 앱에서 상품을 슬라이드 형식으로 나열하여 사용자가 빠르게 탐색할 수 있도록 합니다.
2. 이미지 갤러리:
   • 사진을 가로로 정렬하여 빠르게 탐색할 수 있습니다.
3. 동영상 썸네일 리스트:
   • 유튜브와 같은 동영상 플랫폼에서 가로 스크롤 썸네일을 표시하는 데 유용합니다.

데스크톱 및 웹 환경에서의 유용한 팁

1. Shift 키를 활용한 스크롤:
   • 데스크톱과 웹에서 기본적으로 가로 스크롤은 마우스 휠로 작동하지 않을 수 있습니다. Shift 키를 누른 상태로 휠을 스크롤하면 좌우 이동이 가능합니다.
2. 반응형 디자인:
   • 화면 크기에 따라 아이템의 크기와 간격을 동적으로 조정하세요.

---

결론

Flutter의 ListView는 간단한 속성 설정만으로 가로 스크롤 리스트를 구현할 수 있는 강력한 도구입니다. 쇼핑 앱, 갤러리, 대시보드 등 다양한 활용 사례에서 UI를 풍부하게 구성할 수 있습니다. scrollDirection 속성을 활용해 더 나은 사용자 경험을 제공하는 앱을 만들어 보세요.

 

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const title = 'Horizontal List';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: Container(
          margin: const EdgeInsets.symmetric(vertical: 20),
          height: 200,
          child: ListView(
            // This next line does the trick.
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              Container(
                width: 160,
                color: Colors.red,
              ),
              Container(
                width: 160,
                color: Colors.blue,
              ),
              Container(
                width: 160,
                color: Colors.green,
              ),
              Container(
                width: 160,
                color: Colors.yellow,
              ),
              Container(
                width: 160,
                color: Colors.orange,
              ),
            ],
          ),
        ),
      ),
    );
  }
}