sarbagyastha / flutter_rating_bar

A simple ratingbar for flutter which also include a rating bar indicator, supporting any fraction of rating.

flutter_rating_bar's Issues

Support for unrated colours

I have recently upgraded from 1.1.1 to the latest version and notice a couple of issues :

a) Placing a RatingBar inside certain containers (i.e a Chip) prevents RatingBar gestures from firing.

b) It is not possible to have the colour WHITE as a rating :

When there is a non rating, it is not possible to see this, regardless of the 'alpha' value that can be set.

Separate itemSize into height and width

After looking through the code I noticed that itemSized is applied to both width and height.
This is great for the use of Icons, as they are a square (at least most of the times in my understanding), but leads to issues with custom widgets.

Lets say I use a custom widget as an icon (see #54), then there is a space build, which I can not get rid off:
(notice the top and bottom space)

here it would be great imo to either have a width and height property or let the user pass a size class.

Furthermore, but this could be another issue, if no size is passed the widget should autosize based on its children.

itemPadding

Using itemPadding produces unwanted effects.

Can't change the size of the icons

I tried to set my own size for the icons but it is not working. here is my code:
RatingBar( initialRating: 3.5, minRating: 1, direction: Axis.horizontal, allowHalfRating: true, itemCount: 5, itemPadding: EdgeInsets.symmetric(horizontal: 4.0), itemBuilder: (context, _) => Icon( AppIcons.star, color: AppColors.primary, size: 15.0, ), onRatingUpdate: (rating) { print(rating); }, ),

Call value of rate in onPressed function

How to call the value of the rate in a onPressed function to be pushed on database?

The named parameter 'itemBuilder' isn't defined. ???

Always getting this error on a project without any reason for the moment could you help me on this.

Cheers

Option to display rating only

i.e. to prevent the value changing as the user touches

No rating property in RatingBar

There seems to be no rating property in RatingBar widget

I was trying to make a feature where after user changed rating, I wanted to confirm if he actually wants to change the rating or not.

In case he says NO, there is no way to change the rating of the RatingBar back to original rating.

It is available in RatingBarIndicator but it read-only.

icon size not change

i try to change icon size by put size in itemBuilder..but nothing happen

Changing rating back to 0 is confusing

This issue relates to #33

I like the feature, but in my opinion it is a little bit confusing for a user. No one will know to set the rating bar to 1 star and then tap again.

Wouldn't it be more intuitive that if you tap again on the same rating as you previously did to change the rating back to 0?

Example:
min rating is 0 max is 10. A user presses on the rating 8 icon, but then changes his mind and wants to 'reset the rating' aka go back to 0. The user will most likely press again the 8 icon rating to deselect it.

Half rating for tap gesture?

dear all,

i found it hard to rate half comparing with android / ios s' rating bar

is it cause by the tap gesture
ie: line 569

        onTap: () {
          if (widget.onRatingUpdate != null) {
            widget.onRatingUpdate(index + 1.0);
            setState(() {
              _rating = index + 1.0;
            });
          }
        },

can get how much intent user has clicked, and if half make half rating?
or else?

thanks

Half rating in initial rating adds 0.5

If we set for example 2.5 in initialRating and halfRating is true, widget will be created as 3.0

Probably if we create widget with initialRating 2.5 and halfRating false, it will be created as 3.5

Thanks.

Custom image asset for Rating Bar Indicator

Is it possible to have a property for the rating bar indicator to utilise custom assets as is the case in the standard flutterratingbar? i.e., fullratingwidget / halfratingwidget / noratingwidget within the indicator?

Error using first example in Readme

Hello, thank you for the package.

I get an error using your first example:
RatingBar(
initialRating: 3,
direction: Axis.horizontal,
allowHalfRating: true,
itemCount: 5,
itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
itemBuilder: (context, _) => Icon(
Icons.star,
color: Colors.amber,
),
onRatingUpdate: (rating) {
print(rating);
},
);

Error points to row 119 of the package claiming withAlpha is being called on null. When I put in the unratedcolor parameter it works. Not sure if this is to do with my usage or a bug in the plugin?

Do not send less than minimum rating to onRatingUpdate

Note: we are using BLoC to control the app state.

We are seeing the following behaviour while using this library:

• consider a minimum = 2, initial = 2, and maximum =4
• tap on the 2nd icon, the onRatingUpdate will be called with a 2
• a new BLoC state with this new rating will cause a repaint, which will match the rating bar state
• tap on the first icon, the onRatingUpdate will be called with a 1
  • BLoC ignores this new rating as for our logic it doesn't make sense to go below the minimum, causing no repaint
  • the rating bar marks only the first icon as active, which is incorrect

We've seen the logic need is in _dragOperation , which is not called when tapping on the first icon:

if (currentRating < _minRating) {
          _rating = _minRating;
        } else if (currentRating > _maxrating) {
          _rating = _maxrating;
        } else {
          _rating = currentRating;
        }
        setState(() {});

Could this be added for the onTap event?

Thank you!!

Migrate to null safety

Description

All dependencies are migrated to null safety. So we should migrate this package to null safety.

Resources

• How to migrate Dart packages to null safety
• Announcing Dart null safety beta

Not Flutter Web Compatible

Pub has marked this package as Web capable, but I get an exception using it with flutter web. Everything is great on Android. But on Web, I tracked the bug to the use of ColorFiltered.

Making the following change to avoid ColorFiltered, and no other change, avoids the exception (But of course that won't look like a dragging indicator--this isn't a fix, just code to show the problem is isolated to here):

class _ColorFilter extends StatelessWidget {
  final Widget child;
  final Color color;

  _ColorFilter({
    @required this.child,
    @required this.color,
  });

  @override
  Widget build(BuildContext context) {
    // ************************************************
    //  The ColorFiltered breaks WEB BUILDS
    //  kIsWeb is a property that returns true for web builds:
    //  import 'package:flutter/foundation.dart';
    // ************************************************
    if (kIsWeb) {
      return child;         // avoid the ColorFiltered wrapper to avoid throwing
    }
    return ColorFiltered(
      colorFilter: ColorFilter.mode(
        color,
        BlendMode.srcATop,
      ),
      child: ColorFiltered(
        colorFilter: ColorFilter.mode(
          Colors.white,
          BlendMode.srcATop,
        ),
        child: child,
      ),
    );
  }
}

I really like your widget and was happy using it until adding Web support to my app. Please let us know if you think you can implement a similar effect in a web-safe way.

If there's a way for you to indicate on Pub that this is not web compatible, please do.

I assume pub has a script that guesses which packages are Web and it misses this ColorFiltered. I'm not sure how to report it. Do you know?

Edit: Found the relevant dev issues on Flutter github:
flutter/flutter#40649
flutter/flutter#47163

Still looking for the proper way to report it as a pub platform category mistake

I'm using:
flutter_rating_bar: 3.0.0+1
Flutter (Channel dev, v1.13.7, on Microsoft Windows [Version 6.1.7601], locale en-US)

The exception text is:

════════ Exception caught by scheduler library ═════════════════════════════════════════════════════
The following UnimplementedError was thrown during a scheduler callback:
UnimplementedError

When the exception was thrown, this was the stack: 
package:build_web_compilers/src/dev_compiler/C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 196:49  throw_
package:build_web_compilers/src/dev_compiler/C:/b/s/w/ir/cache/builder/src/out/host_debug/flutter_web_sdk/lib/_engine/engine/surface/scene_builder.dart 173:5           pushColorFilter
package:flutter/src/rendering/layer.dart 1536:26                                                                                                                        addToScene
package:flutter/src/rendering/layer.dart 442:5                                                                                                                          [_addToSceneWithRetainedRendering]
package:flutter/src/rendering/layer.dart 1059:14                                                                                                                        addChildrenToScene
...
════════════════════════════════════════════════════════════════════════════════════════════════════

AllowHalfRating is reversed

Hello,
When i put allowHalfRating on true, the half rating is not support, but when I put it on false, the half rating is support. Is it normal ?

Use icons

I'd like to use material € icons, with X out of Y coloured positively, and (Y - X) coloured the other way

onRatingUpdate not working for other widgets if added inside item builder.

onRatingUpdate not working for other widgets if added inside item builder.

Read only property

There is no read only property. Why? Or why I am required to use onRatingUpdate if I don't want?

Tap to toggle a star

Is there a way to tap on a star to toggle whether its set or not? This is especially useful for toggling the first star, as its slightly intuitive for the user to swipe to the left on it.

You can't change the rating back to 0

If you tap on the first star, it always keeps that as value 1. Maybe having something if you tap on the first start again, after it was already 1, it changes it to zero.
Right now, the only way to change it to zero is to slide, and that is not as intuitive as taping.

How to disable Rating bar?

i will disable to choose rating bar with final value, how to code it?

No option to disable rating

This is a really simple and super useful library. How can I disable rating on this?

Target of URI doesn't exist

Hello, when I import it in my Dart file with
import 'package:flutter_rating_bar/flutter_rating_bar';

it says :
" Target of URI doesn't exist: 'package:flutter_rating_bar/flutter_rating_bar'.
Try creating the file referenced by the URI, or Try using a URI for a file that does exist.dart(uri_does_not_exist) "

Transparant unrated color

Hi,

Our UI designer is requesting the option to make the unrated stars semi-transparent.

Specifically, for a 4/5 star rating, he wants the 4 stars to be pink (works fine) and the last star transparent white. Our rating is displayed on top of an image, so it would look better than solid white/color.

Will this be possible at some point?

Thanks for the plugin by the way.

• Jonas

half rate stars by tab, not only by drag

i had done the feature
https://github.com/peterweb2005/flutter_rating_bar

as response to this:
#29

would it merge?

Only highlight the rating selected

Is it possible to only highlight the rating that's been selected, as opposed to highlighting every rating before it as well?

RTL Gesture support

If the layout direction is RTL , the filling effect still from LTR.

Version 4.0 issues

According with https://pub.dev/packages/flutter_rating_bar/install, I install the version 4.0.0 and, the parameters direction, minRating and so on aren't defined.

Ah, in Github only the tags 3.0 and 1.0 are listed.

Animation like_button

I think animated button as an optional feature would be great.
Reference: https://flutterawesome.com/a-flutter-library-that-allows-you-to-create-a-button-with-animation/

Icon Size

Is there a way to make the ratings icon smaller or bigger?

CupertinoAlertDialog and CupertinoActionSheet working with error in IOS

Hi.
Thanks for your awesome package.
If the widget contains a rating bar, CupertinoAlert Dialog, and CupertinoActionSheet working with the error in IOS. Android works well.
This is an issue screen.

Sorry for my screen image.
This is a screenshot for the ios showCupertinoAlertDialog method.
CupertinoActionSheet as the same as this.

This is my flutter doctor -v
[✓] Flutter (Channel stable, v1.17.4, on Mac OS X 10.15.5 19F101, locale en-CN)
• Flutter version 1.17.4 at /Volumes/Work/Tools/5.Flutter/flutter-stable
• Framework revision 1ad9baa8b9 (5 days ago), 2020-06-17 14:41:16 -0700
• Engine revision ee76268252
• Dart version 2.8.4

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
• Android SDK at /Users/alex/Library/Android/sdk
• Platform android-29, build-tools 29.0.3
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 11.5, Build version 11E608c
• CocoaPods version 1.9.3

[✓] Android Studio (version 4.0)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 46.0.2
• Dart plugin version 193.7361
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] Connected device (1 available)
• iPhone SE (2nd generation) • E7FBB639-E762-4501-BB3E-7F7E2233F79C • ios • com.apple.CoreSimulator.SimRuntime.iOS-13-5 (simulator)

