Skip to content
tezvyn:

What are Keys in Flutter and why are they critical?

Source: api.flutter.devHardHow cards are made

Tests widget identity during reconciliation. Keys let Flutter distinguish moved widgets from changed data; without ValueKeys, ReorderableListView leaves state at old positions, e.g., a checkbox swap. Red flag: calling them performance tools.

What's really being asked

This question tests whether you understand Flutter's three-tree architecture and the difference between Widgets, Elements, and RenderObjects. Specifically, it probes your knowledge of how the framework reconciles the widget tree against the element tree during rebuilds, and why explicit identity through Keys is necessary when widget positions change but their underlying data does not. It also checks if you know the practical API requirement that ReorderableListView children must have Keys.

The full answer

A good answer hits four things in order. First, define a Key as an optional identifier that tells Flutter's element tree, this widget is the same logical entity as before, even if it moved. Second, explain the default reconciliation algorithm: without a Key, Flutter matches elements by runtime type and tree position, then updates the widget reference and calls didUpdateWidget. Third, explain why this breaks in reorderable lists: when a user drags an item from index 0 to index 2, the widget tree now has different data at index 0, but Flutter reuses the old Element and State at index 0 because the widget type is identical. Fourth, state the fix: assign a stable ValueKey based on your model ID so Flutter recognizes the widget moved and reparents the existing Element with its State intact.

The mistakes people make

The biggest red flag is saying Keys exist to improve performance. They do not make diffing faster; they make it correct by providing identity. Another red flag is confusing GlobalKey with LocalKey. A GlobalKey grants global access to a State object from anywhere in the app, while LocalKeys like ValueKey, ObjectKey, and UniqueKey only control local reconciliation. Candidates also err by suggesting index-based keys, which defeat the purpose because the index is exactly what changes during a reorder.

What usually comes next

An interviewer might ask when to use ObjectKey versus ValueKey, which tests whether you know that ValueKey uses operator equality while ObjectKey uses identity. They might ask about GlobalKey and when it is appropriate, such as accessing FormState or scrolling a ListView. They might also ask how to preserve scroll position or animation controllers during reordering, which leads to discussions about AutomaticKeepAliveClientMixin or using PageStorageKey.

A concrete example

Imagine a todo list built with ReorderableListView where each child is a CheckboxListTile with a TextField for the task description. The list contains three items: task A unchecked at index 0, task B checked at index 1, and task C unchecked at index 2. The developer omits Keys. The user drags task B to index 0. Because all tiles have the same runtime type, Flutter sees a CheckboxListTile at index 0 and reuses the original Element from index 0. The State object still thinks it belongs to task A, but the widget now displays task B's text. Worse, the checkbox remains unchecked because the State from index 0 had isChecked false, while the checked State traveled with the Element that is now at index 1. The UI shows task B with an unchecked box and task A with a checked box. Adding ValueKey(todo.id) forces Flutter to match Elements by identity, so the checked State stays with task B's widget no matter where it moves.

Interview question

When a ReorderableListView child is dragged to a new index without a Key, what happens to its underlying Element during reconciliation?

  • a.It is reparented to the new index, preserving its State.
  • b.The framework skips Element reuse to force a fresh RenderObject for performance.
  • c.Flutter destroys it and creates a replacement at the destination index.
  • d.It remains at the original index and receives whatever widget now occupies that slot.Correct
Why?

Without a Key, Flutter matches by runtime type and tree position, so the Element stays at its original slot and is updated with the new widget reference there, leaving its State behind. Option A describes what happens only when a stable Key provides explicit identity, allowing Flutter to reparent the Element to its new position.

Just read this? Test yourself on what you have been reading.

Read the original → api.flutter.dev

Put your scrolling time to good use

Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.

The iPhone app is on the way

We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.

Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.

Get it on Google PlayiPhone app coming soon

We are hiring for this. Open roles that interview on flutter — each one lists the topics its interview covers.

See open roles