[flutter] carousel_slider를 사용하여 아기 돌잔치 슬라이더 만들기
아기 돌잔치는 매우 특별한 기념일입니다. 이 기념일에는 아기가 성장한 모습을 사랑하는 사람들과 함께 공유하고 싶습니다. 그래서 이번에는 Flutter의 carousel_slider 패키지를 사용하여 아기 돌잔치 슬라이더를 만드는 방법을 알아보겠습니다.
carousel_slider 패키지 추가하기
아래와 같이 pubspec.yaml 파일에 carousel_slider 패키지를 추가합니다.
dependencies:
flutter:
sdk: flutter
carousel_slider: ^3.0.0
그리고 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드 받습니다.
슬라이더 만들기
아래와 같이 CarouselSlider 위젯을 사용하여 슬라이더를 만들 수 있습니다.
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
class BabyBirthdaySlider extends StatelessWidget {
final List<String> images = [
'assets/image1.png',
'assets/image2.png',
'assets/image3.png',
];
@override
Widget build(BuildContext context) {
return CarouselSlider(
options: CarouselOptions(
height: 200,
autoPlay: true,
),
items: images.map((image) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5),
child: Image.asset(
image,
fit: BoxFit.cover,
),
);
},
);
}).toList(),
);
}
}
위 코드에서는 BabyBirthdaySlider라는 StatelessWidget을 정의하고, 슬라이더에 표시할 이미지들의 경로를 리스트로 선언합니다. 그리고 CarouselSlider 위젯을 사용하여 슬라이더를 생성합니다. options 속성으로 슬라이더의 높이와 자동 재생 여부를 설정할 수 있고, items 속성으로 슬라이더에 표시할 각 이미지를 설정합니다.
사용하기
위에서 정의한 BabyBirthdaySlider 위젯을 원하는 곳에서 사용할 수 있습니다.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Baby Birthday Slider'),
),
body: Center(
child: BabyBirthdaySlider(),
),
),
);
}
}
위 코드에서는 BabyBirthdaySlider 위젯을 Center 위젯 안에 배치하여 가운데에 슬라이더를 표시합니다.
결론
Flutter의 carousel_slider 패키지를 사용하면 간단하게 아기 돌잔치 슬라이더를 만들 수 있습니다. 이를 통해 아기 돌잔치의 특별한 순간들을 사랑하는 사람들과 함께 공유할 수 있습니다.