[flutter] carousel_slider를 사용하여 다양한 슬라이더 모양 만들기

04 Dec 2023

flutter

이번 예제에서는 Flutter의 carousel_slider 패키지를 사용하여 다양한 슬라이더 모양을 만드는 방법을 알아보겠습니다.

1. `carousel_slider` 패키지 추가하기

먼저, carousel_slider 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고 다음과 같이 패키지를 추가해주세요:

dependencies:
  carousel_slider: ^X.X.X

위의 코드에서 ^X.X.X 부분은 최신 버전의 carousel_slider 패키지 버전을 사용하도록 변경해야 합니다.

2. 슬라이더 생성하기

이제 패키지를 추가했으니, 슬라이더를 생성할 준비가 되었습니다. 다음과 같이 코드를 작성해주세요:

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

class MySlider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: 200, // 슬라이더 높이 설정
        aspectRatio: 16 / 9, // 슬라이더 비율 설정
        autoPlay: true, // 자동으로 슬라이더를 넘겨줄 것인지 설정
        enlargeCenterPage: true, // 현재 선택된 슬라이더를 크게 보여줄 것인지 설정
        autoPlayCurve: Curves.fastOutSlowIn, // 슬라이더 이동 애니메이션 설정
        enableInfiniteScroll: true, // 무한루프 설정
        autoPlayAnimationDuration: Duration(milliseconds: 800), // 슬라이더 넘김 애니메이션 속도 설정
        viewportFraction: 0.8, // 보여지는 슬라이더 비율 설정
      ),
      items: [
        // 슬라이더에 들어갈 내용들
        Container(
          margin: EdgeInsets.all(5),
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(10),
          ),
          child: Center(
            child: Text(
              '슬라이더 1',
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),
        ),
        Container(
          margin: EdgeInsets.all(5),
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(10),
          ),
          child: Center(
            child: Text(
              '슬라이더 2',
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),
        ),
        Container(
          margin: EdgeInsets.all(5),
          decoration: BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.circular(10),
          ),
          child: Center(
            child: Text(
              '슬라이더 3',
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),
        ),
      ],
    );
  }
}

위의 코드에서는 CarouselSlider 위젯을 생성하고, options 속성을 사용하여 슬라이더의 모양과 동작을 설정합니다. items 속성은 슬라이더에 넣을 내용을 정의합니다. 위의 예제에서는 간단한 컨테이너로 슬라이더 내용을 구성했습니다.

3. 슬라이더 사용하기

이제 위에서 생성한 슬라이더를 사용하기 위해 앱의 어떤 부분에서든 호출할 수 있습니다. 다음과 같이 코드를 작성해주세요:

import 'package:flutter/material.dart';

import 'my_slider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Carousel Slider Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Carousel Slider Example'),
        ),
        body: Center(
          child: MySlider(), // 슬라이더 호출
        ),
      ),
    );
  }
}

위의 코드에서는 MySlider 위젯을 호출하여 슬라이더를 화면에 표시합니다.

이제 앱을 실행하고 슬라이더가 잘 동작하는지 확인해보세요. 슬라이더의 모양과 동작을 변경하려면 options 속성을 수정하고, items 속성에 원하는 내용을 추가 또는 수정하여 다양한 슬라이더를 만들 수 있습니다.

더욱 자세한 내용이나 다른 옵션들에 대해서는 carousel_slider 패키지의 문서를 참고해주시기 바랍니다.

1. carousel_slider 패키지 추가하기

2. 슬라이더 생성하기

3. 슬라이더 사용하기

1. `carousel_slider` 패키지 추가하기