0

I have a widget that has a Column with 2 expanded children, flexes are 2 and 1. second children is another column with 3 Row children each with two text. The mainAxisAlignment: MainAxisAlignment.spaceBetween in each Row should push the two children texts to the margins but they are staying centered with no space in the middle. Can you see why there is no space between them?

This is the Widget:


class DisplayCell extends StatelessWidget {
  final AutoSizeGroup autoSizeGroup;
  final String imageUrl;
  final String name;
  final String price;
  final String vendor;
  final Function onTap;

  const DisplayCell(
      {Key key,
      this.autoSizeGroup,
      this.imageUrl,
      this.name,
      this.price,
      this.vendor,
      this.onTap})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.transparent,
      padding: EdgeInsets.all(5),
      child: Container(
        padding: EdgeInsets.all(10),
        decoration: BoxDecoration(
          color: Colors.black.withAlpha(120),
          borderRadius: BorderRadius.circular(5),
          border: Border.all(color: Colors.redAccent, width: 1),
        ),
        child: Column(
//          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Expanded(
              flex: 2,
              child: Image(
                image: NetworkImage(imageUrl),
              ),
            ),
            Expanded(
              flex: 1,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      AutoSizeText(
                        AppLocalizations.instance.text('Name:'),
                        style: TextStyle(color: Colors.white, fontSize: 12),
                        minFontSize: 8,
                        maxLines: 1,
                        group: autoSizeGroup,
                      ),
//                      SizedBox(
//                        width: 10,
//                      ),
                      AutoSizeText(
                        name,
                        style: TextStyle(color: Colors.white, fontSize: 12),
                        minFontSize: 8,
                        maxLines: 1,
                        group: autoSizeGroup,
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      AutoSizeText(
                        AppLocalizations.instance.text('Price:'),
                        style: TextStyle(color: Colors.white, fontSize: 12),
                        minFontSize: 8,
                        maxLines: 1,
                        group: autoSizeGroup,
                      ),
//                      SizedBox(
//                        width: 10,
//                      ),
                      AutoSizeText(
                        price,
                        style: TextStyle(color: Colors.white, fontSize: 12),
                        minFontSize: 8,
                        maxLines: 1,
                        group: autoSizeGroup,
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      AutoSizeText(
                        AppLocalizations.instance.text('Vendor:'),
                        style: TextStyle(color: Colors.white, fontSize: 12),
                        minFontSize: 8,
                        maxLines: 1,
                        group: autoSizeGroup,
                      ),
//                      SizedBox(
//                        width: 10,
//                      ),
                      AutoSizeText(
                        vendor,
                        style: TextStyle(color: Colors.white, fontSize: 12),
                        minFontSize: 8,
                        maxLines: 1,
                        group: autoSizeGroup,
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
Vincenzo
  • 5,304
  • 5
  • 38
  • 96
  • Please add width to your main container with double.maxFinite. – Gaurav Kumar Jun 22 '20 at 11:34
  • There was similar question raised time ago. Could you please check [this link here](https://stackoverflow.com/questions/53141752/set-the-space-between-elements-in-row-flutter) – vinipx Jun 22 '20 at 12:19
  • @Gaurav Hai and thanks for the hint. When I use it dough I don't see any text or images in the widget anymore. – Vincenzo Jun 22 '20 at 15:14
  • 1
    @vinipx Hi and thanks for the link. I'm gonna try Wrap instead of Row to see if anything changes dough it uses the same alignments. Let you know eventual changes. – Vincenzo Jun 22 '20 at 15:17

0 Answers0