Što su keys u Flutteru i kada ih trebate?

Question

Accepted Answer

**Keys** u Flutteru pomažu frameworku da ispravno identificira i čuva widgete tijekom rekonstrukcija — posebno važno za **stateful widgete u listama** koji se ponovno uređuju, dodaju ili uklanjaju. Razumijevanje kada su keys potrebni sprječava suptilne, zbunjujuće greške.

## Što keys rade

```text
During rebuilds, Flutter MATCHES new widgets to existing elements/state by POSITION and
TYPE. Usually this works fine. But when widgets of the SAME TYPE are reordered/added/
removed in a list, position-matching gets confused → state attaches to the WRONG widget.
→ KEYS give widgets a stable IDENTITY so Flutter matches them correctly across changes.
```

## Klasični problem (bez keys)

```text
A list of STATEFUL widgets (e.g. items with their own state). You remove the FIRST item:
  ✗ WITHOUT keys → Flutter matches by position → the state stays at each position, so
    state appears attached to the WRONG items (state "shifts" incorrectly)
  ✓ WITH keys → Flutter matches by key → state follows the correct widget
→ This causes confusing bugs (wrong checkbox checked, wrong item highlighted, etc.).
```

```dart
// give list items stable keys (e.g. a unique id)
ListView(children: items.map((item) =>
  MyStatefulItem(key: ValueKey(item.id), item: item)   // stable identity
).toList())
```

## Vrste keys i kada ih koristiti

```text
ValueKey → key by a value (e.g. an item's unique id) — common for list items
ObjectKey → key by an object's identity
UniqueKey → a guaranteed-unique key (forces a new identity each build — use carefully)
GlobalKey → a globally-unique key; access a widget's state/context from elsewhere
  (e.g. Form's GlobalKey) — powerful but heavier; use sparingly
WHEN NEEDED: mainly for STATEFUL widgets in dynamic lists (reorder/add/remove).
  Stateless widgets and static lists usually DON'T need keys.
```

## Zašto je to važno

Razumijevanje keys je dragocjena znanja na razini seniora jer rješavaju **suptilne, zbunjujuće greške** sa stateful widgetima u dinamičkim listama, a znanje kada su potrebne pokazuje dublje razumijevanje Fluttera.

Osnovni problem — da Flutter normalno matches widgete sa njihovim stanjem prema **poziciji i vrsti** tijekom rekonstrukcija, što obično radi fino, ali **se raskida kada se isti tip stateful widgeta preuređuje, dodaje ili uklanja u listi** (što uzrokuje da se state veže na pogrešne widgete) — pravi je izvor zbunjujućih grešaka (pogrešna checkboxica odabrana, pogrešna stavka označena, stanje koje se čini da se "pomjera" pogrešno). **Keys daju widgetima stabilan identitet** kako bi Flutter mogao ispravno matchati njih kroz te izmjene, čime se ispravaljaju takve greške.

Razumijevanje **klasičnog problema** (uklanjanje stavke iz liste stateful widgeta bez keys što uzrokuje neusklađenost stanja) i rješenja (davanje stavkama stabilnih keys poput `ValueKey(item.id)`) je praktično znanje koje rješava te zbunjujuće probleme.

Razumijevanje **vrsta keys** (ValueKey za identificiranje prema vrijednosti poput id — uobičajeno za stavke liste; ObjectKey; UniqueKey; i **GlobalKey** za pristup stanju widgeta drugdje, poput GlobalKey Forme) i važno **kada su keys potrebni** (uglavnom za stateful widgete u dinamičkim listama; stateless widgeti i statičke liste obično ih ne trebaju) odražava zrelo razumijevanje — primjena keys na odgovarajući način umjesto njihove sveprisutnosti ili izostavljanja gdje su potrebni.

Budući da keys rješavaju prave, suptilne greške sa stateful widgetima u dinamičkim listama (zbunjujući problem koji zbunjuje mnoge programere) i razumijevanje kada i kako ih koristiti odražava dublje znanje Fluttera, razumijevanje keys je dragocjena znanja na razini seniora — rješavanje klase zbunjujućih grešaka stanja i odražavanje dubljeg razumijevanja Flutterovog rendering modela koji se očekuje za senior uloge, tema koja razlikuje one koji zaista razumiju Flutterov rendering model od onih koji ga koriste samo površno.