📝 Text Widget

1. Cơ bản

Text widget hiển thị một chuỗi văn bản:

Text('Hello, Flutter!')

---

2. TextStyle

Customize text với TextStyle:

Text(
  'Styled Text',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    fontStyle: FontStyle.italic,
  ),
)

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

Property	Kiểu	Ví dụ
fontSize	double	20.0
fontWeight	FontWeight	FontWeight.bold
color	Color	Colors.red
fontStyle	FontStyle	FontStyle.italic
letterSpacing	double	2.0
wordSpacing	double	5.0
height	double	1.5 (line height)
decoration	TextDecoration	TextDecoration.underline

---

3. Text Overflow

Xử lý text quá dài:

Text(
  'This is a very long text that might overflow the container',
  overflow: TextOverflow.ellipsis,  // Thêm ...
  maxLines: 2,
)

Giá trị	Mô tả
TextOverflow.clip	Cắt text
TextOverflow.fade	Làm mờ dần
TextOverflow.ellipsis	Thêm …
TextOverflow.visible	Cho phép tràn

---

4. Text Alignment

Container(
  width: 200,
  child: Text(
    'Centered text',
    textAlign: TextAlign.center,
  ),
)

Giá trị	Mô tả
TextAlign.left	Căn trái
TextAlign.right	Căn phải
TextAlign.center	Căn giữa
TextAlign.justify	Căn đều

---

5. RichText và TextSpan

Hiển thị text với nhiều styles khác nhau:

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

Hoặc dùng Text.rich:

Text.rich(
  TextSpan(
    text: 'Price: ',
    children: [
      TextSpan(
        text: '\$99',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          color: Colors.green,
        ),
      ),
    ],
  ),
)

---

6. SelectableText

Cho phép copy text:

SelectableText(
  'You can select and copy this text',
  style: TextStyle(fontSize: 16),
)

---

7. Text Decoration

Text(
  'Decorated Text',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationColor: Colors.red,
    decorationStyle: TextDecorationStyle.dashed,
    decorationThickness: 2,
  ),
)

Decoration	Mô tả
TextDecoration.underline	Gạch chân
TextDecoration.lineThrough	Gạch ngang
TextDecoration.overline	Gạch trên

---

8. Custom Fonts

Thêm font vào pubspec.yaml

flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf
        - asset: assets/fonts/Roboto-Bold.ttf
          weight: 700

Sử dụng

Text(
  'Custom Font',
  style: TextStyle(
    fontFamily: 'Roboto',
    fontSize: 18,
  ),
)

---

9. Ví dụ thực tế

Article Preview

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text(
      'Introduction to Flutter',
      style: TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.bold,
      ),
    ),
    SizedBox(height: 8),
    Text(
      'Flutter is Google\'s UI toolkit for building beautiful apps...',
      style: TextStyle(
        fontSize: 14,
        color: Colors.grey[600],
        height: 1.5,
      ),
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
    ),
    SizedBox(height: 4),
    Text(
      'Read more',
      style: TextStyle(
        color: Colors.blue,
        fontWeight: FontWeight.w500,
      ),
    ),
  ],
)

---

📝 Tóm tắt

Widget/Property	Mục đích
Text	Hiển thị text cơ bản
TextStyle	Style cho text
overflow	Xử lý text tràn
maxLines	Giới hạn số dòng
textAlign	Căn chỉnh text
RichText / Text.rich	Text nhiều styles
SelectableText	Text có thể copy