Search code examples
flutterautolayoutflutter-layoutflutter-image

Autoscale Images from two Columns in a Row?

What I want to create is a Row for a ListView like in the pic below. That Row contains two Columns. Each of them has an image.

enter image description here

I already created the first Column. The picture and code is shown below.

enter image description here

My code:

class ProductsRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          '30%',
          style: TextStyle(
            fontWeight: FontWeight.w700,
            fontSize: 16,
          ),
        ),
        Icon(
          Icons.favorite,
          color: Colors.red,
        ),
      ],
    ),
    Image.asset(
      'images/schuhe4.png',
      fit: BoxFit.scaleDown,
    ),
    Text(
      'Nike Air Max 2',
      style: TextStyle(
        fontSize: 20.0,
        fontWeight: FontWeight.bold,
        color: Color(0xFF5F6288),
      ),
    ),
    Text(
      '240.0 €',
      style: TextStyle(
        fontSize: 30.0,
        fontWeight: FontWeight.w900,
        color: Color(0xFF5F6288),
      ),
    ),
  ],
);
}
}

My Problem is that when I wrap the created Column in a Row and duplicate the Column that it looks like that:

enter image description here

How can I make the pictures in the Columns to autoscale, is it possible in Flutter?

Solution

  • Use Expanded widget to solve this:

    class ProductsRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
   children:[
     Expanded( // column 1),
     Expanded( // column 2)
   ]
 );
 }
}