> For the complete documentation index, see [llms.txt](https://des-vu-technologies.gitbook.io/blogs-by-shankar/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://des-vu-technologies.gitbook.io/blogs-by-shankar/flutter/widget-of-the-day-7/imagewidget.md).

# imageWidget

The `Image` widget in Flutter is used to display images in your app. Whether you want to display local assets, network images, or images from the device's gallery, the `Image` widget provides a versatile way to integrate images into your Flutter UI. Here are some key properties and features of the `Image` widget:

#### Key Properties and Features of the `Image` Widget:

1. **`image` (required):** This property specifies the image to be displayed. It can be an `AssetImage` for local assets or a `NetworkImage` for images fetched from the internet. There are also other specialized image types like `FileImage` for images from the device's file system or `MemoryImage` for images loaded into memory.
2. \*\*`width` and `height`: You can set the width and height of the image, allowing you to control the image's size within the layout.
3. \*\*`fit`: The `fit` property determines how the image should be fitted into its container. Options include `BoxFit.fill`, `BoxFit.cover`, `BoxFit.contain`, and more.
4. \*\*`alignment`: This property specifies the alignment of the image within its container, useful for fine-tuning the image's position.
5. \*\*`color` and `colorBlendMode`: These properties allow you to apply color filters to the image or blend it with a specific color.
6. \*\*`repeat`: If you're using a local asset and want to create a repeating pattern (like a background image), you can set `repeat` to `ImageRepeat.repeat`.
7. \*\*`semanticLabel`: It provides a description or label for the image, which is important for accessibility and screen readers.

#### Example Usage:

Here's a simple example of how to use the `Image` widget in Flutter:

```dart
Image(
  image: AssetImage('assets/flutter_logo.png'),
  width: 200,
  height: 200,
  fit: BoxFit.contain,
)
```

In this example:

* We use the `Image` widget to display a local asset image (in this case, 'flutter\_logo.png').
* We set the width and height to 200, specifying the dimensions of the image.
* The `fit` property is set to `BoxFit.contain`, ensuring that the entire image fits within the specified width and height while preserving its aspect ratio.

This will render the 'flutter\_logo.png' image with a width and height of 200, fitting it into a 200x200 container while preserving the image's aspect ratio.

### using network image

To use the `Image` widget to display a network image in Flutter:

```dart
Image(
  image: NetworkImage('https://example.com/image.jpg'),
  width: 300,
  height: 200,
  fit: BoxFit.cover,
)
```

In this example:

* We use the `Image` widget to display an image fetched from a network URL (`'https://example.com/image.jpg'`).
* We set the width and height to 300 and 200, respectively, specifying the dimensions of the displayed image.
* The `fit` property is set to `BoxFit.cover`, which scales and centers the image within the specified width and height while maintaining its aspect ratio. This ensures the entire area is covered by the image without distortion.

Make sure to replace `'https://example.com/image.jpg'` with the actual URL of the network image you want to display. The `Image` widget in Flutter makes it straightforward to load and display images from the internet.

The `Image` widget is a core component for incorporating images into your Flutter app, and it supports a variety of image sources and customization options to suit your application's needs.