[flutter] carousel_slider를 사용하여 이벤트 슬라이더 만들기

04 Dec 2023

flutter

이번 포스트에서는 Flutter의 carousel_slider 패키지를 사용하여 이벤트 슬라이더를 만드는 방법에 대해 알아보겠습니다. carousel_slider를 사용하면 사용자에게 이벤트를 소개하거나 이미지를 슬라이드하는 등 다양한 용도로 사용할 수 있는 슬라이더를 손쉽게 만들 수 있습니다.

1. carousel_slider 패키지 추가하기

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

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^4.0.0-nullsafety.0

그리고 패키지를 가져오기 위해 터미널에서 다음 명령을 실행합니다:

flutter pub get

2. carousel_slider 위젯 사용하기

이제 carousel_slider 위젯을 사용하여 이벤트 슬라이더를 만들어 보겠습니다. 예를 들어, 다음과 같은 이미지들을 슬라이드로 보여주는 이벤트 슬라이더를 만들어보겠습니다:

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

class EventSlider extends StatelessWidget {
  final List<String> imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        autoPlay: true,
        aspectRatio: 16 / 9,
        enlargeCenterPage: true,
      ),
      items: imageUrls.map((imageUrl) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 5.0),
              child: Image.network(
                imageUrl,
                fit: BoxFit.cover,
              ),
            );
          },
        );
      }).toList(),
    );
  }
}

3. 이벤트 슬라이더 사용하기

위에서 정의한 EventSlider 위젯을 원하는 곳에서 사용할 수 있습니다. 예를 들어, 스크린의 중앙에 이벤트 슬라이더를 배치하려면 다음과 같이 코드를 작성할 수 있습니다:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Event Slider',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Event Slider'),
        ),
        body: Center(
          child: EventSlider(),
        ),
      ),
    );
  }
}

이제 앱을 실행하면 중앙에 이벤트 슬라이더가 표시될 것입니다. 슬라이더는 자동으로 이미지들을 슬라이드하며 화면을 팽창시켜 가운데 이미지를 크게 표시합니다.

마치며

이번 포스트에서는 Flutter의 carousel_slider 패키지를 사용하여 이벤트 슬라이더를 만드는 방법에 대해 알아보았습니다. carousel_slider를 사용하면 손쉽게 다양한 용도로 사용할 수 있는 슬라이더를 만들 수 있으니 필요한 경우에는 공식 문서를 참고하여 자세히 알아보시기 바랍니다.

참고 자료:

carousel_slider 패키지: https://pub.dev/packages/carousel_slider
Flutter 공식 문서: https://flutter.dev