Image Widget

The Image widget in Flutter is used to display images in your app. It has several constructors that allow you to specify the source of the image (such as a network URL or an asset file), as well as its size, alignment, and other properties. You can also use the ImageProvider class to load images asynchronously and display them in your app. The Image widget supports various image formats, including PNG, JPEG, GIF, and WebP, and offers several options for controlling how the image is displayed, such as scaling, alignment, and color blending.

Breakdown of the parameters

  1. String assetName: This is the name of the asset image to display.
  2. double width: This sets the width of the image.
  3. double height: This sets the height of the image.
  4. BoxFit fit: This determines how the image should be fit into the available space. You can set it to BoxFit.contain to scale the image to fit within the available space while maintaining its aspect ratio, or BoxFit.cover to scale the image to completely cover the available space while maintaining its aspect ratio.
  5. Alignment alignment: This determines the alignment of the image within its parent widget. You can set it to Alignment.center to center the image, or any other alignment value.

Constructors & Examples

  • Image.asset: This constructor loads an image from an asset bundle. You can use this constructor to display images that are included in your app’s assets folder. Here’s an example:
Image.asset(
  'assets/images/my_image.png',
  width: 200.0,
  height: 200.0,
  fit: BoxFit.cover,
)
  • Image.network: This constructor loads an image from a network URL. You can use this constructor to display images that are hosted on a server. Here’s an example:
Image.network(
  'https://example.com/images/my_image.png',
  width: 200.0,
  height: 200.0,
  fit: BoxFit.cover,
)
  • Image.network with Headers: This constructor loads an image from a network URL with custom headers. You can use this constructor to load images that require custom headers, such as those that are protected by authentication. Here’s an example:
Image.network(
  'https://example.com/images/my_image.png',
  headers: {'Authorization': 'Bearer $token'},
  width: 200.0,
  height: 200.0,
  fit: BoxFit.cover,
)
  • Image.file: This constructor loads an image from a file on the device’s local file system. You can use this constructor to display images that are saved on the device. Here’s an example:
Image.file(
  File('/path/to/my_image.png'),
  width: 200.0,
  height: 200.0,
  fit: BoxFit.cover,
)
  • Image.memory: This constructor loads an image from a Uint8List. You can use this constructor to display images that are stored in memory, such as images that are retrieved from a database or fetched from an API. Here’s an example:
Image.memory(
  Uint8List.fromList(bytes),
  width: 200.0,
  height: 200.0,
  fit: BoxFit.cover,
)

These are some of the constructors that are available in the Image widget in Flutter. Each constructor has its own set of parameters that you can use to customize how the image is displayed in your app.