Widgets: Image

The Image widget allows us to display an image within our user interface via a number of different means. This is done via the use of several different constructors, we can do this by using:

• Image() — Used to load an image from an ImageProvider. Here we simply provide an ImageProvider instance for the image parameter for the image we wish to display.
• Image.asset() — Used to load an ImageStream retrieved from an asset bundle. Here we simply provide a String value for the name parameter which points to the location of the asset.
• Image.network() — Used to display an ImageStream retrieved from the network. Here we simply provide a String value for the src parameter which points to the location of the image.
• Image.file() — Used to display an ImageStream retrieved from a file. For the image we want to display, we simply provide an instance of a File for the file parameter in the constructor.
• Image.memory() — Used to display an ImageStream retrieved from an Uint8List. For this ImageStream, we simply provide a Uint8List for the bytes parameter within the constructor.

When we want to display an image, we can simply do this like so:

new Image.network(url, fit: BoxFit.cover)
new Image.asset(stringToImageLocation, fit: BoxFit.cover) //etc

As well as the above properties, there are several others that we can provide to alter the appearance of our Image widget.

• alignment — How the widget should be aligned within its given layout bounds
• fit — Given the allocated layout space and size of the image, fit can be used to depict how the image should be inscribed here. This parameter takes a BoxFit enum value, more information can be found here
• gaplessPlayback — When the ImageProvider changes, this can be used to control whether or not the previous image remains whilst the new image is loading (set to true) or if nothing should be display during this process (set to false)
• height — Assign a height to be used for the widget
• width — Assign a width to be used for the widget

More information on available parameters can be found within the Image Widget documentation here: https://docs.flutter.io/flutter/widgets/Image-class.html

Enjoy the other snippets in this publication! Leave a comment below or tweet me if with any questions / suggestions!

Joe Birch (@hitherejoe) | Twitter