What are Keys in the Stateless widgets class

Question

In the flutter docs there's sample code for a stateless widget subclass as shown:

class GreenFrog extends StatelessWidget {
  const GreenFrog({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Container(color: const Color(0xFF2DBD3A));
  }
}

and this

class Frog extends StatelessWidget {
  const Frog({
    Key key,
    this.color: const Color(0xFF2DBD3A),
    this.child,
  }) : super(key: key);

  final Color color;

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return new Container(color: color, child: child);
  }
}

What is a key and when should this super constructor be used? It seems like if you have your own constructor you must have {Key key} why? I've seen other examples where the super keyword is not used so this is where my confusion is.

Answer 1

In Flutter, a Key is an object used to identify a widget uniquely. When a widget is rebuilt due to changes in the widget tree, Flutter uses keys to match old and new instances of the same widget, and this process allows it to preserve state across rebuilds.

In the example code you provided, the key parameter is used in the constructor of the GreenFrog and Frog widgets to provide a Key object to the superclass constructor, which in this case is the StatelessWidget class. This is necessary because the superclass constructor requires a key parameter, and if you define your own constructor in a subclass, you must explicitly call the superclass constructor using the super keyword, passing any required parameters.

It's worth noting that not all widgets require a Key object. In fact, many widgets don't need keys at all, especially simple widgets that don't hold any state. However, if you have a widget that needs to maintain its state across rebuilds, such as a form or a list item, you should consider using a Key to help Flutter preserve that state.