flare_rating

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

flare_rating demo

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

Fills the star background with unfilledColor.
Clips the canvas to the star outline.
Draws a sine-wave shaped fill that rises from the bottom — the wave phase is driven by a continuously repeating AnimationController.
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.