33. Flutter ListView를 사용한 수평 리스트 제작 방법 | Flutter

SF스타일 치고 너무 수수한, dall-e

 

 

Flutter로 수평 리스트 만들기: 단계별 가이드

 

01. 서론

Flutter에서 수평 리스트의 필요성

Flutter는 크로스플랫폼 모바일 애플리케이션 개발을 위한 프레임워크로, 다양한 UI 구성 요소를 제공합니다. 수평 리스트는 사용자 인터페이스에서 중요한 요소 중 하나로, 특히 제품 갤러리, 사진 앨범, 추천 항목 등에서 유용하게 사용됩니다. 예를 들어, 전자 상거래 앱에서 여러 제품을 한눈에 보여주기 위해 수평 리스트를 사용하면 사용자 경험이 향상됩니다. 수평 리스트는 화면 공간을 효율적으로 활용하면서도, 시각적으로 매력적인 레이아웃을 제공합니다.

Flutter ListView의 기능 개요

ListView는 Flutter에서 리스트를 만들기 위해 사용하는 기본 위젯입니다. ListView는 기본적으로 수직 방향으로 스크롤되며, 여러 개의 자식 위젯을 포함할 수 있습니다. 이 위젯은 큰 데이터 목록을 효율적으로 관리하며, 스크롤 성능이 뛰어납니다. ListView는 다양한 옵션을 제공하여 사용자 맞춤형 리스트를 만들 수 있으며, `scrollDirection` 속성을 사용하여 수평 스크롤 리스트를 구현할 수 있습니다. 이 속성을 설정하면, ListView는 수평 방향으로 스크롤되며, 사용자에게 자연스럽고 직관적인 인터페이스를 제공합니다.

 

02. 수평 리스트 생성 방법

ListView 위젯 소개

ListView 위젯은 여러 위젯을 스크롤 가능한 리스트 형태로 배치할 때 사용됩니다. 이 위젯은 기본적으로 수직 방향으로 작동하지만, `scrollDirection` 속성을 사용하여 수평 방향으로도 설정할 수 있습니다. ListView는 매우 유연하며, 수백 개의 항목을 효율적으로 관리할 수 있습니다. 또한, 다양한 빌더 함수와 조합하여 복잡한 리스트 레이아웃을 쉽게 구현할 수 있습니다.

scrollDirection 속성 설정

