A simple animated rating bar to help you implement a rating system in your app.

Features

  • Change between 5 types of animation (bounce, shake, bounceDiagonally, rotate and none).
  • Adjust the intensity of the animations.
  • Use any widget as rating indicator.
  • You choose how many rating objects will be.
  • Select a rating by tapping.
  • Includes a toggleable Cascade-Animation.

Usage

  1. Declare an AnimatedRatingBar with the desired parameters.
    AnimatedRatingBar(
        animationType: ARBAnimationType.rotate,
        emptyWidget: Icon(
          Icons.star_border_rounded,
          size: 48,
          color: Colors.white,
        ),
        fullWidget: Icon(
          Icons.star_rounded,
          size: 48,
          color: Colors.white,
        ),
    ),

DEMO1

  1. Use the shake animation:

DEMO2

  1. Or the bounce animation:

DEMO3

  1. Explore other parameters to customize your rating bar, including animation intensity and rating widget selection. You can retrieve the current rating value using the onRatingChanged callback method.
    AnimatedRatingBar(
        animationType: ARBAnimationType.rotate,
        emptyWidget: Icon(
          Icons.star_border_rounded,
          size: 48,
          color: Colors.white,
        ),
        fullWidget: Icon(
          Icons.star_rounded,
          size: 48,
          color: Colors.white,
        ),
        //here
        onRatingChanged: (value) {
            int rating = value;
        },
    ),

Additional information

Feel free to submit pull requests or suggest changes on issues (on GitHub). A simple example is available on the GitHub repository.