Flutter에서 Carousel Slider는 이미지나 위젯을 좌우로 스와이프하는 기능을 제공하는 간단하고 유용한 패키지입니다. 그러나 기본적으로 Carousel Slider는 현재 페이지를 나타내는 페이징을 제공하지 않습니다. 이 문제를 해결하기 위해 페이징 기능을 Carousel Slider에 추가하는 방법에 대해 알아보겠습니다.
패키지 가져오기
페이징을 추가하기 위해 우선 Carousel Slider 패키지를 Flutter 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음의 의존성을 추가합니다:
dependencies:
carousel_slider: ^3.0.0
페이징을 추가한 Carousel Slider 사용하기
다음은 Carousel Slider에 페이징을 추가하는 예제 코드입니다:
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
class MyCarouselSlider extends StatefulWidget {
@override
_MyCarouselSliderState createState() => _MyCarouselSliderState();
}
class _MyCarouselSliderState extends State<MyCarouselSlider> {
int _currentIndex = 0;
final List<String> _images = [
'image1.jpg',
'image2.jpg',
'image3.jpg',
];
@override
Widget build(BuildContext context) {
return CarouselSlider(
items: _images.map((image) {
return Builder(
builder: (BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 5.0),
child: Image.asset(
image,
fit: BoxFit.cover,
),
);
},
);
}).toList(),
options: CarouselOptions(
height: 200.0,
initialPage: 0,
onPageChanged: (index, _) {
setState(() {
_currentIndex = index;
});
},
),
);
}
}
위의 코드에서 Carousel Slider 클래스를 사용하여 슬라이더를 생성하고, 각 이미지를 Container 안에 위치시키고 페이징 개수에 따라 현재 페이지를 업데이트합니다. Carousel Options 객체를 사용하여 초기 페이지와 페이지가 변경될 때 호출되는 콜백 함수를 설정합니다.
페이징 표시하기
페이지 지시자를 표시하려면 Carousel Slider와 함께 ListView 또는 Row를 사용하여 페이지가 나타나도록 할 수 있습니다. 예를 들어, Row 위젯을 사용하여 선택된 페이지를 강조하는 작은 점을 만들 수 있습니다:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: _images.map((image) {
int index = _images.indexOf(image);
return Container(
width: 10,
height: 10,
margin: EdgeInsets.symmetric(vertical: 10, horizontal: 2),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _currentIndex == index ? Colors.black : Colors.grey,
),
);
}).toList(),
);
위의 코드에서는 Row 위젯을 사용하여 점을 나열하고, _currentIndex와 현재 인덱스가 일치하는지 확인하여 선택된 페이지를 강조합니다.
결론
위에서 설명한 방법을 따라 Carousel Slider에 페이징을 추가할 수 있습니다. 페이징을 추가하면 사용자가 현재 페이지를 파악하기 쉬워지므로 UX를 향상시킬 수 있습니다. Carousel Slider는 매우 유연한 라이브러리이므로, 필요에 따라 다양한 사용자 정의를 적용할 수 있습니다.