[![different width container](https://i.stack.imgur.com/ZdVHY.png)](https://i.stack.imgur.com/ZdVHY.png)

I want to implement a design like the one above, the problem is i don't know how to make the container size different depending on the number.

### Expectaion

[![enter image description here](https://i.stack.imgur.com/BHOj3.png)](https://i.stack.imgur.com/BHOj3.png)

### Source code

```
final userPlaylist = {
  'Kaguya Love Dramatic': 10,
  'Saenai Heroine': 8,
  'Jujutsu Kaisen Kaikai Kitan': 3,
  'Jujutsu Kaisen LOST IN PARADISE': 2,
  'Kaguya Sama DADDY DADDY DO': 2,
};

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      ListView.builder(
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),
                        itemCount: userPlaylist.length,
                        itemBuilder: (context, index) {
                          final song = userPlaylist.keys.elementAt(index);
                          final totalPlay = userPlaylist.values.elementAt(index);
                          final margin = margins[index];
                          return Padding(
                            padding: const EdgeInsets.only(top: 12),
                            child: Row(
                              children: [
                                Expanded(child: CircleAvatar()),
                                SizedBox(width: 10),
                                Expanded(
                                  flex: 4,
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.stretch,
                                    children: [
                                      Text(song),
                                      SizedBox(height: 10),
                                      Container(
                                        margin:EdgeInsets.only(right:margin),
                                        height: 20,
                                        decoration: BoxDecoration(
                                          color: Colors.green,
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                SizedBox(width: 10),
                                Expanded(child: Text(totalPlay.toString(),style: TextStyle(color:Colors.white),))
                              ],
                            ),
                          );
                        },
                      ),
                    ],
                  );
  }
}

```

> 
> and this size container applies if there are numbers that have the same value
> 
> 
>