carousel_slider는 Flutter에서 쉽게 사용할 수 있는 슬라이더 라이브러리입니다. 이를 사용하여 일정 슬라이더를 만들어보겠습니다.
1. carousel_slider 패키지 추가하기
먼저, carousel_slider 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음을 추가해주세요:
dependencies:
carousel_slider: ^4.0.0
프로젝트를 업데이트하기 위해 터미널에서 flutter pub get 명령을 실행해주세요.
2. 슬라이더 위젯 만들기
슬라이더 위젯을 만들기 위해 carousel_slider 패키지의 CarouselSlider 위젯을 사용합니다. 예를 들어, 다음과 같이 슬라이더 위젯을 생성할 수 있습니다:
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
class MyCarouselSlider extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CarouselSlider(
items: [
// 슬라이드에 표시될 위젯들을 추가해주세요.
Container(
color: Colors.red,
child: Center(
child: Text('슬라이드 1', style: TextStyle(fontSize: 24, color: Colors.white)),
),
),
Container(
color: Colors.blue,
child: Center(
child: Text('슬라이드 2', style: TextStyle(fontSize: 24, color: Colors.white)),
),
),
Container(
color: Colors.green,
child: Center(
child: Text('슬라이드 3', style: TextStyle(fontSize: 24, color: Colors.white)),
),
),
],
options: CarouselOptions(
height: 200,
autoPlay: true,
aspectRatio: 16 / 9,
enlargeCenterPage: true,
),
);
}
}
위 코드에서는 CarouselSlider 위젯의 items 속성으로 표시될 슬라이드 위젯들을 추가하고, options 속성으로 슬라이더의 옵션을 설정하고 있습니다.
3. 슬라이더 사용하기
위에서 만든 MyCarouselSlider 위젯을 사용하기 위해, 화면에 해당 위젯을 추가해주세요. 예를 들어, 다음과 같이 사용할 수 있습니다:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Carousel Slider',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Carousel Slider'),
),
body: Center(
child: MyCarouselSlider(), // 슬라이더 위젯 사용
),
),
);
}
}
위 코드에서는 MyCarouselSlider 위젯을 Center 위젯 안에 추가하여 슬라이더를 화면 중앙에 표시하고 있습니다.
이제 앱을 실행해보면 일정 슬라이더가 동작하는 것을 확인할 수 있습니다.
마무리
위에서는 carousel_slider 패키지를 사용하여 일정 슬라이더를 만드는 방법을 소개했습니다. carousel_slider는 다양한 슬라이더 UI를 구현할 수 있는 강력한 도구이므로, Flutter 앱에서 슬라이더를 사용할 때 유용하게 활용할 수 있습니다.
더 자세한 내용은 carousel_slider 패키지 문서를 참조해주세요.