Keys in Flutter, Concept of Key in Widgets

The importance of using keys in Flutter is discussed here

Hello guys, my name is Shirsh and in this article, we will discuss keys in a flutter.

So before you read its definition and other theories part, firstly we understand why we needed keys in a flutter. Which keys and where do we need to use these keys in a flutter.

So, let's suppose we need to create an application where are multiple items in a list, and according to our priority, we need to Implement drag and drop functionality here. for that thing's implementation, we should know about its state right…

Because without knowing the state it’s hard to implement this feature.

Having a basic understanding of keys is important, even if we’re not going to use them in our projects, and most frameworks handle this for us.

It says that if you want to preserve the state of a widget when moved around in your widget tree, then use the key. We are going to see some of the use cases where keys can be very helpful, as well as what other types of keys are available.

When a widget is moved around in your widget tree, the first thing you need to preserve is its state, something like a checked checkbox, color, or favorite status.

It is possible to use keys, for example, when removing a list item, adding it, reordering it, or dragging a widget, if it experiences any movement, and you would like to preserve its state.

Now, when to use it, you already know that we’re going to be adding and removing widgets of the same type, and we want to preserve the state. That’s when we’re using it. The second thing we already know is that every widget, custom or predefined, is unique in some sense. That uniqueness is given by the framework during build time; the key is the one that actually uniquely identifies the widgets. So, if you don’t mention the key, the library will generate one for you. All right, so before we get into this use.

So if you think it very looks very complicated and tough to understand key uses, let’s look into that in a simple and sorter way.

What are keys?

• The keys are the IDs of widgets. In addition to Stateless Widgets, all widgets have them.
• Widgets are reused or rebuilt based on these values by the Element tree.
• When no key is specified (as is the case most of the time), the widget type is used to determine the key.

When to use keys?

• They should only be used when the framework needs your assistance to identify which widget needs updating.
• The majority of the time, keys are not necessary.
• Keys are mainly used to maintain state, so if your widgets’ children are all stateless, no key is needed.
• The use of keys can allow you to make some micro-optimizations.

Where to use keys?

• Adding keys to ListTile widgets is necessary if you are reordering listview children.
• You can use the key to reorder or add/delete widgets at the point in the widget tree where these operations are taking place.

What king of Keys to use?
An ID is just a key, but the lord of the ID can change.

• valueKey:- Using a ValueKey, a simple value in the form of a string or integer can be used as a local key.
• ObjectKey:- ObjectKey is useful if your widget displays more complex data than a single value.
• UniqueKey:- The key has the advantage of giving you a unique ID every time you use it.
  It should be placed in the build method, however, if you use it. If you don’t do this, your widget will never have the same ID, so the Element tree will never find a match.
  If not, your widget’s ID will never match, so your Element tree will never be able to reuse it.
• GlobalKey:- Since GlobalKeys are similar to global variables, they can be used to maintain state throughout your app.
  In many cases, it is preferable to use a state management solution.

When do we need Keys?
We require a key when we perform some operation on a widget, but the main thing is that widgets have the same types. Therefore, the tree can perform the following operations.

• Adding
• Removing
• Reordering

In Flutter, we use keys to indicate when things should be done, so let’s examine which keys are right for us. Like this

• for Setting Page (Global Key)
• for TODO APP(Value key)
• for Random Tile design (Unique Key)
• for data Scroll design (Page Storage key)
• for Address Book (Object Key)
• for Address Book (Object Key)

So lets move to the codebase of our sample project and see all example one by one, now we know about why, which, and where we use keys, for some better understanding let’s see some examples as well.

firstly see Global Key Example:-

In this example, we learn how to use GlobalKey to maintain widget states when changing parents.

Let’s see ValueKey Example:-

In this example, you can see that even the filled text has been erased. Due to rebuilding, both widget states are lost completely and created from scratch.

Third is Unique Key Example:-

In the case of many widgets with the same incentive, each widget must be defined as a unique widget using a unique key.

for the Page store key, you can check it out here. also same as for Object Key, you can check it out here.

To summarize, you use keys to maintain state across widget trees. It’s most common to encounter this when modifying a collection of widgets of the same type, such as a list. Choose a key type based on the type of data you want to store in the widget tree you wish to maintain. Put the key at the top of the widget tree you want to preserve and use it to preserve data.

GitHub - shirsh94/flutter_key_example

If you got something wrong? Mention it in the comments. I would love to improve. your support means a lot to me! If you enjoy the content, I’d be grateful if you could consider subscribing to my YouTube channel as well.

I am Shirsh Shukla, a creative Developer, and a Technology lover. You can find me on LinkedIn or maybe follow me on Twitter or just walk over my portfolio for more details. And of course, you can follow me on GitHub as well.

Have a nice day!🙂

Shirsh Shukla is All about flutter 💙💙💙💙