[flutter] Row 위젯에서의 이미지 슬라이더 사용하기

07 Dec 2023

flutter

이미지 슬라이더는 사용자에게 다양한 이미지를 보여주고, 이미지를 슬라이드하여 쉽게 탐색할 수 있는 기능을 제공합니다. Flutter에서는 Row 위젯의 자식으로 이미지 슬라이더를 구현할 수 있습니다.

1. 이미지 슬라이더 패키지 설치하기

이미지 슬라이더를 구현하기 위해 carousel_slider 패키지를 설치해야 합니다. pubspec.yaml 파일에 의존성을 추가해주세요.

dependencies:
  carousel_slider: ^4.0.0

의존성 추가 후, flutter pub get 명령어를 실행하여 패키지를 다운로드합니다.

2. Row 위젯에 이미지 슬라이더 추가하기

아래와 같이 Row 위젯에서 이미지 슬라이더를 사용할 수 있습니다.

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

class ImageSlider extends StatelessWidget {
  final List<String> imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: CarouselSlider(
            options: CarouselOptions(
              height: 200,
              autoPlay: true,
              enlargeCenterPage: true,
            ),
            items: imageUrls.map((url) {
              return Builder(
                builder: (BuildContext context) {
                  return Image.network(url, fit: BoxFit.cover);
                },
              );
            }).toList(),
          ),
        ),
      ],
    );
  }
}

위 코드에서 imageUrls 리스트에 이미지의 URL을 추가해주세요. CarouselSlider 위젯의 options 속성을 통해 슬라이더의 높이, 자동 재생 등을 설정할 수 있습니다.

3. 위젯 사용하기

ImageSlider 위젯을 사용하기 위해 다음과 같이 호출할 수 있습니다.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('이미지 슬라이더'),
      ),
      body: ImageSlider(),
    );
  }
}

위에서 작성한 코드를 앱에 추가하면 Row 위젯 내에서 이미지 슬라이더를 사용할 수 있습니다.

4. 참고 자료

carousel_slider 패키지: https://pub.dev/packages/carousel_slider

이제 Flutter에서 Row 위젯 내에서 이미지 슬라이더를 구현하는 방법을 알게 되었습니다. 다양한 이미지를 슬라이드하여 사용자에게 더욱 편리한 경험을 제공할 수 있습니다.