[flutter] carousel_slider에서 자동 스크롤 기능 추가하기

04 Dec 2023

flutter

carousel_slider는 Flutter에서 이미지나 컨텐츠를 스크롤할 수 있는 확장 가능한 위젯입니다. 하지만 기본적으로 사용자가 직접 스크롤해야만 합니다. 이번에는 carousel_slider에 자동 스크롤 기능을 추가하는 방법에 대해 알아보겠습니다.

1. 패키지 설치

먼저, carousel_slider 패키지를 설치해야합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요.

dependencies:
  carousel_slider: ^4.0.0

최신 버전의 carousel_slider 패키지가 자동으로 설치됩니다.

2. 코드 구현

다음으로, 코드에서 carousel_slider를 생성하고 자동 스크롤 기능을 추가해야합니다. 다음은 자동 스크롤 기능이 추가된 코드 예시입니다.

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

class AutoScrollCarousel extends StatefulWidget {
  @override
  _AutoScrollCarouselState createState() => _AutoScrollCarouselState();
}

class _AutoScrollCarouselState extends State<AutoScrollCarousel> {
  int _currentIndex = 0;
  CarouselController buttonCarouselController = CarouselController();

  final List<String> imageList = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
    'https://example.com/image4.jpg',
  ];

  @override
  void initState() {
    super.initState();
    
    // 자동 스크롤 타이머 시작
    startAutoScroll();
  }
  
  void startAutoScroll() {
    // 3초마다 다음 항목으로 자동 스크롤
    Timer.periodic(Duration(seconds: 3), (Timer timer) {
      if (_currentIndex < imageList.length - 1) {
        _currentIndex++;
      } else {
        _currentIndex = 0;
      }
      buttonCarouselController.animateToPage(_currentIndex);
    });
  }

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      items: imageList.map((item) => Container(
        child: Center(
          child: Image.network(
            item,
            fit: BoxFit.cover,
            width: 1000,
          ),
        ),
      )).toList(),
      options: CarouselOptions(
        autoPlay: false,
        enlargeCenterPage: true,
        aspectRatio: 2.0,
        onPageChanged: (index, reason) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
      carouselController: buttonCarouselController,
    );
  }
}

위 코드에서 carousel_slider 패키지를 가져와 AutoScrollCarousel 위젯을 생성합니다. AutoScrollCarousel 클래스에서 _AutoScrollCarouselState 상태 클래스를 정의하고, 자동 스크롤을 관리합니다.

startAutoScroll 메서드는 타이머를 사용하여 일정 시간마다 다음 항목으로 자동 스크롤을 수행합니다. onPageChanged 메서드는 스크롤이 변경될 때마다 현재 인덱스를 업데이트합니다.

위 코드의 imageList는 슬라이더에 표시할 이미지 URL 목록입니다. 이를 필요에 따라 수정하십시오.

3. 사용 방법

AutoScrollCarousel 위젯은 다른 위젯 내에서 사용하거나 화면에 직접 배치할 수 있습니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Auto Scroll Carousel'),
      ),
      body: AutoScrollCarousel(),
    ),
  ));
}

위 예시 코드에서는 AutoScrollCarousel를 Scaffold 위젯의 body 안에 배치하고 있습니다. 필요에 따라 앱의 레이아웃과 UI를 조정할 수 있습니다.

결론

carousel_slider 패키지를 사용하여 Flutter 앱에서 자동 스크롤 기능을 가진 캐러셀을 추가하는 방법에 대해 알아보았습니다. 이를 통해 사용자의 상호작용 없이도 이미지나 컨텐츠를 자동으로 스크롤할 수 있습니다.