Colin's Blog
[flutter] carousel_slider를 사용하여 운동 일지 슬라이더 만들기

운동 일지를 시각적으로 보여주기 위해 슬라이더를 사용하는 것은 매우 유용합니다. Flutter에서는 carousel_slider라는 패키지를 사용하여 간단하게 운동 일지 슬라이더를 만들 수 있습니다. 이번 글에서는 carousel_slider를 사용하여 Flutter 앱에 운동 일지 슬라이더를 추가하는 방법에 대해 알아보겠습니다.

먼저, carousel_slider 패키지를 사용할 수 있도록 pubspec.yaml 파일에 의존성을 추가해야 합니다. 아래의 코드를 pubspec.yaml 파일의 dependencies 섹션에 추가하세요.

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

추가 후, 터미널에서 flutter pub get 명령을 실행하여 패키지를 가져옵니다.

다음으로, carousel_slider를 사용하여 운동 일지 슬라이더를 만들어봅시다. 아래의 코드를 참고하세요.

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

class WorkoutJournalSlider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<String> workoutJournalEntries = [
      "운동 일지 1",
      "운동 일지 2",
      "운동 일지 3",
      // 운동 일지 데이터를 추가하세요
    ];

    return CarouselSlider(
      options: CarouselOptions(
        height: 200,
        autoPlay: true,
      ),
      items: workoutJournalEntries.map((entry) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 10),
              decoration: BoxDecoration(
                color: Colors.blueAccent,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Center(
                child: Text(
                  entry,
                  style: TextStyle(fontSize: 24, color: Colors.white),
                ),
              ),
            );
          },
        );
      }).toList(),
    );
  }
}

이 코드는 WorkoutJournalSlider라는 StatelessWidget을 만들고, carousel_slider 패키지를 사용하여 슬라이더를 만듭니다. workoutJournalEntries 리스트에는 운동 일지 데이터가 들어갑니다. 이 데이터를 기반으로 슬라이더의 각 항목을 생성합니다. 슬라이더의 높이와 자동 재생 등의 옵션은 CarouselOptions에 설정할 수 있습니다.

3. 화면에 슬라이더 추가하기

마지막으로, 위에서 만든 WorkoutJournalSlider를 화면에 추가하는 방법에 대해 알아보겠습니다. 기존의 화면에 WorkoutJournalSlider를 추가하기 위해 아래의 코드를 참고하세요.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Workout Journal Slider',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Workout Journal Slider'),
        ),
        body: Center(
          child: WorkoutJournalSlider(),
        ),
      ),
    );
  }
}

이 코드는 WorkoutJournalSlider를 Center 위젯으로 감싸서 화면 중앙에 표시하도록 하였습니다. 본인의 Flutter 앱에 맞게 화면을 구성할 수 있습니다.

위의 코드를 실행하면 carousel_slider를 사용한 운동 일지 슬라이더를 확인할 수 있습니다.

참고 자료:

© 2018 Colin. All rights reserved.