[flutter] carousel_slider를 사용하여 응답형 이미지 슬라이더 만들기
안녕하세요! 이번에는 Flutter에서 carousel_slider를 사용하여 응답형 이미지 슬라이더를 만드는 방법에 대해 알아보겠습니다.
carousel_slider란?
carousel_slider는 Flutter에서 제공하는 이미지나 위젯을 슬라이드 형태로 보여주는 라이브러리입니다. 다양한 터치 동작과 사용자 정의 설정을 지원하며, 응답형 디자인을 구현하기에 매우 유용합니다.
설치
먼저, carousel_slider 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일의 dependencies 섹션에 다음과 같이 추가해주세요.
dependencies:
carousel_slider: ^4.0.0
그리고나서 터미널에서 다음 명령을 실행하여 패키지를 가져옵니다.
flutter pub get
사용 방법
- 먼저,
carousel_slider패키지를 가져옵니다.
import 'package:carousel_slider/carousel_slider.dart';
- 응답형 이미지 슬라이더를 구성하는 이미지들의 리스트를 생성합니다.
List<String> imageList = [
'assets/images/image1.jpg',
'assets/images/image2.jpg',
'assets/images/image3.jpg',
];
CarouselSlider위젯을 사용하여 응답형 이미지 슬라이더를 구현합니다.
CarouselSlider(
options: CarouselOptions(
aspectRatio: 16/9, // 슬라이더의 가로 세로 비율
enlargeCenterPage: true, // 현재 페이지를 확대하여 표시
autoPlay: true, // 자동 슬라이드 기능 사용
autoPlayInterval: Duration(seconds: 2), // 슬라이드 간의 시간 간격
autoPlayAnimationDuration: Duration(milliseconds: 800), // 슬라이드 애니메이션 소요 시간
autoPlayCurve: Curves.fastOutSlowIn, // 슬라이드 애니메이션 커브
enableInfiniteScroll: true, // 무한 스크롤 사용
viewportFraction: 0.8, // 슬라이더 크기 비율
),
items: imageList.map((item) => Container(
child: Center(
child: Image.asset(item, fit: BoxFit.cover),
),
)).toList(),
)
위 코드에서 imageList는 슬라이더에 표시될 이미지들의 경로를 담고 있는 리스트입니다. 이미지를 위한 가로 세로 비율, 자동 슬라이드 간격 등은 CarouselOptions의 속성들을 사용하여 설정할 수 있습니다.
- 마지막으로, 슬라이더를 화면에 표시합니다.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Slider'),
),
body: Center(
child: CarouselSlider(
// ...위에서 작성한 코드를 여기에 추가
),
),
);
}
이제 애플리케이션을 실행하면 응답형 이미지 슬라이더가 화면에 표시됩니다. 사용자가 슬라이더를 스와이프하거나 화면을 터치하면 이미지가 움직이는 모습을 확인할 수 있습니다.