Image is a widget that is responsible for displaying images in the Flutter app. There are several ways to load images onto the Flutter app. There are lots of parameters that we can alter to get the desired image in the desired format. For example, we can load an image with a given width and/or height. We can also change the alignment of the image in Flutter.

Syntax

The basic syntax to load an image in the app is as follows:

Image(image: ImageProvider,)

• image: We need to provide an object of ImageProvider type to the image field in the Image widget.

Different methods to load image

Load from application assets

We can load an image from the application assets to display the image. Assets are files that are packed within the application like fonts, images, etc.

Syntax

Image(
  image: AssetImage("location/of/image"),
)

Tutorial: Import Image assets to Flutter

Load from Network

If we have an online database or storage bucket or online image, we can get the image using the Image.network or NetworkImage in the Flutter app.

Syntax

Image.network

Image.network(image url)

NetworkImage

Image(
  image: NetworkImage("url/of/image"),
)

Tutorial: Image.network and NetworkImage in Flutter

Picking image from Gallery

We have come across lots of applications where we pick images directly from device storage.

Check out the tutorial here: Image Picker Tutorial | Pick a single image from Gallery