Image Widget – Everything You Need To Know

Flutter Image Widget Explained (Embedded Image, Network Image, Image BoxFit)!

Flutter has lots of amazing features that give you the ability to build beautiful apps. Here’s a powerful and Important widget in Flutter which is almost required in every mobile application. The “Image Widget“.

Displaying images in Flutter is a bit more complex than Text or Icons. It involves a few things:

1. Getting the image source – This could be an image embedded in the app itself or fetched live from the Internet. If the image will never change through the life of your apps like a logo or decorations, it should be an embedded image.
2. Sizing it – Scaling it up or down to the right size and shape.

Different ways to add Image to your Flutter App

1. Embedded images

Embedded images are much faster but will increase your app’s install size. To embed the image, add the image file in your project folder, probably in a subfolder called images just to keep things straight. Something like assets/images will
do nicely.

Then edit pubspec.yaml. Add this to it:

flutter:
  assets:
   - assets/images/photo1.png
   - assets/images/photo2.jpg

Save the file and run “flutter pub get” from the command line to have your project process the file.

QUICK TIP: The pubspec.yaml file holds all kinds of great information about your project. It holds project metadata like the name, description, repository location, and version number. It lists library dependencies and fonts. It is the go-to location for other developers new to your project. For any of you JavaScript developers, it is the package.json file of your Dart project.

Then you’ll put the image in your custom widget by calling the asset() constructor like this:

Image.asset('assets/images/photo1.jpg',),

2. Network Images

Network images are much more like what web developers might be accustomed to. It is simply fetching an image over the Internet via HTTP. You’ll use the network constructor and pass in a URL as a string.

Image.network('https://example-image.com/pics.png'),

As you’d expect, these are slower than embedded images because there’s a delay while the request is being sent to a server over the Internet and the image is being downloaded by your device. The advantage is that these images are live; any image can be loaded dynamically by simply changing the image URL.

How To Size an Image In Flutter

Images are nearly always put in a container. Not that this is a requirement, it’s just that I can’t imagine a real-world use case where it won’t be inside another widget. The container has a say in the size that an image is drawn. It would be an amazing coincidence if the Image’s natural size fit its container’s size perfectly. Instead, Flutter’s layout engine will shrink the image to fit its container, but not grow it. This fit is called BoxFit.scaleDown, and it makes sense for the
default behavior. But what other options are available and how do we decide which to use? All You need do is use the BoxFit option in FLutter.

Different BoxFit Options

• BoxFit.fill: Stretch it so that both the width and the height fit exactly. Distort the image
• Boxfit.fitHeight: Make the height fit exactly. Clip the width or add extra space as needed
• Boxfit.fitWidth:Make the width fit. Clip the height or add extra space as needed
• Boxfit.contain: Shrink until both the height and the width fit. There will be extra space on the top/bottom or sides
• Boxfit.cover:Shrink or grow until the space is filled. The top/bottom or sides will be clipped

So those are your options, but how do you choose? The image below may help you decide which fit to use in different situations.

And finally, How do you apply the Flutter Image BoxFit property? Here’s how you can achieve that;

Image.asset('assets/images/woman.jpg',
fit: BoxFit.contain,),

Yes, It’s that simple to add an image to your Flutter App. Are you having issues adding Image to your app as a beginner or intermediate? Use the “ASK QUESTION” button and tell the Flutter community how to help you.