How to display network images or images from url in Flutter?
Today, we cannot imagine an app or a website without media contents like images or a video. Displaying images has become a more basic or fundamental feature of an app or a website like never before.
In this tutorial, we will discuss both how to add an image from network url as the child or background of a container as well as various fit arguments that can be used.
Images showing the implementation of this tutorial 1) Simple implementation with width argument. 2) Implementation of BoxFit.cover as value of fit argument. 3) Implementation of network image as background of a container
Introduction to Image widget
In Flutter we use the Image widget to display images. It supports image formats like PEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP. In flutter, the network image is displayed as the child of a container using the Image.network() constructor. Image class has constructors:
- Image.asset - To display image from assets bundle
- Image.file - To display image from a file
- Image.memory - To display image from Uint8List
- Image.network - To display image from a URL
In this tutorial, we will be learning how to use Image.network with code snippets showing flutter network image examples.
This is a simple code snippet showing the implementation of Image.network as an example. Here we are using 2 basic arguments that will be handy while using Image.network. The url and width of image are used in the example as arguments. The width and height arguments can be used to control the size of the image displayed. On execution the flutter will load the image from web or url given and display it inside the container.
Fit Argument for Image
Instead of giving the width, you can fit the network image inside a container with the fit argument. Here we use Boxfit.contain which makes the image contained inside the Container as shown in the image. Values that can be given to the fit argument are:
- BoxFit.contain - As large as possible but contained within the Container
- BoxFit.cover - As small as possible but covering the entire Container
- BoxFit.fill - Fill the entire Container but may distort the image aspect ratio
- BoxFit.fitHeight - The height of the image will be equal to container. It will not mess with image aspect ratio
- BoxFit.fitWidth - The height of the image will be equal to container.
- BoxFit.none - Image is not resized at all
- BoxFit.scaleDown - Scales down the image to fit inside the Container
Image as the background of a Container
The code snippet above shows, how to display a network image as the background of a Container. For this, we use the NetworkImage() widget. Here NetworkImage() is given as the value for the image property of the DecorationImage() of a container. Fit argument can also be used for DecorationImage() to adjust the size of the network image shown.
Preload or Precache Images in Flutter for Fast Rendering
Step by step guide on the right way to preload or pre-cache images in Flutter for extreme fast rendering
How to Cache Images in Flutter?
Step by step guide on how to cache network images in Flutter
Polygon clipper in Flutter
A guide on how to clip images in various polygon shapes using polygon_clipper in Flutter