Ad

How Do I Fit My Image Into The Container?

- 1 answer

I would like to get rid of the whitespace. The result currently is as below: enter image description here

The white image is taking extra space and doesn't fit into the container.

Below is my code:

Container(
                 height: 180,
                 width: 160,
                 child: ClipRRect(
                    borderRadius: BorderRadius.circular(20.0),
                    child: Image.network(book.pic == null ?
                'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Book-icon-bible.png/900px-Book-icon-bible.png'
                :book.pic),
                  ),
                ),
Ad

Answer

You can use fit: BoxFit.cover. Also you don't need to use ClipRRect in this case, you can just use the container's own property to make the edges smoothed out like the example bellow.

Container(
    height: 180,
    width: 160,
    decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20.0),
    ),
    child: Image.network(
    book.pic == null
        ? 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Book-icon-bible.png/900px-Book-icon-bible.png'
        : book.pic,
    fit: BoxFit.cover,
    ),
),
Ad
source: stackoverflow.com
Ad