title: Flutter : Different width container depend of value
body: <p><a href="https://i.stack.imgur.com/ZdVHY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZdVHY.png" alt="different width container" /></a></p>
  <p>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.</p>
  <h3>Expectaion</h3>
  <p><a href="https://i.stack.imgur.com/BHOj3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BHOj3.png" alt="enter image description here" /></a></p>
  <h3>Source code</h3>
  <pre><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),))
                                ],
                              ),
                            );
                          },
                        ),
                      ],
                    );
    }
  }
  
  </code></pre>
  <blockquote>
  <p>and this size container applies if there are numbers that have the same value</p>
  </blockquote>