Scale elements in flutter Row to have the same aspect ratio

Question

I want to display a list of elements in a row. The problem is that it is not scaled correctly. If I have six elements, it looks nice, but if the list contains only four elements, it doesn't look good. Can someone tell me what I'm doing wrong?

Code:

    Container(
                height: 100,
                margin: marginMediumHorizontal,
                decoration: decorationLight,
                alignment: Alignment.center,
                child: Row(
                  children: <Widget>[
                    ...model.gridListItems.map(
                      (element) => Expanded(
                        child: Container(
                          margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                          decoration: decorationDark,
                          padding: EdgeInsets.all(5),
                          child: Image(
                            color: lightGrayLimeGreen,
                            image: AssetImage(element['icon']),
                            fit: BoxFit.contain,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),

Thanks a lot for your help.

Solution

Use Flexible widget instead of Expanded and give each widget as flex : 1 It'll do the trick itself.

Container(
            height: 100,
            margin: marginMediumHorizontal,
            decoration: decorationLight,
            alignment: Alignment.center,
            child: Row(
              children: <Widget>[
                ...model.gridListItems.map(
                  (element) => Flexible(
                    flex : 1,
                    child: Container(
                      margin: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                      decoration: decorationDark,
                      padding: EdgeInsets.all(5),
                      child: Image(
                        color: lightGrayLimeGreen,
                        image: AssetImage(element['icon']),
                        fit: BoxFit.contain,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),

Comments

[Guru Prasad mohapatra]

You're most Welcome