CODEWITHSUNDEEP
flutterdart
Chris Matthews
Chris Matthews

Reputation: 496

Changing Aspect Ratio of Image in Flutter

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')),),)
                                   )],

Upvotes: 18

Views: 47806

Answers (1)

CopsOnRoad
CopsOnRoad

Reputation: 267384

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
          ),
        ),
      )
    ],
  ),
)

Upvotes: 42

Related Questions