• No issues found!

disable Padding on outer layer

If a padding is supplied through itemPadding, this seems to be applied around all icons respectively.
Is there a way to pass a padding just between the icons and not the borders?

example:
now: [ x x x x x ]
whish: [x x x x x]

Different empty widget when using itemBuilder

Currently while using itemBuilder , there is no way to use different default empty widget.

I wish to have itemBuilder as:

          itemBuilder: (BuildContext context, int index) {
              return Icon(
                Icons.star,
                color: Color(0xFFBAC3FE),
              );
            },

But when stars are empty (they are not selected, or they are in default empty states) they be:

          itemBuilder: (BuildContext context, int index) {
              return Icon(
                Icons.star_border,
                color: Color(0xFFBAC3FE),
              );
            },

取消点击的评分时有bug

作者你好，我在使用该评分插件时，需要点击前一个评分组件，才能取消当前组件的评分，希望你能看一下

CustomWidget instead of Icon - Tooltip on custom widget

This is not an issue, as there is a very valid workaround for it.
I just post this here for others like me searching or the to inspire the author.

In my use case I want to have a tooltip on the rating bar. To be precise on the custom widget I supply.
As my custom widget is not an Icon, I can not use the itembuilder property, but must use the ratingWidget property.
So to make it clear (with my understanding), I can not specify a custom Widget for each place and state (empty, half, full)

