[flutter] carousel_slider를 사용하여 모임 소개 슬라이더 만들기

04 Dec 2023

flutter

이번에는 Flutter의 carousel_slider 패키지를 사용하여 모임 소개 슬라이더를 만드는 방법에 대해 알아보겠습니다. carousel_slider는 플러터 앱에서 이미지나 컨텐츠를 슬라이더 형태로 표시할 수 있는 편리한 패키지입니다.

1. carousel_slider 패키지 추가

먼저, pubspec.yaml 파일에 carousel_slider 패키지를 추가해야 합니다. 아래의 코드를 dependencies 섹션에 추가하세요.

dependencies:
  carousel_slider: ^4.0.0

이후 터미널에서 flutter packages get을 실행하여 패키지를 가져옵니다.

2. carousel_slider 사용하기

다음으로, 모임 소개 슬라이더를 구현할 화면에 carousel_slider를 추가해야 합니다. 아래의 코드를 참고하여 화면을 구성하세요.

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

class EventSlider extends StatefulWidget {
  @override
  _EventSliderState createState() => _EventSliderState();
}

class _EventSliderState extends State<EventSlider> {
  List<String> _images = [
    'assets/images/event1.jpg',
    'assets/images/event2.jpg',
    'assets/images/event3.jpg',
  ];

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

위 코드에서는 _images 리스트에 모임 소개 이미지들의 경로를 추가하였습니다. 이후 CarouselSlider 위젯을 사용하여 슬라이더를 구성하고, options 속성을 통해 슬라이더의 동작을 설정할 수 있습니다.

이렇게 작성된 EventSlider 위젯을 화면에 추가하면 모임 소개 슬라이더가 나타납니다.

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 Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Event Slider'),
        ),
        body: Center(
          child: EventSlider(),
        ),
      ),
    );
  }
}

이제 위의 코드를 실행하면 앱 화면에 모임 소개 슬라이더가 나타납니다. 슬라이더의 동작은 options 속성을 통해 조정할 수 있습니다.

결론

carousel_slider 패키지를 사용하여 Flutter 앱에 모임 소개 슬라이더를 추가하는 방법에 대해 알아보았습니다. carousel_slider의 다양한 옵션을 사용하여 슬라이더의 동작을 조정하고, 이미지나 컨텐츠를 효과적으로 표시할 수 있습니다.

더 자세한 내용은 carousel_slider 패키지의 공식 문서를 참고하시기 바랍니다.