0

I have a list with an Image and Text in a Row. Both are in an Expanded widget to get the same width.

  Widget item(String value, String imageLocation) => Row(children: [
    Expanded(
        child: Image.asset(
      'assets/images/$imageLocation.png',
    )),
    Expanded(
      child: Text(
        value,
        textAlign: TextAlign.center,
        style: const TextStyle(
          color: Colors.black54,
        ),
      ),
    ),
  ]);

That, everything is well drawn, but the images are too big. Initially, all images have not the same size. And when I want to reduce it on screen by putting them in a Container with a definite size, many images are well reduced, but not the smallest which appear always big. I also tried different fit properties, but without any success.

What I want is to reduce all images with the same ratio, so that they keep the same aspect as currently but smaller.

How can I do that? Thanks

Gwhyyy
  • 7,554
  • 3
  • 8
  • 35
Turvy
  • 882
  • 1
  • 8
  • 23

3 Answers3

0

There is an AspectRatio widget in Flutter, you can wrap your image widget with it.

BLKKKBVSIK
  • 3,128
  • 2
  • 13
  • 33
0

You can wrap your Image with the AspectRatio widget like this:

 AspectRatio(
   aspectRatio: 16/9,
    child: Image.asset(
  'assets/images/$imageLocation.png',
)),
Gwhyyy
  • 7,554
  • 3
  • 8
  • 35
  • Unfortunatly, no change. My problem is many image are linear and other more square. I think I should resize all pictures with an editor – Turvy Nov 20 '22 at 21:14
  • can you try without Expanded widget ? – Gwhyyy Nov 20 '22 at 21:18
  • Strangely, everything disappears, even Text, without error message in logcat – Turvy Nov 20 '22 at 21:26
  • I think it can't work because aspectRatio should be the same of the initial image, which is not easy. Thanks for your help. – Turvy Nov 20 '22 at 21:36
0

Finally, I just found a solution. Image.asset has a scale property. Change it to 2 or more did the job.

Turvy
  • 882
  • 1
  • 8
  • 23