[flutter] carousel_slider를 사용하여 여행일지 슬라이더 만들기

04 Dec 2023

flutter

이번에는 Flutter에서 carousel_slider를 사용하여 여행일지 슬라이더를 만드는 방법에 대해 알아보겠습니다. carousel_slider는 Flutter에서 이미지나 컨텐츠를 슬라이드로 보여주는 데 사용되는 패키지입니다.

1. carousel_slider 패키지 설치하기

먼저, carousel_slider 패키지를 프로젝트에 설치해야 합니다. pubspec.yaml 파일에 아래의 의존성을 추가해주세요.

dependencies:
  carousel_slider: ^2.3.1

의존성을 추가한 후 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치해줍니다.

2. 슬라이더 생성하기

아래의 예제 코드로 슬라이더를 생성할 수 있습니다.

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

class TravelDiarySlider extends StatelessWidget {
  final List<String> images = [
    'assets/images/trip1.jpg',
    'assets/images/trip2.jpg',
    'assets/images/trip3.jpg',
    // ... 추가적인 이미지 경로
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: 200.0,
        autoPlay: true,
        enlargeCenterPage: true,
      ),
      items: images.map((image) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 5.0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8.0),
                image: DecorationImage(
                  image: AssetImage(image),
                  fit: BoxFit.cover,
                ),
              ),
            );
          },
        );
      }).toList(),
    );
  }
}

위의 코드에서 TravelDiarySlider 클래스는 StatelessWidget입니다. images 리스트에 슬라이더에 표시될 이미지의 경로를 추가해주세요. 실제 이미지 경로로 교체해야 하며, assets 폴더에 이미지를 추가해야 합니다.

3. 슬라이더 사용하기

이제 슬라이더를 사용할 화면에 TravelDiarySlider 위젯을 추가해주세요.

import 'package:flutter/material.dart';

class TravelDiaryPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('여행일지'),
      ),
      body: TravelDiarySlider(),
    );
  }
}

위의 코드에서는 TravelDiarySlider 위젯을 TravelDiaryPage의 body로 추가하였습니다.

마무리

이제 carousel_slider 패키지를 사용하여 여행일지 슬라이더를 만들어 보았습니다. 슬라이더의 옵션을 변경하여 다양한 스타일과 동작을 지정할 수 있습니다. 자세한 내용은 carousel_slider 패키지 문서를 참고하세요.