Flutter Images

Displaying images from various sources in Flutter

🖼️ What is Image Widget?

The Image widget displays pictures in your Flutter app from assets, network, files, or memory. It supports various formats like PNG, JPEG, GIF, and WebP with flexible sizing options. 


// Display image from network
Image.network('https://example.com/image.jpg')

Output:

Image Preview

Image Sources

🌐

Network

Load images from URLs 

Image.network(
  'https://example.com/pic.jpg'
)
📁

Assets

Use bundled image files 

Image.asset(
  'assets/images/logo.png'
)
💾

File

Load from device storage 

Image.file(
  File('/path/to/image.jpg')
)
🧠

Memory

Display from byte data 

Image.memory(
  bytes
)

🔹 Network Image

Load and display images from the internet: 

Image.network(
  'https://picsum.photos/300/200',
  width: 300,
  height: 200,
  fit: BoxFit.cover,
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return CircularProgressIndicator();
  },
)

Output:

🔹 Asset Image

Display images bundled with your app: 

// First, add to pubspec.yaml:
// flutter:
//   assets:
//     - assets/images/

Image.asset(
  'assets/images/logo.png',
  width: 150,
  height: 150,
)

Output:

LOGO

🔹 Image Fit Options

Control how images fit within their bounds: 

// Cover - fills the box, may crop
Image.network(
  'https://example.com/image.jpg',
  fit: BoxFit.cover,
)

// Contain - fits entirely, may have empty space
Image.network(
  'https://example.com/image.jpg',
  fit: BoxFit.contain,
)

// Fill - stretches to fill, may distort
Image.network(
  'https://example.com/image.jpg',
  fit: BoxFit.fill,
)

BoxFit Options:

  • cover: Fills the box completely (may crop)
  • contain: Entire image visible (may have gaps)
  • fill: Stretches to fill (may distort)
  • fitWidth: Fits width, height may overflow
  • fitHeight: Fits height, width may overflow
  • none: Original size, may overflow

🔹 Circular Image

Create circular or rounded images: 

// Circular image using ClipOval
ClipOval(
  child: Image.network(
    'https://example.com/avatar.jpg',
    width: 100,
    height: 100,
    fit: BoxFit.cover,
  ),
)

// Rounded corners using ClipRRect
ClipRRect(
  borderRadius: BorderRadius.circular(16),
  child: Image.network(
    'https://example.com/photo.jpg',
    width: 200,
    height: 200,
    fit: BoxFit.cover,
  ),
)

Output:

🔹 Image with Placeholder

Show placeholder while image loads: 

FadeInImage.assetNetwork(
  placeholder: 'assets/images/loading.gif',
  image: 'https://example.com/image.jpg',
  width: 300,
  height: 200,
  fit: BoxFit.cover,
)

// Or using FadeInImage.memoryNetwork
FadeInImage.memoryNetwork(
  placeholder: kTransparentImage,
  image: 'https://example.com/image.jpg',
)

🔹 Cached Network Image

Cache images for better performance (requires package): 

// Add to pubspec.yaml:
// dependencies:
//   cached_network_image: ^3.3.0

import 'package:cached_network_image/cached_network_image.dart';

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
  width: 300,
  height: 200,
  fit: BoxFit.cover,
)

🧠 Test Your Knowledge

Which method loads images from the internet?