Changing Aspect Ratio of Image in Flutter

Question

I am using flutter and I am trying to change the aspect ratio of an image from 4:3 to 16:9. I have tried using the AspectRatio Widget and also using FittedBox but the image still remains 4:3

I have tried using AspectRatio, changing the fit prop on the Image to cover, fit, and contain

Card(elevation: 3.0, child: Column(
children: <Widget>[Container(child:
AspectRatio(aspectRatio: 16.0 / 9.0, child: FittedBox(fit: 
BoxFit.contain,
child: Image(image: AssetImage('images/maggie.jpg')),),)
                                   )],

or a flutter 16 : 9 cropper that will crop the image to the aspect ratio. — Chris Matthews, Jul 21 '19 at 04:09

score 41 · Accepted Answer · answered Jul 21 '19 at 04:31

41

You need to use BoxFit.fill to see the effect, BoxFit.cover shows same effect with image cropped. And you also don't need FittedBox.

Card(
  elevation: 3.0,
  child: Column(
    children: <Widget>[
      Container(
        child: AspectRatio(
          aspectRatio: 16 / 9,
          child: Image(
            image: AssetImage('images/maggie.jpg'),
            fit: BoxFit.fill, // use this
          ),
        ),
      )
    ],
  ),
)

answered Jul 21 '19 at 04:31

CopsOnRoad

237,138
77
654
440

9

Not sure who would ever use `fill` since the image gets stretched. `cover` does the trick. – SacWebDeveloper Jan 30 '20 at 18:33

Changing Aspect Ratio of Image in Flutter

1 Answers1

Linked