Question 75932 in Flutter Question posted in
The official Flutter documentation can be found here.

What should I use on my Flutter Widget: `ValueKey` or `Key`

I came across this scenario this week again.

I’ve been using key: ValueKey(*aValue*) but for no special reason, taking into consideration that probably using key: Key(*aValue*) could work similarly.

Any top reason or something for a deep understanding of using which in any case?

Tags:

3

Answers


  1. 0

    The Key class is used to uniquely identify a widget in the widget tree. The ValueKey subclass of Key is used when the key needs to be based on the value of an object rather than the object identity itself.

    In general, it is recommended to use ValueKey when the key needs to be based on the value of an object. This is because ValueKey uses the object’s hashCode and == methods to determine the key, which ensures that the key remains the same even if the object itself is recreated with different attributes. This is important for cases where the widget tree needs to be rebuilt due to state changes, because using ValueKey ensures that the corresponding widgets are updated correctly.

    On the other hand, if the key only needs to be based on the object’s identity, then using Key would be sufficient. This is typically the case when creating a new widget that has a different state than the previous widget.

    In summary, use ValueKey when the key needs to be based on the value of an object, and use Key when the key only needs to be based on the object’s identity.

    Login or Signup to reply.
  2. 0

    Key is abstract class so you can’t initiate it directly. There are few classes which inherits key.

    • LocalKey (Another abstract class which extends Key). You can’t initiate it directly as well. LocalKey is a key which is not global.

    • UniqueKey – Local key used when you want to rebuild a widget everytime there is build called).

    • ObjectKey – Local key used to identify items based on object which was passed. It uses identity comparison to see if keys are equals. So if between builds if object reference is same, keys will be same. If they have different reference, build method will be called.

    • ValueKey (Local key used to identify different items based on their Value in widgets which has similar type of children like List/Row/Column). You can pass item.id as valueKey or entire item.It becomes more important if children are stateful widgets.

    • GlobalKey (A key that is unique across entire app). It should not be re-created every build. You can’t have same GlobalKey with more than one widget which leads to collision.

    • LabeledGlobalKey – Global key with debug level.

    • GlobalObjectKey – Same as ObjectKey but at global level. Hence you can access it anywhere.

    Login or Signup to reply.
  3. 0 
    myMillionListOfProduct = [
Product(name:soap, price: 10.00),
Product(name:butter, price: 12.00),
...
];

    its ok if you want to write different Key manually, but if you want to create it dynamically, then there is some problem :

    we can use Key like this:

    products.map(product) => ProductWidget(key: Key(product.name),product: product);

    but Key only accept String, what if there is product with same name and different on price? dart not happy and telling you : "duplicate of key".

    then to make dart happy we can use the ValueKey :

    products.map(product) => ProductWidget(key: ValueKey<Product>(product),product: product);

    maybe some guy create a difference in their reference and add to our myMillionListOfProduct.

    final someguysoap = Product(name:soap,price:10.00).
myMillionListOfProduct.add(someguysoap);

    BUT, again there is one product with same value, Product(name: soap, price: 10.00), using ValueKey will make dart not happy again.

    then we use ObjectKey instead.

    myMillionListOfProduct = [
Product(name:soap, price: 10.00),
Product(name:butter, price: 12.00),
someguysoap,
...
];

products.map(product) => ProductWidget(key: ObjectKey(product),product: product);

    what if this guy add 1 more of his product with same reference?

    myMillionListOfProduct = [
Product(name:soap, price: 10.00),
Product(name:butter, price: 12.00),
someguysoap,
someguysoap,
...
];

    then dart will tell you that the widgets have the same objectKey. if you want this to happen,

    use UniqueKey instead.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search