flutter_rating_bar_universal #

A flexible, production-ready Flutter rating bar that supports icons, SVG/PNG assets, and custom widgets — with half ratings, drag gestures, animations, and read-only display mode.

Most rating packages only accept IconData. This package solves that with three rendering modes and a unified API.

Why this package? #

Features #

• 3 rendering modes — Icon, Asset (SVG/PNG/network), Widget
• Built-in half-star icon — auto uses Icons.star_half for default stars
• Half & fractional ratings — 3.5, 3.7, any precision
• Custom clipping — automatic half-star clip or dedicated half asset/widget
• Read-only mode — isInteractive: false or ignoreGestures: true
• Drag rating — updateOnDrag: true
• Animations — smooth rating transitions and optional scale effect
• Vertical layout — direction: Axis.vertical
• itemBuilder — full per-item control via RatingState
• Zero-config defaults — works out of the box with star icons

Screenshots #

Run the example app locally for live interaction: cd example && flutter run

Installation #

dependencies:
  flutter_rating_bar_universal: ^1.0.0

Quick Start #

import 'package:flutter_rating_bar_universal/flutter_rating_bar_universal.dart';

Default stars (with auto half-star icon) #

UniversalRatingBar(
  rating: 3.5,
  onRatingChanged: (value) => print(value),
)

At 3.5, the bar automatically renders Icons.star_half — no extra setup needed.

Custom icons #

UniversalRatingBar.icon(
  rating: 4,
  filledIcon: Icons.favorite,
  emptyIcon: Icons.favorite_border,
  filledColor: Colors.red,
  emptyColor: Colors.grey,
  onRatingChanged: (value) => setState(() => rating = value),
)

SVG / PNG assets #

UniversalRatingBar.asset(
  rating: 3.5,
  filledAsset: 'assets/icons/star_filled.svg',
  emptyAsset: 'assets/icons/star_empty.svg',
  halfAsset: 'assets/icons/star_half.svg', // optional
  onRatingChanged: (value) => setState(() => rating = value),
)

Network URLs are also supported:

UniversalRatingBar.asset(
  rating: 4,
  filledAsset: 'https://example.com/star_full.png',
  emptyAsset: 'https://example.com/star_empty.png',
)

Custom widgets #

UniversalRatingBar.custom(
  rating: 2.5,
  filledWidget: Text('😍', style: TextStyle(fontSize: 28)),
  emptyWidget: Text('😐', style: TextStyle(fontSize: 28)),
  onRatingChanged: (value) => setState(() => rating = value),
)

itemBuilder (enterprise-grade customization) #

UniversalRatingBar.custom(
  rating: 3.5,
  itemBuilder: (context, index, state) {
    switch (state) {
      case RatingState.full:
        return Icon(Icons.star, color: Colors.amber);
      case RatingState.half:
        return Icon(Icons.star_half, color: Colors.amber);
      case RatingState.empty:
        return Icon(Icons.star_border, color: Colors.grey);
    }
  },
  onRatingChanged: (value) => setState(() => rating = value),
)

Configuration #

Half-star behavior #

Read-only mode #

UniversalRatingBar(
  rating: 4.5,
  isInteractive: false,
)

Drag rating #

UniversalRatingBar(
  rating: rating,
  updateOnDrag: true,
  precision: 0.1,
  onRatingChanged: (value) => setState(() => rating = value),
)

Vertical rating #

UniversalRatingBar(
  rating: 3,
  direction: Axis.vertical,
)

Animated rating #

UniversalRatingBar(
  rating: rating,
  animateRatingChange: true,
  animationDuration: Duration(milliseconds: 300),
  enableScaleEffect: true,
  onRatingChanged: (value) => setState(() => rating = value),
)

Alias #

FlexRatingBar is exported as a typedef alias for UniversalRatingBar.

Example app #

git clone https://github.com/DroidMagician/Universal-Rating-Bar
cd Universal-Rating-Bar/example
flutter run

pub.flutter-io.cn topics #

rating · rating-bar · star-rating · widgets · svg

License #

MIT