✨ 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! ✨
