Image displays an image from different sources and formats. From the docs, the supported image formats are JPEG, PNG, GIF, animated GIF, WebP, animated WebP, BMP, and WBMP:
Image(
image: AssetImage(
"assets/dart_logo.jpg"
),
)
The Image property from the widget specifies ImageProvider. The image to be shown can come from different sources. The Image class contains different constructors for different ways of loading images:
- Image (https://api.flutter.dev/flutter/widgets/Image/Image.html), for obtaining an image from ImageProvider (https://api.flutter.dev/flutter/painting/ImageProvider-class.html), like the previous example.
- Image.asset (https://api.flutter.dev/flutter/widgets/Image/Image.asset.html) creates AssetImage, which is for obtaining an image from AssetBundle (https://api.flutter.dev/flutter/services/AssetBundle-class.html) using the asset key. An example is as follows:
Image.asset(
'assets/dart_logo.jpg',
)
- Image.network (https://api.flutter.dev/flutter/widgets/Image/Image.network.html) creates NetworkImage to obtain an image from a URL:
Image.network(
'https://picsum.photos/250?image=9',
)
- Image.file (https://api.flutter.dev/flutter/widgets/Image/Image.file.html) creates FileImage to obtain an image from a file (https://api.flutter.dev/flutter/dart-io/File-class.html):
Image.file(
File(file_path)
)
- Image.memory (https://api.flutter.dev/flutter/widgets/Image/Image.memory.html) creates MemoryImage to obtain an image from Uint8List (https://api.flutter.dev/flutter/dart-typed_data/Uint8List-class.html):
Image.memory(
Uint8List(image_bytes)
)
Besides the Image property, there are some other commonly used properties:
- height/width: To specify the size constraints of an image
- repeat: To repeat the image to cover the available space
- alignment: To align the image in a specific position within its bounds
- fit: To specify how the image should be inscribed into the available space
To see all the available Image widget properties, please go to the official image widget docs page: https://docs.flutter.io/flutter/widgets/Image-class.html.