Image Widget trong Flutter

1. Image.asset

Hiển thị ảnh từ thư mục assets:


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

Cấu hình trong pubspec.yaml


flutter:
  assets:
    - assets/images/

2. Image.network

Hiển thị ảnh từ URL:


Image.network('https://picsum.photos/200')

Với loading và error


Image.network(
  'https://picsum.photos/200',
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return CircularProgressIndicator();
  },
  errorBuilder: (context, error, stackTrace) {
    return Icon(Icons.error);
  },
)

3. BoxFit

Cách ảnh fill vào container:


Container(
  width: 200,
  height: 100,
  child: Image.network(
    'https://picsum.photos/300/200',
    fit: BoxFit.cover,
  ),
)

Giá trị	Mô tả
`fill`	Kéo dãn fill full (có thể méo)
`contain`	Giữ tỷ lệ, vừa khít trong container
`cover`	Giữ tỷ lệ, phủ đầy container (có thể crop)
`fitWidth`	Giữ tỷ lệ, fit width
`fitHeight`	Giữ tỷ lệ, fit height
`none`	Không scale
`scaleDown`	Scale nhỏ nếu cần, không phóng to

4. Kích thước và Styling


Image.network(
  'https://picsum.photos/200',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

Với ClipRRect (rounded corners)


ClipRRect(
  borderRadius: BorderRadius.circular(12),
  child: Image.network(
    'https://picsum.photos/200',
    width: 200,
    height: 200,
    fit: BoxFit.cover,
  ),
)

Với Container decoration


Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(12),
    image: DecorationImage(
      image: NetworkImage('https://picsum.photos/200'),
      fit: BoxFit.cover,
    ),
  ),
)

5. CircleAvatar

Ảnh hình tròn:


CircleAvatar(
  radius: 50,
  backgroundImage: NetworkImage('https://picsum.photos/100'),
)

Với fallback


CircleAvatar(
  radius: 50,
  backgroundImage: NetworkImage('https://...'),
  child: Text('JD'),  // Hiển thị khi không có ảnh
)

6. Image.memory

Hiển thị ảnh từ bytes:


Image.memory(bytes)  // Uint8List

7. Image.file

Hiển thị ảnh từ file local:


import 'dart:io';
 
Image.file(File('/path/to/image.png'))

8. Cached Network Image

Sử dụng package cached_network_image cho caching:


# pubspec.yaml
dependencies:
  cached_network_image: ^3.3.0


import 'package:cached_network_image/cached_network_image.dart';
 
CachedNetworkImage(
  imageUrl: 'https://picsum.photos/200',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
)

9. Ví dụ thực tế

Product Card


Container(
  width: 160,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: Image.network(
          'https://picsum.photos/160/160',
          width: 160,
          height: 160,
          fit: BoxFit.cover,
        ),
      ),
      SizedBox(height: 8),
      Text('Product Name', style: TextStyle(fontWeight: FontWeight.bold)),
      Text('\$99.99', style: TextStyle(color: Colors.green)),
    ],
  ),
)

Profile Header


Row(
  children: [
    CircleAvatar(
      radius: 30,
      backgroundImage: NetworkImage('https://picsum.photos/60'),
    ),
    SizedBox(width: 16),
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('John Doe', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
        Text('@johndoe', style: TextStyle(color: Colors.grey)),
      ],
    ),
  ],
)

Banner với Overlay


Stack(
  children: [
    Image.network(
      'https://picsum.photos/400/200',
      width: double.infinity,
      height: 200,
      fit: BoxFit.cover,
    ),
    Positioned.fill(
      child: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Colors.transparent, Colors.black54],
          ),
        ),
      ),
    ),
    Positioned(
      bottom: 16,
      left: 16,
      child: Text(
        'Banner Title',
        style: TextStyle(color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold),
      ),
    ),
  ],
)

10. Performance Tips

Sử dụng cached_network_image cho network images
Compress ảnh trước khi add vào assets
Sử dụng đúng fit để tránh load ảnh lớn không cần thiết
Set width/height để Flutter biết kích thước cần render

📝 Tóm tắt

Widget/Method	Nguồn ảnh
`Image.asset`	Assets (local)
`Image.network`	URL (network)
`Image.file`	File system
`Image.memory`	Bytes (Uint8List)
`CircleAvatar`	Ảnh hình tròn
`CachedNetworkImage`	Network với caching

BoxFit	Mô tả
`cover`	Phủ đầy, crop nếu cần
`contain`	Vừa khít, giữ tỷ lệ
`fill`	Fill full, có thể méo