Keys in Flutter

A Key in Flutter is an identifier for a widget that helps Flutter understand its relationship to other widgets in the widget tree. It also identifies Widgets, Elements, and SemanticsNodes. It plays a key role in determining how widgets are updated and managed when the UI changes. When a widget is rebuilt, its key determines whether the new widget should be used to update an existing element in the widget tree. This means that if the key of the new widget matches the key of the current widget associated with an element, Flutter will update that element with the new widget. Otherwise, it will create a new element for the new widget. This mechanism is vital for maintaining the state and identity of widgets, especially in dynamic lists or complex interfaces where the structure of the widget tree changes frequently. Using keys, developers can ensure that the framework accurately tracks and updates widgets, leading to more predictable and efficient UI behavior.

In Flutter, the Widget class includes a constructor that can take a Key as an

optional parameter. Here is an example

abstract class Widget extends DiagnosticableTree {
  const Widget({ this.key });
  
  final Key? key;
  // Other properties and methods...
}

In Flutter, several types of keys exist and they are mainly categorized into Local and Global Key.

Standard LocalKeys:

• ValueKey: This key uses a stable value, such as a string or an integer, to uniquely identify a widget within its parent. It’s efficient and well-suited for lists, grids, or widgets with a unique identifier.
• ObjectKey: This key relies on object reference equality to uniquely identify a widget. It’s suitable for situations where the object instance itself remains the same even if its properties change.
• UniqueKey: While commonly used, it’s not technically a LocalKey because it generates a globally unique identifier every time it’s created. However, it can be used within a specific parent context to achieve uniqueness within that scope.

Standard GlobalKeys:

• GlobalKey: This key provides a unique identifier across your entire app. This means you can access and manipulate a widget from anywhere in the widget tree, regardless of their location.

UniqueKey

A UniqueKey is a special type of Key that guarantees uniqueness within your entire app. This means no two UniqueKey instances will ever be the same. It’s essentially a random identifier generated Automatically when you create a new UniqueKey object.

It’s most commonly used when you need to uniquely identify widgets that are dynamically added, removed, or reordered within your UI.

List<String> items = ['Item 1', 'Item 2', 'Item 3'];

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) => Text(
    key: UniqueKey()
    items[index],
    ),
);

ValueKey

A ValueKey is a type of Key in Flutter that uses a value to uniquely identify a widget. Unlike UniqueKey, which generates random identifiers, ValueKey relies on the provided value for uniqueness.

When you have a stable, unique identifier for your widget that does not change over time. For example:

• Database IDs
• User IDs

List<Product> products = [...];

ListView.builder(
  itemCount: products.length,
  itemBuilder: (context, index) => ProductItem(
    product: products[index],
    key: ValueKey<int>(products[index].id),
  ),
);

ObjectKey

ObjectKey is another type of key you can use to uniquely identify widgets. This key suits complex data structures where the widget’s identity is tied to the object’s identity. For eg. You have a widget whose properties change over time, but you want to treat it as the same widget for state management purposes. Think of a shopping cart item whose quantity changes, but it remains the same item.

Here is an example

class User {
  final String name;
  final int age;

  User(this.name, this.age);
}

List<User> users = [...];

ListView.builder(
  itemCount: users.length,
  itemBuilder: (context, index) => UserCard(
    user: users[index],
    key: ObjectKey(users[index]),
  ),
);

In this example, each UserCard has an ObjectKey based on the specific User object instance. Even if the user’s age changes, the widget maintains its state (e.g., item selection) because it recognizes the object hasn’t truly changed.

GlobalKey

A GlobalKey is a powerful but sometimes tricky tool for accessing widgets throughout your app’s widget tree. It is unique across your entire app, unlike UniqueKey or ValueKey which are scoped within their parent widget trees. It enables you to directly access the state and properties of a widget from anywhere in your code, regardless of its location in the widget tree.

A practical use case is a form widget where you want to access its state from a different part of your app to perform actions like validation or data submission.

Here is an example

final _formKey = GlobalKey<FormState>();

Form(
  key: formKey,
  child: Column(
    childeren: [
      TextFormField(),
    ],
  ),
);

// validate form
if (formKey.currentState.validate()) {
  // Process data
}

Do you know why do we use a GlobalKey in Form? A simple answer would be to access the Form currentState and validate.

PageStorageKey

PageStorageKey plays a crucial role in preserving widget state across navigation changes. It enables widgets within app pages to store and restore their state when the user navigates back and forth between them. For example, in Flutter it helps to preserve the scroll position of scrollable widgets. This means that when you have a scrollable widget like a ListView, and you leave the page and return back to it, the ListView will scroll back to the position where it was left.

PageStorageKey uses the PageStorage, which finds the nearest PageStorage ancestor from the widget tree and accedes storage to that widget. The PageStorage is usually introduced automatically via the MaterialPage or CupertinoPage.

ListView.builder(
  key: PageStorageKey<String>('news-list'),
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text('Article $index'),
    );
  },
);