Builder versus GlobalKey

by

The real reason we tend to avoid GlobalKey is not about performance. It is more related to the fact that it breaks a few patterns in flutter.

Widgets by definition should not be able to access concrete information of other widgets (such as their size or position). And GlobalKey grant the ability to access such information; allowing peoples to do anti-pattern stuff.

Think of GlobalKey as a mean to eject the reactive layer of Flutter.

A few examples of what peoples are tempted to do using GlobalKey :

  • Having a public singleton GlobalKey. Used as a mean to not lift the state up. Making interaction between widgets hard to predict, as the relationship isn’t one-sided anymore (parent -> children becomes a two-way relationship)
  • Using GlobalKey to compute the size of a layout. Then trigger a re-render with this information. This instead is the role of RenderObject and shouldn’t be done in widgets. It makes layout much harder to maintain

Builder and similar on the other hand don’t break these patterns. As, by definition Builder does nothing. It’s just a neat way of using a different BuildContext.

This usually means that if you can solve your layout problem using Builder instead of GlobalKey, you’re on the right track to a maintainable layout.

When to use GlobalKey then?

Well, if you can, never. Try to instead use things such as context.ancestorStateOfType or context.inheritWidgetOfExtactType. You may also want to consider creating a custom RenderObject for a specific layout. RenderObject combined with parentData may also be what you want if you need a relationship between parent/children

This can more complicated though. It can consume more time than you want. Or you may fall into an edge-case that is hard to implement using the current API.

In such situations, it is ok to use GlobalKey as long as you know the potential consequences.

More Related Contents:

  1. How to deal with unwanted widget build?
  2. Flutter: Scrolling to a widget in ListView
  3. Flutter – Wrap text on overflow, like insert ellipsis or fade
  4. How to refresh an AlertDialog in Flutter?
  5. How to add a ListView to a Column in Flutter?
  6. Programmatically scrolling to the end of a ListView
  7. How do I do the “frosted glass” effect in Flutter?
  8. How to add image in Flutter
  9. InkWell not showing ripple effect
  10. Flutter Layout Row / Column – share width, expand height
  11. Flutter: Expanded vs Flexible
  12. How to detect swipe in flutter
  13. Flutter API Fetch and Sending Data from One screen to another screen
  14. Sizing elements to percentage of screen width/height
  15. Style BottomNavigationBar in Flutter
  16. Flutter: Keep BottomNavigationBar When Push to New Screen with Navigator
  17. TextField inside of Row causes layout exception: Unable to calculate size
  18. Layout: Text overflowing in Flutter
  19. Vertical viewport was given unbounded height
  20. How to check if scroll position is at top or bottom in ListView?
  21. How can I layout widgets based on the size of the parent?
  22. Flutter use variable created inside Future builder outside of the build method,
  23. How to make button width match parent?
  24. Flutter: “RenderFlex children have non-zero flex but incoming height constraints are unbounded”
  25. How to use BottomNavigationBar with Navigator?
  26. How can I add shadow to the widget in flutter?
  27. How do I remove Flutter IconButton big padding?
  28. Preserving state between tab view pages
  29. Flutter – How to make a custom TabBar
  30. Flutter – How can I dynamically show or hide App Bars on pages

Leave a Comment