Skip to main content

One post tagged with "Image"

View All Tags

Flutter: Làm việc với Text, Image và Icon widgets

· 4 min read

Text, Image và Icon là những widget cơ bản và quan trọng trong Flutter. Bài viết này sẽ hướng dẫn bạn cách sử dụng chúng một cách hiệu quả.

1. Text Widget​

Text widget được sử dụng để hiển thị văn bản trong ứng dụng Flutter.

Text Widget Examples

1.1. Cú pháp cơ bản​

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

1.2. Các thuộc tính phổ biến​

Style​

TextStyle(
  fontSize: 20,          // Kích thước chữ
  fontWeight: FontWeight.bold,  // Độ đậm
  fontStyle: FontStyle.italic,  // Kiểu chữ
  color: Colors.red,     // Màu chữ
  letterSpacing: 2.0,    // Khoảng cách giữa các chữ
  wordSpacing: 5.0,      // Khoảng cách giữa các từ
  height: 1.5,           // Chiều cao dòng
  decoration: TextDecoration.underline,  // Gạch chân
)

TextAlign​

Text(
  'Căn giữa văn bản',
  textAlign: TextAlign.center,
)

MaxLines và Overflow​

Text(
  'Văn bản dài...',
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

1.3. Rich Text​

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: 'Flutter',
        style: TextStyle(
          color: Colors.blue,
          fontWeight: FontWeight.bold,
        ),
      ),
      TextSpan(text: '!'),
    ],
  ),
)

2. Image Widget​

Image widget được sử dụng để hiển thị hình ảnh trong ứng dụng Flutter.

Image Widget Examples

2.1. Các loại Image​

Network Image​

Image.network(
  'https://example.com/image.jpg',
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return CircularProgressIndicator(
      value: loadingProgress.expectedTotalBytes != null
          ? loadingProgress.cumulativeBytesLoaded /
              loadingProgress.expectedTotalBytes!
          : null,
    );
  },
)

Asset Image​

Image.asset(
  'assets/images/flutter_logo.png',
  width: 200,
  height: 200,
)

File Image​

Image.file(
  File('/path/to/image.jpg'),
  fit: BoxFit.cover,
)

2.2. Các thuộc tính phổ biến​

Fit​

Image.network(
  'https://example.com/image.jpg',
  fit: BoxFit.cover,  // Các giá trị: contain, cover, fill, fitWidth, fitHeight
)

Width và Height​

Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
)

Error Handling​

Image.network(
  'https://example.com/image.jpg',
  errorBuilder: (context, error, stackTrace) {
    return const Icon(Icons.error);
  },
)

3. Icon Widget​

Icon widget được sử dụng để hiển thị các biểu tượng trong ứng dụng Flutter.

Icon Widget Examples

3.1. Material Icons​

Icon(
  Icons.favorite,
  color: Colors.red,
  size: 30,
)

3.2. Cupertino Icons​

Icon(
  CupertinoIcons.heart_fill,
  color: CupertinoColors.systemRed,
  size: 30,
)

3.3. Custom Icons​

Icon(
  IconData(0xe800, fontFamily: 'CustomIcons'),
  color: Colors.blue,
  size: 30,
)

4. Kết hợp các Widget​

4.1. Row với Icon và Text​

Row(
  children: [
    Icon(Icons.star, color: Colors.amber),
    const SizedBox(width: 8),
    Text('Favorite'),
  ],
)

4.2. Column với Image và Text​

Column(
  children: [
    Image.network(
      'https://example.com/image.jpg',
      width: 200,
      height: 200,
    ),
    const SizedBox(height: 16),
    Text(
      'Image Title',
      style: TextStyle(fontSize: 20),
    ),
  ],
)

5. Best Practices​

5.1. Text​

  • Sử dụng const constructor khi có thể
  • Tách TextStyle thành các theme riêng
  • Xử lý overflow một cách phù hợp
  • Sử dụng RichText cho văn bản phức tạp

5.2. Image​

  • Luôn chỉ định kích thước cho Image
  • Sử dụng loadingBuilder và errorBuilder
  • Tối ưu hóa kích thước hình ảnh
  • Sử dụng cache cho network images

5.3. Icon​

  • Sử dụng Material Icons cho Android
  • Sử dụng Cupertino Icons cho iOS
  • Tạo custom icons khi cần thiết
  • Đảm bảo kích thước icon phù hợp

Kết luận​

Text, Image và Icon là những widget cơ bản nhưng rất quan trọng trong Flutter. Việc hiểu rõ cách sử dụng chúng sẽ giúp bạn tạo ra giao diện người dùng đẹp và hiệu quả.

Tài liệu tham khảo: