연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.
✨ Easy Stars: Your Flutter Rating Solution! ✨
Add a touch of sparkle to your Flutter app with Easy Stars — the all-in-one solution for elegant and customizable rating widgets.
🚀 Getting Started
Add to your pubspec.yaml:
dependencies:
easy_stars: ^1.0.3
Then:
flutter pub get
💡 Example Usage
Below are rich examples showcasing the versatility of Easy Stars:
1️⃣ Basic Ratings
🌟 Basic 5-Star Rating
EasyStarsRating (
initialRating: 3.0 ,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
⭐ Half-Star Rating
EasyStarsRating (
initialRating: 2.5 ,
allowHalfRating: true ,
filledColor: Colors .orange,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
✅ Read-Only Display
EasyStarsDisplay (
initialRating: 4.2 ,
readOnly: true ,
filledColor: Colors .green,
)
2️⃣ Animations
💫 Scale Animation
EasyStarsRating (
initialRating: 4.0 ,
animationConfig: StarAnimationConfig .scale,
filledColor: Colors .purple,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
💫 Bounce Animation
EasyStarsRating (
initialRating: 3.0 ,
animationConfig: StarAnimationConfig .bounce,
filledColor: Colors .blue,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
💫 Rotation Animation
EasyStarsRating (
initialRating: 4.0 ,
animationConfig: StarAnimationConfig .rotate,
filledColor: Colors .red,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
💫 Pulse Animation
EasyStarsRating (
initialRating: 3.5 ,
animationConfig: StarAnimationConfig .pulse,
filledColor: Colors .pink,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
3️⃣ Arrangements
🌀 Arc Arrangement
EasyStarsRating (
initialRating: 4.0 ,
starCount: 7 ,
arrangement: StarArrangement .arc,
arrangementRadius: 80 ,
filledColor: Colors .orange,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
🟦 Grid Arrangement
EasyStarsRating (
initialRating: 3.0 ,
arrangement: StarArrangement .grid,
gridColumns: 3 ,
filledColor: Colors .indigo,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
🌊 Wave Arrangement
EasyStarsRating (
initialRating: 3.5 ,
arrangement: StarArrangement .wave,
waveAmplitude: 15 ,
filledColor: Colors .cyan,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
🌀 Spiral Arrangement
EasyStarsRating (
initialRating: 4.0 ,
arrangement: StarArrangement .spiral,
arrangementRadius: 50 ,
filledColor: Colors .deepOrange,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
4️⃣ Custom Shapes & Colors
❤️ Heart Shape
EasyStarsRating (
initialRating: 3.5 ,
starShape: StarShape .heart,
filledColor: Colors .red,
emptyColor: Colors .pink.shade100,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
🎨 Gradient Colors
EasyStarsRating (
initialRating: 3.3 ,
gradientColors: [Colors .yellow, Colors .orange, Colors .red],
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
⭐ Custom Icons
EasyStarsRating (
initialRating: 3.6 ,
customIcons: [
Icons .favorite,
Icons .star,
Icons .thumb_up,
Icons .mood,
Icons .emoji_events,
],
customColors: [
Colors .red,
Colors .amber,
Colors .blue,
Colors .green,
Colors .purple,
],
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
5️⃣ Advanced Features
🔹 Size Variants
Row (
children: [
EasyStarsRating (
initialRating: 3.0 ,
sizeVariant: StarSizeVariant .small,
),
EasyStarsRating (
initialRating: 3.0 ,
sizeVariant: StarSizeVariant .medium,
),
EasyStarsRating (
initialRating: 3.0 ,
sizeVariant: StarSizeVariant .large,
),
],
)
🔹 Shadow Effect
EasyStarsRating (
initialRating: 4.0 ,
starShadow: BoxShadow (
color: Colors .black26,
blurRadius: 2 ,
offset: Offset (1 , 1 ),
),
filledColor: Colors .amber,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
🔹 Rotated Arrangement
EasyStarsRating (
initialRating: 3.5 ,
arrangementRotation: 0.2 ,
filledColor: Colors .purple,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
6️⃣ Interactions
🟢 Drag Interaction
EasyStarsRating (
initialRating: 2.9 ,
dragSensitivity: DragSensitivity .high,
animationConfig: StarAnimationConfig .scale,
filledColor: Colors .deepPurple,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
🟤 Clearable Rating
EasyStarsRating (
initialRating: 3.0 ,
allowClear: true ,
filledColor: Colors .brown,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
🟢 Vertical Layout
EasyStarsRating (
initialRating: 4.0 ,
direction: StarDirection .vertical,
spacing: 8 ,
filledColor: Colors .lime,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
7️⃣ Emojis
😊 Discrete Emoji Rating
EasyStarsEmoji (
initialRating: 4.5 ,
showRatingText: true ,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
😍 Emoji Slider
EasyStarsEmojiSlider (
initialRating: 4.5 ,
showRatingText: true ,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
🤩 Custom Emojis
EasyStarsEmoji (
initialRating: 4.0 ,
customEmojis: ['😡' , '😔' , '😑' , '😃' , '🤩' ],
showRatingText: true ,
onRatingChanged: (value) {
setState (() {
_rating = value;
});
},
)
8️⃣ Bottom Sheet
EasyStarsReviewBottomSheet .show (
context: context,
title: 'Advanced Review' ,
subtitle: 'Tell us about your detailed experience' ,
initialRating: 0.0 ,
reviewType: ReviewType .stars,
allowModeSwitch: true ,
allowHalfRating: true ,
isCommentRequired: true ,
minCharacters: 10 ,
maxCharacters: 300 ,
showRatingLabels: true ,
animationConfig: StarAnimationConfig .bounce,
filledColor: Colors .orange,
emptyColor: Colors .grey.shade300,
starCount: 5 ,
ratingSize: 36.0 ,
customRatingLabels: ['Terrible' , 'Poor' , 'Okay' , 'Good' , 'Amazing' ],
hintText: 'Please share your detailed feedback...' ,
headerWidgets: [
Card (
color: Colors .orange.shade50,
child: const Padding (
padding: EdgeInsets .all (12.0 ),
child: Row (
children: [
Icon (Icons .shopping_bag, color: Colors .orange),
SizedBox (width: 8 ),
Text (
'Product: Easy Stars Package' ,
style: TextStyle (fontWeight: FontWeight .w500),
),
],
),
),
),
],
footerWidgets: [
CheckboxListTile (
title: const Text ('Recommend to others' ),
subtitle: const Text ('Would you recommend this to friends?' ),
value: true ,
onChanged: (value) {},
dense: true ,
),
],
);
📚 Additional Resources
📁 Explore the example/ directory for full implementation
💬 Contribute on GitHub
🐛 Found a bug? Open an issue
🏁 License
MIT © 2025 Piyu-Pika
✨ Let your stars shine with Easy Stars! ✨
