How to Add Rating Bar that shows up on button hover in Flutter/Dart?

Question

Hey guys I am new to flutter, especially to the UI component. I am trying to build a screen on which there is a star icon on the edge of the screen. And on hovering up on the star icon, a rating bar shows up, the user gives the rating by touching either of the stars. And when the touch is moved away from the icon/rating bar; the rating bar disappears.

Any pointers to build this functionality will be very huge help.

I tried this code as per the suggestions of salim.elkh:

GestureDetector(
        onLongPress: () {
            Container(
               width:MediaQuery.of(context).size.width,
               margin: const EdgeInsets.symmetric(
               horizontal: 20),
               child: RatingBarIndicator(
                       rating: 2.75,
                       itemBuilder: (context, index) =>
                        const Icon(
                                 Icons.star,
                                 color: Colors.amber,
                                  ),
                        itemCount: 5,
                        itemSize: 50.0,
                        direction: Axis.horizontal,
                           ),
                          );
                       },
                     child: const Icon(
                           Icons.star,
                           color: themeColor0,
                                ), // Show the icon when long press is false
                     )

but it is not working. When I long press on the icon, rating bar does not show up.

Thanks.

Answer 1

Hi and welcome to Flutter,

You can use a GestureDetector to capture long-press (onLongPress) and when it stops(onLongPressEnd). onLongPress you can show the Rating widget, and onLongPressEnd you can hide it. For more info: https://api.flutter.dev/flutter/widgets/GestureDetector-class.html

For the rating widget, you can use a popular package that handles this: https://pub.dev/packages/flutter_rating_bar

EDIT: You can use an overlay to show the rating bar on top of your widget. Here is a useful tutorial: https://www.youtube.com/watch?v=OOEyJ0ct0Sg&ab_channel=HeyFlutter%E2%80%A4com