Flutter에서 carousel_slider를 사용하여 이미지나 아이템을 좌우로 스와이프할 수 있는 기능을 구현할 수 있습니다. 이번에는 carousel_slider의 아이템에 해당하는 별점을 표시하는 방법에 대해 알아보겠습니다.
carousel_slider 설치하기
먼저 carousel_slider 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래 코드를 추가해 주세요.
dependencies:
carousel_slider: ^1.4.1
그리고나서 터미널에서 flutter packages get 명령을 실행하여 패키지를 가져옵니다.
별점 위젯 추가하기
이제 별점을 표시하기 위한 위젯을 추가해 봅시다. 다음은 별점을 표시하기 위한 StarRating 위젯의 코드 예시입니다.
import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';
class StarRating extends StatelessWidget {
final double rating;
StarRating({this.rating});
@override
Widget build(BuildContext context) {
return RatingBar.builder(
initialRating: rating,
minRating: 1,
itemSize: 20.0,
direction: Axis.horizontal,
allowHalfRating: true,
itemCount: 5,
itemBuilder: (context, _) => Icon(
Icons.star,
color: Colors.amber,
),
onRatingUpdate: null,
);
}
}
carousel_slider에 별점 추가하기
이제 carousel_slider에 별점을 추가해 보겠습니다. 다음은 carousel_slider의 각 아이템에 별점을 표시하는 예시 코드입니다.
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
class CarouselWithStarRating extends StatefulWidget {
@override
_CarouselWithStarRatingState createState() => _CarouselWithStarRatingState();
}
class _CarouselWithStarRatingState extends State<CarouselWithStarRating> {
List<String> images = [
'assets/image1.jpg',
'assets/image2.jpg',
'assets/image3.jpg',
];
List<double> ratings = [
4.5,
3.8,
4.0,
];
@override
Widget build(BuildContext context) {
return CarouselSlider.builder(
itemCount: images.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Image.asset(
images[index],
height: 200,
width: double.infinity,
fit: BoxFit.cover,
),
SizedBox(height: 10),
StarRating(rating: ratings[index]),
],
);
},
options: CarouselOptions(
viewportFraction: 0.8,
aspectRatio: 16 / 9,
autoPlay: true,
autoPlayInterval: Duration(seconds: 3),
autoPlayAnimationDuration: Duration(milliseconds: 800),
pauseAutoPlayOnTouch: true,
enlargeCenterPage: true,
),
);
}
}
위 코드에서 images는 carousel_slider의 아이템으로 사용할 이미지 리스트입니다. ratings는 각 이미지에 해당하는 별점을 나타내는 리스트입니다. 따라서 carousel_slider의 각 아이템에는 이미지와 해당하는 별점이 함께 표시됩니다.
이제 CarouselWithStarRating 위젯을 사용하여 별점이 표시된 carousel_slider를 구현할 수 있습니다.
마무리
위의 방법을 따라하면 Flutter에서 carousel_slider를 사용하여 아이템에 맞는 별점을 표시할 수 있습니다. carousel_slider와 별점을 함께 사용하여 다양한 이미지나 아이템을 보여주고, 사용자들의 평가를 표시할 수 있습니다. 이를 사용하여 앱 화면을 더 예쁘게 만들어보세요.
위 코드는 Flutter 2.2.0 버전과 carousel_slider 1.4.1 버전에서 테스트되었습니다.