What is the best way to resize images to fit a certain area?

Question

I am looking for a way to put random-sized network images into a fixed size area. The issue is the pictures can be random sizes. Is there a way to get images resized to fit a certain area? Any suggestions? I thought about expanded or aspect ratio but I don't really know how to take this approach.

This is my code so far:

child: Expanded(
      child: Container(
        padding: EdgeInsets.all(10),
        decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(7.0)),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              child: Image.network('https://picsum.photos/250?image=9'),
            )
          ],
        ),
      ),
    ),

Does this answer your question? [How can I read (from disk) and resize an image, in Flutter/Dart](https://stackoverflow.com/questions/49701654/how-can-i-read-from-disk-and-resize-an-image-in-flutter-dart) — Karl Knechtel, Dec 16 '21 at 03:57

score 3 · Answer 1 · answered Dec 16 '21 at 00:52

Image(
 fit: BoxFit.cover, //or BoxFit.fill
 image: NetworkImage(
  'https://picsum.photos/250?image=9',
  ),
),

With BoxFit you can fit your image to any size you want. https://api.flutter.dev/flutter/widgets/FittedBox-class.html

If you want to set the borderRadius of a photo, you can use ClipRRect.

score 0 · Answer 2 · answered Dec 16 '21 at 03:55

To make an Image fill its parent, simply wrap it into a FittedBox:

FittedBox(
  child: Image.asset('foo.png'),
  fit: BoxFit.fill,
)

FittedBox restricts its child widgets from growing its size beyond a certain limit. It re-scales them according to the size available. For instance, if the text is displayed inside a container, and the text is to be entered by the user. If the user enters a large string of text, then the container would grow beyond its allocated size. But, if we wrap it with FittedBox, then it would fit the text according to the size available. For large string, it would shrink its size, hence would fit in the container.

Sytnax

FittedBox({
   Key key,
   BoxFit fit: BoxFit.contain,
   AlignmentGeometry alignment: Alignment.center,
   Widget child
    }
)

What is the best way to resize images to fit a certain area?

2 Answers2