customized Example of the README

    // the widget I'd like to use for a checked item
    final Container ratingWidgetFull = Container(
      width: 20,
      height: 10,
      decoration: BoxDecoration(
        color: Theme.of(context).accentColor,
        borderRadius: const BorderRadius.all(Radius.circular(10)),
      ),
    );

    // the widget I'd like to use for an unchecked item
    final Container ratingWidgetEmpty = Container(
      width: 20,
      height: 10,
      decoration: BoxDecoration(
        border: Border.all(color: Theme.of(context).accentColor, width: 2.0),
        borderRadius: const BorderRadius.all(Radius.circular(10)),
      ),
    );

    return RatingBar.builder(
      initialRating: 3,
      itemCount: 5,
      itemBuilder: (BuildContext context, int index) {
        switch (index) {
          case 0:
            return Tooltip(message: 'worst', child: ratingWidgetFull);
          case 1:
            return Tooltip(message: 'bad', child: ratingWidgetFull);
          case 2:
            return Tooltip(message: 'ok', child: ratingWidgetFull);
          case 3:
            return Tooltip(message: 'good', child: ratingWidgetFull);
          case 4:
            return Tooltip(message: 'best', child: ratingWidgetFull);
        }
        return Container();
      },
      onRatingUpdate: (rating) {
        print(rating);
      },
    );

