Key trong Flutter là gì và khi nào bạn cần chúng?

Question

IT Interview Practice · Accepted Answer

**Key** trong Flutter giúp framework nhận diện và bảo toàn widget đúng cách qua các rebuild — đặc biệt quan trọng cho **các stateful widget trong danh sách** bị sắp xếp lại, thêm, hoặc xóa. Hiểu khi nào cần key ngăn các lỗi tinh vi, gây bối rối.

## Key làm gì

```text
Trong các rebuild, Flutter KHỚP widget mới với element/state hiện có theo VỊ TRÍ và
LOẠI. Thường thì điều này hoạt động tốt. Nhưng khi các widget cùng LOẠI bị sắp xếp lại/thêm/
xóa trong một danh sách, việc khớp theo vị trí bị nhầm lẫn → state gắn vào SAI widget.
→ KEY cho widget một DANH TÍNH ổn định để Flutter khớp chúng đúng qua các thay đổi.
```

## Vấn đề kinh điển (không có key)

```text
Một danh sách các widget STATEFUL (ví dụ các item với state riêng). Bạn xóa item ĐẦU TIÊN:
  ✗ KHÔNG có key → Flutter khớp theo vị trí → state ở yên tại mỗi vị trí, nên
    state có vẻ gắn vào SAI item (state "dịch chuyển" sai)
  ✓ CÓ key → Flutter khớp theo key → state đi theo đúng widget
→ Điều này gây các lỗi gây bối rối (checkbox sai được tích, item sai được highlight, v.v.).
```

```dart
// cho các item danh sách các key ổn định (ví dụ một id duy nhất)
ListView(children: items.map((item) =>
  MyStatefulItem(key: ValueKey(item.id), item: item)   // danh tính ổn định
).toList())
```

## Các loại key và khi nào dùng chúng

```text
ValueKey → key theo một giá trị (ví dụ id duy nhất của một item) — phổ biến cho item danh sách
ObjectKey → key theo danh tính của một đối tượng
UniqueKey → một key chắc chắn duy nhất (ép một danh tính mới mỗi lần build — dùng cẩn thận)
GlobalKey → một key duy nhất toàn cục; truy cập state/context của một widget từ nơi khác
  (ví dụ GlobalKey của Form) — mạnh nhưng nặng hơn; dùng tiết kiệm
KHI NÀO CẦN: chủ yếu cho các widget STATEFUL trong danh sách động (sắp xếp lại/thêm/xóa).
  Stateless widget và danh sách tĩnh thường KHÔNG cần key.
```

## Tại sao điều này quan trọng

Hiểu key là kiến thức cấp senior có giá trị vì chúng giải quyết các **lỗi tinh vi, gây bối rối** với các stateful widget trong danh sách động, và biết khi nào cần chúng phản ánh sự hiểu biết Flutter sâu hơn.

Vấn đề cốt lõi — rằng Flutter thường khớp widget với state của chúng theo **vị trí và loại** trong các rebuild, vốn hoạt động tốt thường lệ nhưng **hỏng khi các stateful widget cùng loại bị sắp xếp lại, thêm, hoặc xóa trong một danh sách** (khiến state gắn vào sai widget) — là một nguồn thực sự của các lỗi khó hiểu (checkbox sai được tích, item sai được highlight, state có vẻ "dịch chuyển" sai). **Key cho widget một danh tính ổn định** để Flutter khớp chúng đúng qua các thay đổi này, sửa các lỗi như vậy.

Hiểu **vấn đề kinh điển** (xóa một item khỏi danh sách các stateful widget không có key khiến state lệch) và giải pháp (cho các item các key ổn định như `ValueKey(item.id)`) là kiến thức thực hành giải quyết các vấn đề gây bối rối này.

Hiểu các **loại key** (ValueKey cho key theo một giá trị như id — phổ biến cho item danh sách; ObjectKey; UniqueKey; và **GlobalKey** để truy cập state của một widget từ nơi khác, như GlobalKey của Form) và quan trọng là **khi nào cần key** (chủ yếu cho stateful widget trong danh sách động; stateless widget và danh sách tĩnh thường không cần chúng) phản ánh sự hiểu biết trưởng thành — áp dụng key phù hợp thay vì dùng chúng theo kiểu cargo-cult ở mọi nơi hoặc bỏ qua chúng nơi cần.

Vì key giải quyết các lỗi thực sự, tinh vi với stateful widget trong danh sách động (một vấn đề gây bối rối cho nhiều lập trình viên) và hiểu khi nào và cách dùng chúng phản ánh kiến thức Flutter sâu hơn, hiểu key là kiến thức cấp senior có giá trị — giải quyết một lớp các lỗi state gây bối rối và phản ánh sự hiểu biết sâu hơn về cơ chế khớp widget-element của Flutter được kỳ vọng cho các vai trò senior, một chủ đề phân biệt những người thực sự hiểu mô hình rendering của Flutter với những người chỉ dùng nó một cách hời hợt.

Key làm gì

Vấn đề kinh điển (không có key)

Các loại key và khi nào dùng chúng

Tại sao điều này quan trọng

Câu hỏi liên quan