Ad
How Do I Fit My Image Into The Container?
I would like to get rid of the whitespace. The result currently is as below:
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
Related Questions
- → How do you create a 12 or 24 mnemonics code for multiple cryptocurrencies (ETH, BTC and so on..)
- → Flutter: input text field don't work properly in a simple example..... where am I wrong?
- → Can I customize the code formatting of Dart code in Atom?
- → Is it possible to develop iOS apps with Flutter on a Linux virtual machine?
- → Display SnackBar in Flutter
- → JSON ObjectMapper in Flutter
- → Material flutter app source code
- → TabBarSelection No such method error
- → How do I set the animation color of a LinearProgressIndicator?
- → Add different routes/screens to Flutter app
- → Is there a way to get the size of an existing widget?
- → How to share a file using flutter
- → Is there an easy way to find particular text built from RichText in a Flutter test?
Ad