sarbagyastha / flutter_rating_bar Goto Github PK

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/

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?

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

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

as response to this:
#29

would it merge?

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

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

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

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.

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?

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

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

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

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

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

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

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

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!

the 'unratedColor' field does not userful

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

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

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.

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!!

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),
),

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.

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

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.

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) "

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
...
════════════════════════════════════════════════════════════════════════════════════════════════════

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.

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

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)

    // 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.

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.

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

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

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.

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),
              ),
            ),
        ],
      ),
    ),
  );
}

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.

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

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

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.

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

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); }, ),

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.

Using itemPadding produces unwanted effects.

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?

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),
              );
            },

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 ?

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]

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.

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

Cheers