K-Learn

Flutter NetworkImage Widget

Posted on Friday, 24 February 2023 12:00 AM

The "Image" widget in Flutter is used to display images in your app. It is a very versatile widget with many properties that can be used to customize the way images are displayed.

Example of how to use the Image widget in Flutter:

Image.network(
  'https://learn.kullooo.com/images/logo.png',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

Some commonly used properties of the Image widget are:

image: The image to be displayed. This can be a NetworkImage, a FileImage, or other types of image sources.
width and height: The dimensions of the image in pixels.
fit: How the image should be resized to fit the available space. Some common options are BoxFit.cover, BoxFit.contain, and BoxFit.fill.
alignment: The alignment of the image within the available space.
color: A color to blend with the image, creating a tint effect.

In this above example, we are creating an Image widget that displays an image from a network URL. We have set the width and height of the image to 200, and used the fit property to specify how the image should be resized to fit the available space.

In addition to these properties, the Image widget also has many other properties that can be used to customize the way images are displayed, such as semanticLabel, excludeFromSemantics, repeat, and many more.

Overall, the Image widget is a powerful and flexible widget that can be used to display a wide range of images in your Flutter app.