1

I am making a Rating List Criteria for My Flutter App. I have a list of criteria from a API call, and in the Flutter App I make a ListView.Builder inside of a showModalBottomSheet

ListView.builder(
  itemCount: itemListApi.length,
  shrinkWrap: true,
  itemBuilder: (BuildContext context, int index) {
     final cat = itemListApi[index];
     return RatingCriterias(catagory: cat);
  }
),

In my RatingCriterias() function I have The FF. :: (Here is the Image)

UI what It looks like

I want to give rating for each Criteria

// packadge I am using
import 'package:flutter_rating_native/flutter_rating_native.dart';

//....

Widget build(BuildContext context) {
    var data = widget.catagory;
    return Row(
      children: [
        Text(data.criteriaName),
        const SizedBox(height: 10,),
        /* This is not clickable: START */
        FlutterRating(
          rating: 1, size: 20,
          onRatingChanged: (value) {
            setState(() {
              rating = value;
            });
          }
        ),
      /* This is not clickable: END */
      ],
    );
  }

The Issue is that the rating is not clickable

Or what are other suggestions to make this work? Or Other lib to use?

Thank you in advance !

Anele
  • 162
  • 1
  • 3
  • 21
  • Are you sure it is not clicked? i mean if you put `print(value.toString();` within `onRagingChanged`, do you see the value printed? Maybe it is resets to 1 since you call `setState`. – Peter Koltai May 21 '23 at 10:34

1 Answers1

0

I coded this up. You can create a list of these widgets and access the individual rating out of the list. They change when a star is tapped. Styling them is up to you. Enjoy!

enter image description here

class Stars extends StatefulWidget {
  Stars({ super.key,this.rating = 0 });
  int rating;
  @override
  State<Stars> createState() => _StarsState();
}

class _StarsState extends State<Stars> {

  void callback(int ratingTap){
    setState(() {
      widget.rating = ratingTap;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: starBuilder(context, widget.rating, callback),
    );
  }
}

class Star extends StatefulWidget {
  const Star({ super.key,required this.selected,required this.number,required this.callback});
  final bool selected;
  final int number;
  final Function callback;
  @override
  State<Star> createState() => _StarState();
}

class _StarState extends State<Star> {
  @override
  Widget build(BuildContext context) {
    return InkWell(child:Container(
      child: Icon(Icons.star,color: widget.selected?Colors.yellow:Colors.grey,),
    ),onTap: ()=>widget.callback(widget.number),);
  }
}

Widget starBuilder(BuildContext context,int rating,Function callback){
  List<Widget> stars = [];
  for (int i =1;i<=5;i++){
    bool selected = false;
    if (i <= rating){
      selected = true;
    }
    stars.add(Star(selected: selected,number: i,callback: callback));    
  }
  return Row(children: stars,);
}
Tim
  • 92
  • 10