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

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

CodePudding user response：

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.

CodePudding user response：

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
    }
)