Home > Software design >  How to scale image without corrupt the ratio
How to scale image without corrupt the ratio

Time:01-22

I would rescale the image, but I cannot find a way to do this.

Here is the code

return Column(
      // crossAxisAlignment: CrossAxisAlignment.start,
      // mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Expanded(
          flex: 1,
          child: GestureDetector(
            child: Container(
              padding: const EdgeInsets.all(0.0),
              margin: const EdgeInsets.all(8),
              decoration: BoxDecoration(
                image: DecorationImage(
                  fit: BoxFit.cover,
                  
                  alignment: FractionalOffset.center,
                  image: CachedNetworkImageProvider(slider[idx].imageURL!),
                ),
                borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(5),
                    topRight: Radius.circular(5),
                    bottomRight: Radius.circular(5),
                    bottomLeft: Radius.circular(5)),
              ),

current view

current view

target view

target view

CodePudding user response:

Image widgets have a scale property you can use to make the image bigger or smaller: https://api.flutter.dev/flutter/painting/ImageInfo/scale.html.

From there you can specify the desired aspect ratio or use alignment (like you have) along with setting height and width to manually set the image size.

More about adjusting image sizes https://www.woolha.com/tutorials/flutter-display-and-adjust-images-from-assets

  •  Tags:  
  • Related