30

Flutter is an amazing framework straightforward and easy to use. I must see that the documentation is very good but there are some concept that are still vague to me, for instance the key parameter. According to the documentation A Key is an identifier for Widgets, Elements and SemanticsNodes. It's clear, but why do I need to identify my widgets. So far I never used keys in my coding. Is there any benefits of using keys in my code? Thanks.

Toni Joe
  • 7,715
  • 12
  • 50
  • 69

1 Answers1

27

You don't need to use Keys most of the time, the framework handles it for you and uses them internally to differentiate between widgets. There are a few cases where you may need to use them though.

A common case is if you need to differentiate between widgets by their keys, ObjectKey and ValueKey can be useful for defining how the widgets are differentiated. An example is the PageStorageKey, and another is for lists with animated deletion: https://flutter.io/cookbook/gestures/dismissible/.

Another example is that if you have a child you want to access from a parent, you can make a GlobalKey in the parent and pass it to the child's constructor. Then you can do globalKey.state to get the child's state (say for example in a button press callback). Note that this shouldn't be used excessively as there are often better ways to get around it.

You probably won't ever have to think about it until you use a widget that tells you directly to define keys for its children.

rmtmckenzie
  • 37,718
  • 9
  • 112
  • 99
  • Thanks this clarified a lot. But I'm still confused. For instance in the example provided by this link https://flutter.io/widgets-intro/#keys, the code still works with or without the use of keys – Toni Joe May 03 '18 at 21:37
  • If you're talking about the ShoppingList example - yes, it probably works either way as it's pretty basic, but when you start doing things like deleting or adding the behaviour gets more complex. When you delete the second item for example, it might not actually delete the second widget but rather just change it to contain the value that was previously in the third, and the 4th into the 3rd etc. In a basic list that will look the same. But if you're trying to do something like animate deletion, or have a very long list (i.e. 100's or 1000's or items), the distinction becomes quite important. – rmtmckenzie May 03 '18 at 22:03
  • Here's a more specific example of animating deletion - [dismissible](https://flutter.io/cookbook/gestures/dismissible/). It requires keys or it doesn't work. – rmtmckenzie May 03 '18 at 22:04
  • 1
    Actually, using `GlobalKey` is deprecated. You can almost always find a way to _not_ use it. The most common usage of `Key` is when you need to list animations on a children list. Such as add/remove, or a simple reorder. – Rémi Rousselet May 03 '18 at 22:26
  • 3
    @RémiRousselet please provide a reference to show that using GlobalKey is deprecated. – rmtmckenzie May 03 '18 at 22:43
  • It's stated in the doc of `GlobalKey` that it's "relatively expensive. So don't use it if you don't need it". – Rémi Rousselet May 03 '18 at 22:51
  • 3
    @RémiRousselet While I'd agree global key shouldn't be used all that much it probably comes up more often than things like dismiss-able lists, but that is completely subjective and depends on the type of app you're building. I've taken that specific part out. But it is used in some of the flutter demos, and fairly frequently in flutter's source code (i.e. the Navigator). If you start having complex animations and interactions between widgets, it is indispensable. It is **definitely not deprecated**, as that implies that it can't be used and will not exist in a future version of the framework. – rmtmckenzie May 03 '18 at 23:08
  • Sorry, I didn't say "Will be removed". But "Better avoided". There are many usages of `GlobalKey` that can be achieved using something different. `GlobalKey` is definitely powerful and has it's use-cases. But I don't think it should be the center of the question `What are keys used for in flutter`. – Rémi Rousselet May 03 '18 at 23:18
  • But glad you edited your answer to include these changes ! – Rémi Rousselet May 03 '18 at 23:18
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/170325/discussion-between-rmtmckenzie-and-remi-rousselet). – rmtmckenzie May 03 '18 at 23:25
  • What about in listview ? – Ajay S Apr 06 '20 at 08:20