[flutter] carousel_slider를 사용하여 자녀 발달 일지 슬라이더 만들기

04 Dec 2023

flutter

이번 글에서는 Flutter에서 carousel_slider 패키지를 사용하여 자녀의 발달 일지를 보여주는 슬라이더를 만드는 방법에 대해 알아보겠습니다. carousel_slider 패키지는 Flutter에서 이미지나 컨텐츠를 좌우로 슬라이드할 수 있는 기능을 제공해주는 유용한 패키지입니다.

1. carousel_slider 패키지 추가하기

먼저, 프로젝트의 pubspec.yaml 파일에 carousel_slider 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 패키지를 추가합니다.

dependencies:
  carousel_slider: ^4.0.0

의존성을 추가한 후에는 터미널에서 flutter packages get 명령어를 실행하여 패키지를 다운로드 받도록 합니다.

2. 슬라이더 구현하기

슬라이더를 구현하기 위해 다음과 같은 코드를 작성합니다.

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

class ChildDevelopmentSlider extends StatelessWidget {
  final List<String> imageUrls;
  
  ChildDevelopmentSlider({required this.imageUrls});
  
  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: 200.0,
        autoPlay: true,
        enlargeCenterPage: true,
        enableInfiniteScroll: 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(),
    );
  }
}

위 코드에서는 CarouselSlider 위젯을 사용하여 슬라이더를 구현합니다. options 속성을 설정하여 슬라이더의 동작을 조정할 수 있으며, items 속성을 통해 슬라이더에 표시할 컨텐츠를 정의합니다.

3. 슬라이더 사용하기

위에서 정의한 ChildDevelopmentSlider 위젯을 다른 화면에서 사용해보겠습니다. 다른 화면에서 슬라이더를 사용하려면 다음과 같은 코드를 작성합니다.

import 'package:flutter/material.dart';
import 'package:your_app/child_development_slider.dart';

class ChildDetailScreen extends StatelessWidget {
  final List<String> developmentImages = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ];
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('자녀 발달 일지'),
      ),
      body: ChildDevelopmentSlider(imageUrls: developmentImages),
    );
  }
}

위 코드에서는 ChildDevelopmentSlider 위젯을 사용하여 슬라이더를 화면에 표시합니다. developmentImages 리스트에는 슬라이더에 표시할 이미지 URL들을 저장하고, ChildDevelopmentSlider 위젯에 이 리스트를 전달합니다.

마무리

이렇게 carousel_slider 패키지를 사용하여 자녀 발달 일지 슬라이더를 만들었습니다. carousel_slider 패키지의 다양한 옵션을 활용하여 슬라이더의 모양과 동작을 원하는 대로 커스터마이즈할 수 있습니다. 자녀 발달 일지를 보여주는데 슬라이더를 사용하면 사용자들은 쉽게 이전 기록을 확인할 수 있어 편리합니다.

1. carousel_slider 패키지 추가하기

2. 슬라이더 구현하기

3. 슬라이더 사용하기

마무리

참고 자료