[flutter] carousel_slider를 사용하여 배경 이미지 슬라이더 만들기

04 Dec 2023

flutter

이번 글에서는 Flutter의 carousel_slider 패키지를 사용하여 배경 이미지 슬라이더를 만드는 방법에 대해 알아보겠습니다.

carousel_slider 패키지 설치하기

먼저, carousel_slider 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^3.0.0

그리고 패키지를 설치하기 위해 터미널에서 다음 명령어를 실행합니다:

$ flutter packages get

carousel_slider 사용하기

이제, carousel_slider를 사용하여 배경 이미지 슬라이더를 만들어봅시다.

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

class BackgroundSlider extends StatefulWidget {
  @override
  _BackgroundSliderState createState() => _BackgroundSliderState();
}

class _BackgroundSliderState extends State<BackgroundSlider> {
  List<String> _backgroundImages = [
    'assets/images/image1.jpg',
    'assets/images/image2.jpg',
    'assets/images/image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      items: _backgroundImages.map((image) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(image),
                  fit: BoxFit.cover,
                ),
              ),
            );
          },
        );
      }).toList(),
      options: CarouselOptions(
        height: MediaQuery.of(context).size.height,
        viewportFraction: 1.0,
        enlargeCenterPage: false,
        autoPlay: true,
        autoPlayInterval: Duration(seconds: 3),
      ),
    );
  }
}

위 코드에서는 BackgroundSlider라는 StatelessWidget을 정의하고, _backgroundImages라는 리스트에 배경 이미지 파일 경로를 저장합니다. 그리고 CarouselSlider 위젯을 사용하여 배경 이미지 슬라이더를 생성합니다. options 속성을 사용하여 슬라이더의 옵션을 설정할 수 있습니다.

배경 이미지 슬라이더 사용하기

BackgroundSlider 위젯을 어플리케이션에서 사용하기 위해, 아래와 같이 위젯을 추가합니다:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Background Slider',
      home: Scaffold(
        body: BackgroundSlider(),
      ),
    );
  }
}

BackgroundSlider를 Scaffold의 body로 설정하여 어플리케이션의 배경 이미지로 슬라이더를 사용할 수 있습니다.

결론

이번 글에서는 carousel_slider 패키지를 사용하여 Flutter 어플리케이션에 배경 이미지 슬라이더를 추가하는 방법을 알아보았습니다. 이를 통해 사용자의 시각적인 경험을 향상시킬 수 있습니다.

carousel_slider 패키지 설치하기

carousel_slider 사용하기

배경 이미지 슬라이더 사용하기

결론

참고 자료