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

04 Dec 2023

flutter

일기장 슬라이더는 다양한 일기를 슬라이드 형식으로 보여주는 기능입니다. carousel_slider 패키지를 사용하면 간단하게 구현할 수 있습니다. 이번에는 Flutter에서 carousel_slider를 사용하여 일기장 슬라이더를 만드는 방법을 알아보겠습니다.

1. carousel_slider 패키지 추가하기

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

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^4.0.0

추가한 후에는 flutter pub get 명령을 실행하여 패키지를 설치합니다.

2. 일기 데이터 준비하기

일기장 슬라이더에 보여줄 일기 데이터를 준비해야 합니다. 간단한 데이터 클래스를 생성하여 일기의 제목과 내용을 저장합니다.

class Diary {
  String title;
  String content;

  Diary({required this.title, required this.content});
}

3. 일기장 슬라이더 구현하기

이제 일기장 슬라이더를 구현해보겠습니다. 가장 먼저, carousel_slider 패키지를 import 해줍니다.

import 'package:carousel_slider/carousel_slider.dart';

다음으로, 일기 데이터를 저장한 리스트를 생성합니다.

List<Diary> diaries = [
  Diary(title: '일기 1', content: '오늘은 맑은 날씨였습니다.'),
  Diary(title: '일기 2', content: '친구들과 함께 즐거운 시간을 보냈습니다.'),
  Diary(title: '일기 3', content: '저녁에 맛있는 음식을 먹었습니다.'),
];

마지막으로, carousel_slider를 사용하여 일기를 슬라이드 형식으로 보여줍니다.

CarouselSlider(
  options: CarouselOptions(
    height: 200,
    enlargeCenterPage: true,
    autoPlay: true,
    autoPlayInterval: Duration(seconds: 3),
  ),
  items: diaries.map((diary) {
    return Builder(
      builder: (BuildContext context) {
        return Container(
          width: MediaQuery.of(context).size.width,
          margin: EdgeInsets.symmetric(horizontal: 5.0),
          decoration: BoxDecoration(
            color: Colors.teal,
            borderRadius: BorderRadius.circular(10.0),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                diary.title,
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
              SizedBox(height: 10),
              Text(
                diary.content,
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.white,
                ),
              ),
            ],
          ),
        );
      },
    );
  }).toList(),
)

결론

carousel_slider를 사용하여 일기장 슬라이더를 구현하는 방법을 알아보았습니다. 이를 활용하면 다양한 형태의 슬라이더를 간편하게 만들 수 있습니다. 추가적으로 슬라이더에 기능을 추가하거나 디자인을 변경할 수도 있으니, 더 많은 공식 문서를 참고해보세요.

참고 자료