Now while my solution does not solve the issue of customized widgets, it indeed enables you to use a tooltip.

tooltip solution

class _RatingBar extends HookWidget {
  const _RatingBar({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final List<String> tooltips = <String>[
      'rating',
      'worst',
      'bad',
      'ok',
      'good',
      'best'
    ];
    final ValueNotifier<String> tooltipVN = useState('rating');

    // the widget I'd like to use for a checked item
    final Container ratingWidgetFull = Container(
      width: 20,
      height: 10,
      decoration: BoxDecoration(
        color: Theme.of(context).accentColor,
        borderRadius: const BorderRadius.all(Radius.circular(10)),
      ),
    );

    // the widget I'd like to use for an unchecked item
    final Container ratingWidgetEmpty = Container(
      width: 20,
      height: 10,
      decoration: BoxDecoration(
        border: Border.all(color: Theme.of(context).accentColor, width: 2.0),
        borderRadius: const BorderRadius.all(Radius.circular(10)),
      ),
    );

    return Tooltip(
        message: tooltipVN.value,
        child: RatingBar(
          itemSize: 20,
          wrapAlignment: WrapAlignment.center,
          ratingWidget: RatingWidget(
            full: ratingWidgetFull,
            half: null,
            empty: ratingWidgetEmpty,
          ),
          onRatingUpdate: (double rating) {
            tooltipVN.value = tooltips[rating.toInt()];
          },
        ));
  }
}

@sarbagyastha maybe I am just overthinking things and it is possible to use customized widgets in the described way, then please be so kind to give me a pointer in the right direction.

Request to make read-only

I've switched between 4 different star ratings components in my Flutter project, and finally this one's my favorite. The thing I'm missing is when I display the submitted ratings, I needed the stars to not be editable there. Wondering if there was a way to disable interactions and make it readOnly.. Thanks.

Rating according percentage

Hi,

So basically I'm getting a number from 0 to 100 via xml (rating), is it possible to display a star rating from 1 to 5 according this? Can you advise please?

Unrated Color not working with new update

The old versions worked fine with before the item builder. I am returning an amber star as an Icon and setting the unrated color as amber.withalpha(50) however they are still returning the same shade of amber.

RatingBar(
initialRating: 2.75,
itemCount: 5,
itemSize: 12.0,
itemBuilder: (context, _) => Icon(Icons.star, color: Colors.amber),
onRatingUpdate: (rating) {
print(rating);
},
unratedColor: Colors.amber.withAlpha(50),
),

How can i show only rate value?

I want User can't rate, user only see rate value. How can i do this?

Better error message when itemBuilder and ratingWidget not set.

If neither itemBuilder or ratingWidget are set, then we get a confusing error:

itemBuilder and ratingWidget can't be initialized at the same time.Either remove ratingWidget or itembuilder.

It should say that one has to be set.

flutter_rating_bar/lib/flutter_rating_bar.dart

Line 453 in d76a41e

(itemBuilder == null && ratingWidget != null) ||

the 'unratedColor' field does not useful

the 'unratedColor' field does not userful

Support different wrap alignments

The wrap alignment is hardcoded to start.

When the rating count is high the ratings flow over multiple lines but I need the ability to change the wrap alignment so I can center the ratings

How to pass user rating to other widgets/functions?

Dear flutter_rating_bar developers and users,

I would like to pass the user rating data from one widget to another or to a function.
How can I do that?

Thanks in advance.

King Regards,
Erik

Feature request: allow different Icon for background for RatingBarIndicator & transparent unrated Color

Pretty common scenario I would say:
I want to have the Icons.star_border as my background (say in white) and then fill my star with Icons.star in white also. This is currently not doable, mainly because we cannot separate background and filling Widgets.
Another problem is that the unratedColor is a filter, which makes a transparent color impossible.
Would a fix be possible?

Here is my edited version, the merge would need to mix in the unratedColor to only take one of unratedColor or backgroundIcon.

class RatingBarIndicator extends StatefulWidget {
  /// Defines the rating value for indicator.
  ///
  /// Default = 0.0
  final double rating;

