What are Keys in the Stateless widgets class?

by

TLDR: All widgets should have a Key key as optional parameter or their constructor.
Key is something used by flutter engine at the step of recognizing which widget in a list as changed.

It is useful when you have a list (Column, Row, whatever) of widgets of the same type that can potentially get removed/inserted.

Let’s say you have this (code not working, but you get the idea) :

AnimatedList(
  children: [
    Card(child: Text("foo")),
    Card(child: Text("bar")),
    Card(child: Text("42")),
  ]
)

Potentially, you can remove any of these widgets individually with a swipe.

The thing is, our list has an animation when a child is removed. So let’s remove “bar”.

AnimatedList(
  children: [
    Card(child: Text("foo")),
    Card(child: Text("42")),
  ]
)

The problem: Without Key, flutter won’t be able to know if the second element of your Row disappeared. Or if it’s the last one that disappeared and the second has its child change.

So without Key, you could potentially have a bug where your leave animation will be played on the last element instead!

This is where Key takes place.

If we start our example again, using key we’d have this :

AnimatedList(
  children: [
    Card(key: ObjectKey("foo"), child: Text("foo")),
    Card(key: ObjectKey("bar"), child: Text("bar")),
    Card(key: ObjectKey("42"), child: Text("42")),
  ]
)

notice how the key is not the child index but something unique to the element.

From this point, if we remove “bar” again, we’ll have 

AnimatedList(
  children: [
    Card(key: ObjectKey("foo"), child: Text("foo")),
    Card(key: ObjectKey("42"), child: Text("42")),
  ]
)

Thanks to key being present, flutter engine now knows for sure which widget got removed. And now our leave animation will correctly play on “bar” instead of “42”.

More Related Contents:

  1. Flutter: Run method on Widget build complete
  2. Flutter: RenderBox was not laid out
  3. How to use Google API in flutter?
  4. Flutter/Dart how to groupBy list of maps
  5. How do I pass non-string data to a named route in Flutter?
  6. Flutter Error: MediaQuery.of() called with a context that does not contain a MediaQuery
  7. Error: Only static members can be accessed in initializers what does this mean?
  8. Flutter: Detect keyboard open and close [duplicate]
  9. Textfield validation in Flutter
  10. how to place a listview inside a SingleChildScrollView but prevent them from scrolling separately?
  11. How to convert Flutter color to string and back to a color
  12. dart:ui:1: Error: Not found: dart:ui. flutter/dart:
  13. How to make an AlertDialog in Flutter?
  14. How to Move bottomsheet along with keyboard which has textfield(autofocused is true)?
  15. Error thrown on navigator pop until : “!_debugLocked’: is not true.”
  16. Flutter: Ignore touch events on a Widget
  17. How to Save Image File in Flutter ? File selected using Image_picker plugin
  18. AlertDialog without context in Flutter
  19. How to make a full screen dialog in flutter?
  20. flutter run function every x amount of seconds
  21. Invalid Arabic characters With Utf-8 charset Retrived with http.get Flutter
  22. Use ‘ui.decodeImageFromList’ to display an image created from a list of bytes
  23. Horizontally scrollable cards with Snap effect in flutter
  24. Dart convert int variable to string
  25. Usage of FutureBuilder with setState
  26. Flutter: Testing for exceptions in widget tests
  27. how to download/create pdf through webview in flutter
  28. Flutter (Dart) How to add copy to clipboard on tap to a app?
  29. How to set state from another widget?
  30. How do I crop an image in Flutter?

Leave a Comment