flare_rating 0.0.2

Animated star rating widget for Flutter with wave fill and particle burst effects. Supports half-star, haptics, and read-only mode.

flare_rating

A beautiful animated star-rating widget for Flutter — featuring a wave fill animation and particle burst on selection.

---

✨ Features

Feature	Details
🌊 Wave fill	Liquid wave animation rises inside each star
✨ Particle burst	Colourful particles explode on rating selection
½ Half-star	Optional half-step rating via allowHalfRating
📳 Haptics	Haptic feedback on tap and drag
👁 Read-only	Disable interaction by omitting onRatingUpdate
🎨 Customisable	Colours, size, count, padding, animation duration
⚡ Zero dependencies	Only depends on Flutter SDK

---

🚀 Getting started

Add to your pubspec.yaml:

dependencies:
  flare_rating: ^0.0.1

Import the package:

import 'package:flare_rating/flare_rating.dart';

---

📖 Usage

Basic

double _rating = 3.0;

FlareRating(
  rating: _rating,
  onRatingUpdate: (value) {
    setState(() => _rating = value);
  },
)

Half-star support

FlareRating(
  rating: 2.5,
  allowHalfRating: true,
  onRatingUpdate: (value) => setState(() => _rating = value),
)

Custom colour and count

FlareRating(
  rating: _rating,
  itemCount: 7,
  itemSize: 48,
  filledColor: Colors.deepOrange,
  unfilledColor: Colors.orange.shade100,
  onRatingUpdate: (value) => setState(() => _rating = value),
)

Read-only display

// Simply omit onRatingUpdate
FlareRating(rating: 4.5, allowHalfRating: true)

Disable particles or haptics

FlareRating(
  rating: _rating,
  showParticles: false,
  enableHaptics: false,
  onRatingUpdate: (v) => setState(() => _rating = v),
)

---

🎛️ Parameters

Parameter	Type	Default	Description
rating	double	required	Current rating [0, itemCount]
itemCount	int	5	Number of stars
itemSize	double	40	Star width & height in logical pixels
itemPadding	double	4	Horizontal gap between stars
filledColor	Color	Colors.amber	Filled star colour
unfilledColor	Color	#DDDDDD	Unfilled star colour
onRatingUpdate	ValueChanged<double>?	null	Rating change callback; null = read-only
allowHalfRating	bool	false	Enable half-star selection
animationDuration	Duration	350 ms	Fill transition duration
showParticles	bool	true	Particle burst on selection
enableHaptics	bool	true	Haptic feedback on interaction

---

📐 How it works

Each star is drawn with a CustomPainter that:

1. Fills the star background with unfilledColor.
2. Clips the canvas to the star outline.
3. Draws a sine-wave shaped fill that rises from the bottom — the wave phase is driven by a continuously repeating AnimationController.
4. On selection, a second AnimationController drives 14 diamond-shaped particles that radiate outward and fade over ~650 ms.

---

🧪 Running tests

flutter test

---

📱 Example app

See the example/ folder for a full showcase with multiple configurations.

---

🤝 Contributing

Pull requests are welcome. For major changes, please open an issue first.

---

📜 License

MIT © ErsanQ