Flutter의 캐러셀(Carousel) 위젯 사용법

캐러셀(Carousel) 위젯은 이미지나 콘텐츠를 슬라이드 형태로 표시하는 데 사용됩니다. 이를 통해 사용자에게 여러 콘텐츠를 효과적으로 보여줄 수 있습니다. Flutter에서 캐러셀 위젯을 구현하기 위해서는 주로 carousel_slider 패키지를 사용합니다. 이번 글에서는 Flutter에서 carousel_slider 패키지를 사용하여 캐러셀 위젯을 구현하는 방법과 이를 커스터마이징하는 예제를 자세히 살펴보겠습니다.

1. 캐러셀 패키지 설치

먼저, carousel_slider 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^4.0.0

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

2. 기본 캐러셀 구현

carousel_slider 패키지를 사용하여 기본 캐러셀을 구현할 수 있습니다. 다음은 간단한 이미지 캐러셀을 구현하는 예제입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CarouselExample(),
    );
  }
}

class CarouselExample extends StatelessWidget {
  final List<String> imgList = [
    'https://via.placeholder.com/600x400',
    'https://via.placeholder.com/600x400',
    'https://via.placeholder.com/600x400',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Carousel Example')),
      body: Center(
        child: CarouselSlider(
          options: CarouselOptions(
            height: 400.0,
            autoPlay: true,
            enlargeCenterPage: true,
          ),
          items: imgList.map((item) => Container(
            child: Center(
              child: Image.network(item, fit: BoxFit.cover, width: 1000),
            ),
          )).toList(),
        ),
      ),
    );
  }
}

 

위 코드는 carousel_slider 패키지를 사용하여 간단한 이미지 캐러셀을 구현한 예제입니다. CarouselSlider 위젯을 사용하여 이미지 리스트를 슬라이드 형태로 표시합니다.

 

 

반응형

 

 

3. 커스텀 캐러셀 구현

캐러셀 슬라이더는 다양한 옵션을 통해 커스터마이징할 수 있습니다. 다음은 몇 가지 옵션을 사용하여 캐러셀을 커스터마이징하는 예제입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CustomCarouselExample(),
    );
  }
}

class CustomCarouselExample extends StatelessWidget {
  final List<String> imgList = [
    'https://via.placeholder.com/600x400',
    'https://via.placeholder.com/600x400',
    'https://via.placeholder.com/600x400',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Custom Carousel Example')),
      body: Center(
        child: CarouselSlider(
          options: CarouselOptions(
            height: 400.0,
            autoPlay: true,
            enlargeCenterPage: true,
            aspectRatio: 16 / 9,
            viewportFraction: 0.8,
            initialPage: 0,
            enableInfiniteScroll: true,
            reverse: false,
            autoPlayInterval: Duration(seconds: 3),
            autoPlayAnimationDuration: Duration(milliseconds: 800),
            autoPlayCurve: Curves.fastOutSlowIn,
            scrollDirection: Axis.horizontal,
          ),
          items: imgList.map((item) => Container(
            margin: EdgeInsets.all(5.0),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.0),
              image: DecorationImage(
                image: NetworkImage(item),
                fit: BoxFit.cover,
              ),
            ),
          )).toList(),
        ),
      ),
    );
  }
}

 

위 코드는 다양한 옵션을 사용하여 캐러셀을 커스터마이징한 예제입니다. aspectRatio, viewportFraction, autoPlayInterval 등 여러 옵션을 통해 캐러셀의 동작 방식을 제어할 수 있습니다.

 

 

728x90

 

 

4. 캐러셀 인디케이터 추가

캐러셀 슬라이더에 인디케이터를 추가하면 현재 슬라이드의 위치를 표시할 수 있습니다. 다음은 인디케이터를 추가하는 예제입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CarouselWithIndicatorExample(),
    );
  }
}

class CarouselWithIndicatorExample extends StatefulWidget {
  @override
  _CarouselWithIndicatorExampleState createState() => _CarouselWithIndicatorExampleState();
}

class _CarouselWithIndicatorExampleState extends State<CarouselWithIndicatorExample> {
  final List<String> imgList = [
    'https://via.placeholder.com/600x400',
    'https://via.placeholder.com/600x400',
    'https://via.placeholder.com/600x400',
  ];

  int _current = 0;
  final CarouselController _controller = CarouselController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Carousel with Indicator Example')),
      body: Column(
        children: [
          CarouselSlider(
            items: imgList.map((item) => Container(
              child: Center(
                child: Image.network(item, fit: BoxFit.cover, width: 1000),
              ),
            )).toList(),
            carouselController: _controller,
            options: CarouselOptions(
              autoPlay: true,
              enlargeCenterPage: true,
              height: 400.0,
              onPageChanged: (index, reason) {
                setState(() {
                  _current = index;
                });
              },
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: imgList.asMap().entries.map((entry) {
              return GestureDetector(
                onTap: () => _controller.animateToPage(entry.key),
                child: Container(
                  width: 12.0,
                  height: 12.0,
                  margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: (Theme.of(context).brightness == Brightness.dark
                            ? Colors.white
                            : Colors.black)
                        .withOpacity(_current == entry.key ? 0.9 : 0.4),
                  ),
                ),
              );
            }).toList(),
          ),
        ],
      ),
    );
  }
}

 

위 코드는 캐러셀 슬라이더에 인디케이터를 추가한 예제입니다. 현재 슬라이드 위치를 표시하기 위해 onPageChanged 콜백을 사용하여 _current 변수를 업데이트하고, 인디케이터를 클릭하면 해당 슬라이드로 이동할 수 있도록 설정합니다.

결론

Flutter에서 carousel_slider 패키지를 사용하면 손쉽게 캐러셀 위젯을 구현할 수 있습니다. 기본 캐러셀부터 커스텀 옵션을 적용한 캐러셀, 인디케이터를 추가한 캐러셀까지 다양한 방법을 통해 사용자에게 매력적인 콘텐츠 슬라이드를 제공할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 다양한 캐러셀을 구현해보세요. 캐러셀을 통해 사용자 경험을 크게 향상시킬 수 있습니다.