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

04 Dec 2023

flutter

소개

Flutter는 Google에서 개발한 UI 프레임워크로, 멋진 사용자 인터페이스를 만들 수 있는 기능을 제공합니다. 이번 블로그 포스트에서는 Flutter의 carousel_slider 패키지를 사용하여 감정 일기 슬라이더를 만드는 방법에 대해 알아보겠습니다.

carousel_slider 패키지 설치

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

dependencies:
  carousel_slider: ^X.X.X

X.X.X는 사용하고자 하는 버전으로 대체되어야 합니다. 의존성을 추가한 후, 터미널에서 flutter packages get 명령어를 실행하여 패키지를 설치해주세요.

감정 일기 슬라이더 만들기

이제, carousel_slider를 사용하여 감정 일기 슬라이더를 만들 차례입니다.

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

class DiarySlider extends StatelessWidget {
  final List<String> diaryList; // 감정 일기 목록

  DiarySlider({required this.diaryList});

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      options: CarouselOptions(
        height: 200,
        enableInfiniteScroll: false,
      ),
      items: diaryList.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.white,
                borderRadius: BorderRadius.circular(10.0),
              ),
              child: Center(
                child: Text(
                  diary,
                  style: TextStyle(fontSize: 16.0),
                ),
              ),
            );
          },
        );
      }).toList(),
    );
  }
}

위의 코드는 DiarySlider라는 StatefulWidget를 정의하는데, 이 클래스는 diaryList라는 문자열 목록을 인자로 받아 감정 일기 슬라이더를 생성합니다. 각 슬라이더 항목은 일기 목록의 요소로 만들어집니다.

사용법

DiarySlider 위젯을 사용하기 위해서는 다음과 같이 사용할 수 있습니다.

class MyHomePage extends StatelessWidget {
  final List<String> diaryList = ['행복', '슬픔', '평온'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('감정 일기 슬라이더'),
      ),
      body: Center(
        child: DiarySlider(diaryList: diaryList),
      ),
    );
  }
}

위의 예시에서는 MyHomePage 위젯에서 diaryList를 정의하고, DiarySlider 위젯을 사용하여 감정 일기 슬라이더를 생성하였습니다.

마무리

이제 Flutter의 carousel_slider를 활용하여 감정 일기 슬라이더를 만드는 방법을 알아보았습니다. carousel_slider는 다양한 컨텐츠에 적용할 수 있으며, 추가적인 옵션과 스타일링을 통해 원하는 형태로 커스터마이징할 수 있습니다.

더 많은 자세한 내용은 carousel_slider 패키지 레퍼런스를 참조해주세요.