selectedColor is not working about flutter_pannable_rating_bar HOT 11 CLOSED

Thank you for your suggestion, though for now I would like to keep the widget itself like this for flexibility in state management.
However, based on your suggestion, you can write some kind of wrapper around my widget to achieve what you want, so something like this:

class RatingBarWrapper extends StatefulWidget {
  const RatingBarWrapper({
    super.key,
    this.initialRating = 0,
    this.onChanged,
  });

  final ValueChanged<double>? onChanged;

  final double initialRating;

  @override
  State<RatingBarWrapper> createState() => _RatingBarWrapperState();
}

class _RatingBarWrapperState extends State<RatingBarWrapper> {
  late double _rating; // the current `rating` value of the widget

  @override
  void initState() {
    super.initState();
    _rating = widget.initialRating;
  }

  @override
  Widget build(BuildContext context) {
    return PannableRatingBar(
      rate: _rating,
      // pass the value here
      onChanged: (value) {
        setState(() {
          _rating = value; // update it via `setState`
        });
        widget.onChanged?.call(value); // call the onChanged in the constructor
      },
      // all of the below params will then be exposed to the widget's constructor as needed
      spacing: 20,
      items: List.generate(
        5,
        (index) => const RatingWidget(
          selectedColor: Colors.yellow,
          unSelectedColor: Colors.grey,
          child: Icon(
            Icons.star,
            size: 48,
          ),
        ),
      ),
    );
  }
}

Making this a StatelessWidget however, is not really possible without somewhere else to store the current state (current rating value).

from flutter_pannable_rating_bar.

I'm afraid that currently, I have yet to find a way to workaround this issue. To actually resolve this would require the Flutter team to support more feature for the ShaderMaskLayer, (additional BlendMode for example).

If there're some other way to resolve this, please let me know, as this is also the limitation of the package that I'm trying to address.

from flutter_pannable_rating_bar.

Hi, thank you for reporting the issue with the selectedColor property.

I have tested the example provided in the project's example/ folder on both web and Android platforms, and I encountered no issues. Currently, I am running it with Flutter 3.7.11.

Below is the widget that I tested:

PannableRatingBar(
  rate: rating, // current rating
  onChanged: updateRating, // update `rating` with setState
  spacing: 20,
  items: List.generate(
    5,
    (index) => const RatingWidget(
      selectedColor: Colors.yellow,
      unSelectedColor: Colors.grey,
      child: Icon(
        Icons.star,
        size: 48,
      ),
    ),
  ),
),

Based on my analysis, it seems that the issue might be related to the opacity of the icon's color or the unSelectedColor you are using. The current implementation uses ShaderMaskLayer to stack the colors on top of each other, similar to how the ColorFiltered widget works.

Since the colors are blended using BlendMode.srcIn, the opacity of each layer is respected, which can affect the final color outcome. If any of the layers have opacity, it will impact the layer on top.

To resolve this, I suggest setting the color for all the components, including the Icon, unSelectedColor, and selectedColor, to a color with opacity = 1. This ensures that the opacity of the color is consistent throughout.

You can refer to the example or run it for more information on this matter.

If this does not address the issue, please provide me with more details about your Flutter version, the colors used for the icon, unSelectedColor, and selectedColor, or any other relevant information regarding the way you are using this widget so I may look into it.

from flutter_pannable_rating_bar.

Thanks for the prompt reply. I am still having the issue in a fresh project.

See https://youtu.be/xIfcSX7xgA0

[✓] Flutter (Channel stable, 3.10.5, on macOS 13.4.1
22F82 darwin-arm64, locale en-IN)
[✓] Android toolchain - develop for Android devices
(Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] VS Code (version 1.79.2)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!

from flutter_pannable_rating_bar.

I understand. Thank you for providing the video capturing the problem.

Upon reviewing the video, it appears that the rate parameter of the widget is not being updated and remains set to 0.

It's important to note that this widget is different from other rating bars in the sense that it is actually a StatelessWidget. This design choice was made to provide more fine-grained control over its value.

Since the widget itself doesn't hold any state, you would need to employ some form of state management mechanism, such as setState, to update its value.

In the provided example, you can observe that I used setState to update the rating variable, consequently modifying the value of the rate parameter.

I would suggest trying to update the rate parameter accordingly and see if that resolves the issue.

from flutter_pannable_rating_bar.

May I suggest updating the MyHomePage widget in your video to this:

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _rating = 0; // the current `rating` value of the widget

  @override
  Widget build(BuildContext context) {
    return PannableRatingBar(
      rate: _rating, // pass the value here
      onChanged: (value) {
        setState(() {
          _rating = value; // update it via `setState`
        });
      },
      spacing: 20,
      items: List.generate(
        5,
        (index) => const RatingWidget(
          selectedColor: Colors.yellow,
          unSelectedColor: Colors.grey,
          child: Icon(
            Icons.star,
            size: 48,
          ),
        ),
      ),
    );
  }
}

from flutter_pannable_rating_bar.

@SilentCatD I see. I thought it was the initialRate. Does it makes sense to simplify the api where we don't have to provide the rate parameter as we can get that from the onChanged anyway. Also, this enables the devs to use a StatelessWidget.

We could introduce a new param called initialRating to initialise to a specific value.

Thanks for the clarification.

from flutter_pannable_rating_bar.

Yeah, exactly what I was gonna do. Thanks for your time. Currently comparing this with flutter_rating_bar

from flutter_pannable_rating_bar.

Based on my analysis, it seems that the issue might be related to the opacity of the icon's color or the unSelectedColor you are using. The current implementation uses ShaderMaskLayer to stack the colors on top of each other, similar to how the ColorFiltered widget works.

Since the colors are blended using BlendMode.srcIn, the opacity of each layer is respected, which can affect the final color outcome. If any of the layers have opacity, it will impact the layer on top.

To resolve this, I suggest setting the color for all the components, including the Icon, unSelectedColor, and selectedColor, to a color with opacity = 1. This ensures that the opacity of the color is consistent throughout.

@hls-app Is there any workaround to have an unselectedColor with opacity? If not, is it possible to have this feature in the future?

from flutter_pannable_rating_bar.

hey @dejvizelo, I ended up using flutter_rating_bar as it was sufficient for my use case. Even thought that is a recommended package from the Flutter team, the last update to the plugin was well over a year ago. So consider that when you picking your solution.

For your usecase, as @SilentCatD mentioned, this package may not the the right fit. One alternative could be using the image with an opacity.

from flutter_pannable_rating_bar.

@hls-app I wanted to replace flutter_rating_bar with another package because I needed onHover functionality. I ended up using this package with hardcoded color values. Not an ideal solution but will work for now. If you're aware of any rating bar widgets that support hover functionality let me know.

from flutter_pannable_rating_bar.