Can't keep aspect ratio on items added to Row

[Mattias Månsson]

Been struggling with this issue for days now, so really grateful for any help. I have created a custom widget, basically just a square image with border. I then have a Row in the top of my app where I want to add 3 or sometimes 5 of my square widgets. To support both cases, I just want to set the height of the Row (using a Container around it) and then let the custom widgets shrink or grow to fit while still of course keep their aspect ratio. I have tried endless combinations of Container, AspectRatio, Expanded, FittedBox, but either they overflow, get stretched to fill the width or shrink to nothing.

Here is my latest attempt (but with only one item), the image grows to keep its aspect ratio as I want, but the border

  Widget _buildCompBar(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      height: 100,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,

        children: <Widget>[
          Expanded(
            child: AspectRatio(
              aspectRatio: 1.0,
              child:
                  Container(
                      decoration: new BoxDecoration(
                          border: Border.all(width: 2),
                          borderRadius:
                              new BorderRadius.all(Radius.circular(5.0)),
                          shape: BoxShape.rectangle,
                          image: new DecorationImage(
                            fit: BoxFit.cover,
                            image: AssetImage("assets/images/mons/unit_icon_0000_0_0.png"),
                          ))),
            ),
          ),
        ],
      ),
    );
  }

Enter code here...

[Mattias Månsson]

Sigh, I see now the code block cut off the end om my text and I can't find any way to edit it. Anyway, Ignore what I really meant was that with one item and this code, it gets stretched to fill the whole row and definitely loses its aspect ratio. What I really want is like in these two images. If 3 widgets, fill the height by growing and still keeping its shape and divide the empty space between them. Same with 5 or more, but if more than 5 it needs to shrink because of the width and then I also want them to keep their aspect ratio.

[Mattias Månsson]

Actually, it might be even better to show the real example. Here is the latest source and two screenshots of 3 respective 5 items. As you can see the 5 items looks good (but just because the width kinda matches the height times 5), while 3 are stretched. I can change the layout so that 3 looks fine (still square and with empty space in between them), but then the 5 overflows to the side. 

  Widget _buildCompBar(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      height: 100,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,

        children: List<Widget>.filled(
            widget._buildComp.length,
            Expanded(

              child:
                  Container(
                      decoration: new BoxDecoration(
                          border: Border.all(width: 2),
                          borderRadius:
                              new BorderRadius.all(Radius.circular(5.0)),
                          shape: BoxShape.rectangle,
                          image: new DecorationImage(
                            fit: BoxFit.cover,
                            image: AssetImage(
                                "assets/images/mons/unit_icon_0000_0_0.png"),
                          ))),

            )),
      ),
    );
  }

[Mattias Månsson]

Ah, and in the last example I removed the AspectRatio I had inside the Expanded, but it does exactly NOTHING. I'm pretty sure Expanded somehow overrides AspectRatio.

[Mattias Månsson]

And as another example, if I put them inside FittedBox with fit contain, the images disappear completely and just gets black from the border, I guess because they are just decoration. But I noticed that if I place the images as child instead, I get a thin white border between the image and the real border, so I would prefer it like this. 

  Widget _buildCompBar(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      height: 100,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: List<Widget>.filled(
          widget._buildComp.length,
          Expanded(

              child: FittedBox(
            fit: BoxFit.contain,

            child: Container(
                decoration: new BoxDecoration(
                    border: Border.all(width: 2),
                    borderRadius: new BorderRadius.all(Radius.circular(5.0)),
                    shape: BoxShape.rectangle,
                    image: new DecorationImage(
                      fit: BoxFit.cover,
                      image: AssetImage(
                          "assets/images/mons/unit_icon_0000_0_0.png"),
                    ))),
          )),
        ),

      ),
    );
  }

[Mattias Månsson]

Actually, if I put the image as a child of the compontent with fittedbox, it behaves as I want it. But as I said before it gets a white border I really don't like. So maybe if the border issue can be fixed instead, I can go on like this.

Widget _buildCompBar(BuildContext context) {
  return Container(
    padding: EdgeInsets.all(10),
    height: 100,
    child: Row(
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: List<Widget>.filled(
        widget._buildComp.length,
        Expanded(
            child: FittedBox(
              fit: BoxFit.contain,
              child: Container(
                  decoration: new BoxDecoration(
                      border: Border.all(width: 2),
                      borderRadius: new BorderRadius.all(Radius.circular(5.0)),
                      shape: BoxShape.rectangle,

                      ),
                child: Image.asset("assets/images/mons/unit_icon_0000_0_0.png"),
              ),
            )),
      ),
    ),
  );
}

[Quentin S]

For everyone who needs to do the same, just wathc the official video of the widget.

A center or an align does the job