  /// {@macro flutterRatingBar.itemCount}
  final int itemCount;

  /// {@macro flutterRatingBar.itemSize}
  final double itemSize;

  /// {@macro flutterRatingBar.itemPadding}
  final EdgeInsets itemPadding;

  /// Controls the scrolling behaviour of rating bar.
  ///
  /// Default is [NeverScrollableScrollPhysics].
  final ScrollPhysics physics;

  /// {@macro flutterRatingBar.textDirection}
  final TextDirection textDirection;

  /// {@macro flutterRatingBar.itemBuilder}
  final IndexedWidgetBuilder itemBuilder;

  /// {@macro flutterRatingBar.direction}
  final Axis direction;

  /// {@macro flutterRatingBar.unratedColor}
  final Color unratedColor;

  /// {@macro flutterRatingBar.unratedColor}
  final Widget backgroundIcon;

  RatingBarIndicator({
    @required this.itemBuilder,
    this.rating = 0.0,
    this.itemCount = 5,
    this.itemSize = 40.0,
    this.itemPadding = const EdgeInsets.all(0.0),
    this.physics = const NeverScrollableScrollPhysics(),
    this.textDirection,
    this.direction = Axis.horizontal,
    this.unratedColor,
    this.backgroundIcon,
  });

  @override
  _RatingBarIndicatorState createState() => _RatingBarIndicatorState();
}

class _RatingBarIndicatorState extends State<RatingBarIndicator> {
  double _ratingFraction = 0.0;
  int _ratingNumber = 0;
  bool _isRTL = false;

  @override
  void initState() {
    super.initState();
    _ratingNumber = widget.rating.truncate() + 1;
    _ratingFraction = widget.rating - _ratingNumber + 1;
  }

  @override
  Widget build(BuildContext context) {
    _isRTL = (widget.textDirection ?? Directionality.of(context)) ==
        TextDirection.rtl;
    _ratingNumber = widget.rating.truncate() + 1;
    _ratingFraction = widget.rating - _ratingNumber + 1;
    return SingleChildScrollView(
      scrollDirection: widget.direction,
      physics: widget.physics,
      child: widget.direction == Axis.horizontal
          ? Row(
        mainAxisSize: MainAxisSize.min,
        textDirection: _isRTL ? TextDirection.rtl : TextDirection.ltr,
        children: _children(),
      )
          : Column(
        mainAxisSize: MainAxisSize.min,
        textDirection: _isRTL ? TextDirection.rtl : TextDirection.ltr,
        children: _children(),
      ),
    );
  }

  List<Widget> _children() {
    return List.generate(
      widget.itemCount,
          (index) {
        if (widget.textDirection != null) {
          if (widget.textDirection == TextDirection.rtl &&
              Directionality.of(context) != TextDirection.rtl) {
            return Transform(
              transform: Matrix4.identity()..scale(-1.0, 1.0, 1.0),
              alignment: Alignment.center,
              transformHitTests: false,
              child: _buildItems(index),
            );
          }
        }
        return _buildItems(index);
      },
    );
  }

  Widget _buildItems(int index) => Padding(
    padding: widget.itemPadding,
    child: SizedBox(
      width: widget.itemSize,
      height: widget.itemSize,
      child: Stack(
        fit: StackFit.expand,
        children: [
          FittedBox(
            fit: BoxFit.contain,
            child: widget.backgroundIcon,
          ),
          if (index + 1 == _ratingNumber)
            _isRTL
                ? FittedBox(
              fit: BoxFit.contain,
              child: ClipRect(
                clipper: _IndicatorClipper(
                  ratingFraction: _ratingFraction,
                  rtlMode: _isRTL,
                ),
                child: widget.itemBuilder(context, index),
              ),
            )
                : FittedBox(
              fit: BoxFit.contain,
              child: ClipRect(
                clipper: _IndicatorClipper(
                  ratingFraction: _ratingFraction,
                ),
                child: widget.itemBuilder(context, index),
              ),
            ),
        ],
      ),
    ),
  );
}

Rating shows as rating - 0.5 if AllowHalfRating is false

FlutterRatingBar(
    initialRating: 3,
    allowHalfRating: false,
    onRatingUpdate: (rating) {
        print(rating);
    },
)

Scroll Conflict

When use horizontal RatingBar in a vertical ListView, touching the rating bar to scroll up and down, and the ListView can't move.

[V3.2.0] itembuilder error

As I see in 3.2.0, you removed the itembuilder and the example code on pub.dev doesn't work.