Question 244701 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Small image not fitting inside container despite adding fit property

I am trying to fit in a small pic inside a relatively larger container. I have used contain and cover properties yet they arent’ affecting the results while i dont want to use fill property as it will affect quality of pic. I guess there is something minor am missing here if anyone can guide.

enter image description here

my code:

Positioned(
                    top: 200,
                    left: 200,
                    child: Container(
                      width: 400,
                      height: 300,
                      color: Colors.pink,
                      child: Image.asset('assets/images/full/3.jpeg',
                      fit: BoxFit.contain),
                )),
Tags:

2

Answers


  1. 0

    fill → const BoxFit Fill the target box by distorting the source’s
    aspect ratio.

    enter image description here

    contain → const BoxFit As large as possible while still containing the
    source entirely within the target box.

    enter image description here

    cover → const BoxFit As small as possible while still covering the entire target box.

    To actually clip the content, use clipBehavior: Clip.hardEdge
    alongside this in a FittedBox.

    enter image description here

    fitWidth → const BoxFit Make sure the full width of the source is shown, regardless of whether this means the source overflows the
    target box vertically.

    To actually clip the content, use clipBehavior: Clip.hardEdge
    alongside this in a FittedBox.

    enter image description here

    fitHeight → const BoxFit Make sure the full height of the source is shown, regardless of whether this means the source overflows the
    target box horizontally.

    To actually clip the content, use clipBehavior: Clip.hardEdge
    alongside this in a FittedBox.

    enter image description here

    none → const BoxFit Align the source within the target box (by default, centering) and discard any portions of the source that lie
    outside the box.

    The source image is not resized.

    To actually clip the content, use clipBehavior: Clip.hardEdge
    alongside this in a FittedBox.

    enter image description here

    scaleDown → const BoxFit Align the source within the target box (by default, centering) and, if necessary, scale the source down to
    ensure that the source fits within the box.

    This is the same as contain if that would shrink the image, otherwise
    it is the same as none.

    enter image description here

    Login or Signup to reply.
  2. 0

    Try to use BoxFit.cover instead.
    With it the image fills the given dimension, but keeping its aspect ratio.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search