Text Widget trong Flutter

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