The Image widget is used to display images in Flutter apps. It supports various image sources like:
- Asset images (Image.asset)
- Network images (Image.network)
- File images (Image.file)
- Memory images (Image.memory)
Source Code
Image.asset(
'assets/images/logo.png',
width: 100,
height: 100,
fit: BoxFit.cover,
)
//image load from Network
Image.network(
'https://example.com/image.jpg',
width: 150,
height: 100,
fit: BoxFit.cover,
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return CircularProgressIndicator();
},
errorBuilder: (context, error, stackTrace) => Icon(Icons.error),
)
Ai Code Analizer
🎨 Important Properties
| Property | Description |
|---|---|
width / height | Controls size of the image |
fit | How the image should be inscribed (e.g., BoxFit.cover, contain) |
alignment | Aligns image within its space |
color / colorBlendMode | Apply color filter or blending effect |
loadingBuilder | Custom loading indicator (for Image.network) |
errorBuilder | Custom error widget if image fails to load (network only) |
📦BoxFit Options for fit:
| BoxFit Option | Effect |
|---|---|
cover | Fill space, crop if needed |
contain | Fit inside without cropping |
fill | Stretch to fit both height and width |
fitWidth | Fit width, crop vertically if needed |
fitHeight | Fit height, crop horizontally if needed |