How to insert flutter rating bar inside a ListTile

Question

I'm new on Flutter and I'm practicing trying to build UIs. I wanna achieve this:

I'm using flutter_rating_bar for rating stars but I can't understand how to add this widget inside a ListTile; I already have the user vote I just need to show it with stars.

return Container(
        child: ListView.builder(
            itemCount: 5,
            shrinkWrap: true,
            itemBuilder: (context, index) {
              return Card(
                child: ListTile(
                  leading: FlutterLogo(size: 72.0),
                  title: Text(title),
                  
                  subtitle: Text(text),
                  trailing: Icon(Icons.more_vert),
                  isThreeLine: true,
                ),
              );
            }));

This is the code I'm using but when I try to add for example:

RatingBarIndicator(
    rating: userRat,
    itemBuilder: (context, index) => Icon(
         Icons.star,
         color: Colors.amber,
    ),
    itemCount: 5,
    itemSize: 50.0,
    direction: Axis.vertical,
)

I receive the error:

Positional arguments must occur before named arguments. Try moving all of the positional arguments before the named arguments.dart(positional_after_named_argument)

I'm not also able to poistion the user image at bottom with user's name at right. Can anyone explain me why this error occurs and give me a code example to understand please?

Answer 1

try this, you have to replace the size value of your array in itemCount, and then customize this widget to suit you.

Container(
      child: ListView.builder(
        itemCount: 5,
        shrinkWrap: true,
        itemBuilder: (context, index) {
          return Container(
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
            margin: EdgeInsets.symmetric(vertical: 1),
            decoration: BoxDecoration(
              color: Colors.grey[300],
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Frame', style: TextStyle(color: Colors.grey[500])),
                Text('Title'),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: Row(
                    children: [
                      RatingBar.builder(
                        itemSize: 25,
                        initialRating: 3,
                        minRating: 1,
                        direction: Axis.horizontal,
                        allowHalfRating: true,
                        itemCount: 5,
                        itemPadding: EdgeInsets.symmetric(horizontal: 4.0),
                        itemBuilder: (context, _) => Icon(
                          Icons.star,
                          color: Colors.blue,
                        ),
                        onRatingUpdate: (rating) {
                          print(rating);
                        },
                      ),
                      SizedBox(width: 50),
                      Row(
                        children: [
                          Text('4.0', style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),),
                          Text('/ 5.0', style: TextStyle(color: Colors.grey[500], fontWeight: FontWeight.bold),)
                        ],
                      )
                    ],
                  ),
                ),
                Text('Text...'),
                Row(
                  children: [
                    Icon(Icons.person),
                    Text('Name')
                  ],
                )
              ],
            ),
          );
        },
      ),
    );