Search packages, repositories and app categories

easy_stars cover
Package detailsv1.1.0

easy_stars

A comprehensive Flutter package for rating and review stars with advanced customization, animations, and flexible layouts.

AndroidiOSWebmacOSWindowsLinux
30-day downloads
1.5K
Likes
8
Pub points
160

Install package

flutter pub add easy_stars

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

Easy Stars is a Flutter package designed to simplify the implementation of rating and review star components. It offers extensive customization options, smooth animations, and flexible layout configurations for both single and interactive star ratings. Developers can easily integrate visually appealing star widgets into their apps with minimal code. The package supports all major platforms, including mobile, web, and desktop, making it ideal for cross-platform applications requiring user feedback mechanisms.

Use cases

  • User reviews in e-commerce apps
  • Rating systems in social media platforms
  • Feedback collection in productivity tools
  • Interactive forms with star input
  • App store-style rating displays

Key features

  • Customizable star appearance
  • Smooth animation effects
  • Flexible layout options
  • Support for half-star ratings
  • Cross-platform compatibility
  • Interactive touch feedback

Suitable for

  • Developers building feedback-heavy apps
  • Designers needing polished UI components
  • Projects requiring responsive star widgets
  • Apps targeting multiple platforms
  • Teams prioritizing rapid UI development

Considerations

  • May require additional styling for complex themes
  • Performance impact with large numbers of stars
  • Limited built-in validation beyond basic rating
  • Depends on Flutter's gesture system for interactivity
  • Not optimized for extremely high-frequency updates

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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

Categories

Source repository

Projects using this package

No data available yet.