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

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

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

Custom

❤️ 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

Advanced

🔹 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

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

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

BottomSheet

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

Libraries

easy_stars