🖼️ Image Widget

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

1. Sử dụng cached_network_image cho network images
2. Compress ảnh trước khi add vào assets
3. Sử dụng đúng fit để tránh load ảnh lớn không cần thiết
4. 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