수평 리스트를 만들기 위해서는 `scrollDirection` 속성을 `Axis.horizontal`로 설정해야 합니다. 이렇게 하면 ListView는 수평 방향으로 스크롤되며, 사용자에게 가로로 스크롤할 수 있는 리스트를 제공합니다. 아래는 수평 리스트를 만드는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Horizontal ListView Example'),
        ),
        body: Center(
          child: Container(
            height: 200,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: [
                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,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

이 코드는 `scrollDirection` 속성을 `Axis.horizontal`로 설정하여 수평 리스트를 생성합니다. 각 컨테이너는 고유한 색상과 너비를 가지며, 수평으로 스크롤할 수 있습니다.

 

03. 예제 코드

기본 예제 코드 설명

수평 리스트를 만드는 기본적인 예제 코드를 살펴보겠습니다. 이 예제는 ListView 위젯을 사용하여 수평으로 스크롤되는 리스트를 생성합니다. `scrollDirection` 속성을 `Axis.horizontal`로 설정하여 리스트가 수평으로 스크롤되도록 합니다. 여러 개의 컨테이너를 자식 위젯으로 추가하여 각각 다른 색상으로 표시합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Horizontal ListView Example'),
        ),
        body: Center(
          child: Container(
            height: 200,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: [
                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,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

이 코드는 간단한 수평 리스트를 만듭니다. 각 컨테이너는 160픽셀 너비를 가지며, 다양한 색상으로 설정되어 있습니다. ListView는 수평으로 스크롤할 수 있게 구성되었습니다.

다양한 컨테이너 색상 사용

위의 기본 예제 코드에서 각 컨테이너는 서로 다른 색상을 가지고 있습니다. 이러한 색상은 사용자가 리스트의 각 항목을 쉽게 구분할 수 있도록 도와줍니다. 예를 들어, 빨간색, 파란색, 초록색, 노란색, 주황색의 컨테이너를 사용하여 리스트를 시각적으로 매력적으로 만들 수 있습니다. 색상 외에도 각 컨테이너에 이미지, 아이콘, 텍스트 등을 추가하여 더욱 다양하고 풍부한 콘텐츠를 제공할 수 있습니다.

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    Container(
      width: 160,
      color: Colors.red,
      child: Center(
        child: Text(
          'Red',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    ),
    Container(
      width: 160,
      color: Colors.blue,
      child: Center(
        child: Text(
          'Blue',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    ),
    Container(
      width: 160,
      color: Colors.green,
      child: Center(
        child: Text(
          'Green',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    ),
    Container(
      width: 160,
      color: Colors.yellow,
      child: Center(
        child: Text(
          'Yellow',
          style: TextStyle(color: Colors.black, fontSize: 20),
        ),
      ),
    ),
    Container(
      width: 160,
      color: Colors.orange,
      child: Center(
        child: Text(
          'Orange',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    ),
  ],
)

이 코드는 각 컨테이너에 텍스트를 추가하여 색상과 텍스트가 결합된 리스트 항목을 생성합니다. 이로 인해 사용자 인터페이스가 더 풍부하고 직관적으로 보입니다.

 

04. 데스크탑 및 웹 브라우저에서의 사용

Shift 키를 사용한 수평 스크롤 방법

Flutter 애플리케이션을 데스크탑이나 웹 브라우저에서 실행할 때, 수평 스크롤을 위해서는 마우스 휠을 사용할 수 있습니다. 그러나 기본적으로 마우스 휠은 수직 스크롤에 사용되기 때문에, 수평 스크롤을 위해서는 Shift 키를 눌러야 합니다. Shift 키를 누른 상태에서 마우스 휠을 움직이면 수평으로 스크롤됩니다. 이를 통해 사용자는 더 직관적으로 수평 리스트를 탐색할 수 있습니다.

웹 및 데스크탑에서의 구현 주의사항

웹 및 데스크탑 환경에서 수평 리스트를 구현할 때 몇 가지 주의사항이 있습니다. 첫째, 브라우저 호환성을 고려해야 합니다. 모든 브라우저가 동일한 방식으로 동작하지 않을 수 있으므로, 다양한 브라우저에서 테스트가 필요합니다. 둘째, 사용자 경험을 고려한 인터페이스 디자인이 필요합니다. 예를 들어, 수평 리스트가 화면에 자연스럽게 배치되도록 하고, 스크롤이 부드럽게 작동하도록 해야 합니다. 셋째, 성능 최적화를 신경 써야 합니다. 많은 양의 데이터를 다룰 때, Lazy loading을 사용하여 성능을 향상시킬 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Horizontal ListView Example'),
        ),
        body: Center(
          child: Container(
            height: 200,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 10,
              itemBuilder: (context, index) {
                return Container(
                  width: 160,
                  margin: EdgeInsets.symmetric(horizontal: 5),
                  color: Colors.primaries[index % Colors.primaries.length],
                  child: Center(
                    child: Text(
                      'Item $index',
                      style: TextStyle(color: Colors.white, fontSize: 20),
                    ),
                  ),
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

이 코드는 `ListView.builder`를 사용하여 많은 양의 데이터를 효율적으로 처리합니다. 각 항목의 색상은 `Colors.primaries` 배열을 순환하며 설정됩니다. 이러한 방법은 성능을 최적화하고, 다양한 항목을 동적으로 생성할 수 있게 합니다.

 

05. 고급 설정 및 커스터마이징

다양한 아이템 추가 방법

수평 리스트에 다양한 아이템을 추가하여 더욱 풍부한 사용자 경험을 제공할 수 있습니다. 예를 들어, 텍스트, 이미지, 아이콘, 버튼 등을 조합하여 리스트 항목을 다양하게 구성할 수 있습니다. 아래 예제는 텍스트와 이미지를 결합한 리스트 항목을 보여줍니다.

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    Container(
      width: 160,
      color: Colors.red,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.star, color: Colors.white, size: 50),
          SizedBox(height: 10),
          Text(
            'Star',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
        ],
      ),
    ),
    Container(
      width: 160,
      color: Colors.blue,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.favorite, color: Colors.white, size: 50),
          SizedBox(height: 10),
          Text(
            'Favorite',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
        ],
      ),
    ),
    Container(
      width: 160,
      color: Colors.green,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.thumb_up, color: Colors.white, size: 50),
          SizedBox(height: 10),
          Text(
            'Like',
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
        ],
      ),
    ),
  ],
)

이 예제에서는 각 컨테이너에 아이콘과 텍스트를 조합하여 사용자 인터페이스를 풍부하게 구성합니다. 아이콘과 텍스트의 크기, 색상, 간격 등을 조정하여 다양한 스타일을 적용할 수 있습니다.

리스트 스타일링 및 디자인 팁

리스트 스타일링은 사용자 인터페이스의 시각적 매력을 높이는 중요한 요소입니다. 아래는 수평 리스트를 스타일링하고 디자인하는 몇 가지 팁입니다.

• 간격과 여백: 리스트 항목 간의 간격과 여백을 적절히 설정하여 항목들이 서로 겹치지 않도록 합니다. `EdgeInsets`를 사용하여 패딩과 마진을 조절할 수 있습니다.
• 배경색과 경계선: 각 항목의 배경색을 설정하여 구분을 명확히 하고, 경계선을 추가하여 시각적으로 구분할 수 있습니다.
• 그라데이션 효과: `BoxDecoration`을 사용하여 항목에 그라데이션 효과를 추가하면 더욱 세련된 느낌을 줄 수 있습니다.
• 애니메이션: 애니메이션을 추가하여 리스트 항목이 나타나거나 사라질 때 부드러운 효과를 줄 수 있습니다. `AnimatedContainer`나 `AnimatedOpacity` 등을 활용할 수 있습니다.

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    Container(
      width: 160,
      margin: EdgeInsets.symmetric(horizontal: 5),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.red, Colors.orange],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(10),
      ),
      child: Center(
        child: Text(
          'Gradient',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    ),
    Container(
      width: 160,
      margin: EdgeInsets.symmetric(horizontal: 5),
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(color: Colors.white, width: 2),
        borderRadius: BorderRadius.circular(10),
      ),
      child: Center(
        child: Text(
          'Border',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    ),
    Container(
      width: 160,
      margin: EdgeInsets.symmetric(horizontal: 5),
      decoration: BoxDecoration(
        color: Colors.green,
        boxShadow: [
          BoxShadow(
            color: Colors.black26,
            blurRadius: 10,
            offset: Offset(0, 5),
          ),
        ],
        borderRadius: BorderRadius.circular(10),
      ),
      child: Center(
        child: Text(
          'Shadow',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    ),
  ],
)

이 코드는 그라데이션, 경계선, 그림자 효과를 사용하여 리스트 항목을 스타일링하는 방법을 보여줍니다. 이러한 스타일링 기법을 활용하면 더욱 매력적인 사용자 인터페이스를 구현할 수 있습니다.

 

06. 결론

수평 리스트 사용의 장점

수평 리스트는 사용자 인터페이스를 구성할 때 매우 유용한 도구입니다. 특히 제품 갤러리, 추천 항목, 이미지 슬라이더 등 다양한 시나리오에서 활용될 수 있습니다. 수평 리스트의 주요 장점은 다음과 같습니다.

• 화면 공간의 효율적 사용: 수평으로 스크롤되는 리스트를 사용하면 화면의 가로 공간을 효율적으로 활용할 수 있습니다.
• 직관적인 네비게이션: 사용자에게 자연스럽고 직관적인 인터페이스를 제공하여 탐색 경험을 향상시킬 수 있습니다.
• 시각적 매력: 다양한 스타일링 옵션을 사용하여 시각적으로 매력적인 인터페이스를 구현할 수 있습니다.

추가 리소스 및 학습 자료

Flutter에서 수평 리스트를 만드는 방법에 대해 더 깊이 학습하고 싶다면 아래의 리소스를 참고하세요.

• Flutter 공식 문서 - ListView
• Flutter 공식 문서 - Horizontal List

이 리소스들을 활용하여 Flutter에서 수평 리스트를 더욱 효율적으로 구현하고, 다양한 사용자 인터페이스를 제작해보세요.

---

관련된 다른 글도 읽어보시길 추천합니다

 

2024.07.28 - [Study] - 30. Flutter 레이아웃 완벽 가이드: 기본부터 고급까지 | Flutter

30. Flutter 레이아웃 완벽 가이드: 기본부터 고급까지 | Flutter

2024.07.28 - [Study] - 29. Flutter에서 자주 사용하는 위젯 소개 및 활용법 | Flutter

29. Flutter에서 자주 사용하는 위젯 소개 및 활용법 | Flutter

2024.07.25 - [Study] - 28. Flutter로 사용자 인터페이스 구축하기 | Flutter

28. Flutter로 사용자 인터페이스 구축하기 | Flutter

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)