'MyhomePage({Key key, this.title}) : super(key: key);' in Flutter - what would be a clear explanation with an example?

Question

In Flutter, what would be a clear explanation with an example?

My confusion is about key, as in the code below.

MyHomepage({Key key, this.title}) : super(key: key);

https://stackoverflow.com/questions/50080860/what-are-keys-in-the-stateless-widgets-class — Dinesh Balasubramanian, Aug 28 '18 at 17:18

score 69 · Answer 1 · edited Jun 16 '20 at 16:32

The code is the constructor of the MyHomepage widget.

{Key key, this.title}

It declares two optional named parameters (optional named because of {}) where

the first is of name key with type Key
the second is of name title with the type of the field this.title and automatically initializes this.title with the passed value. This is nice syntactic sugar that saves some writing.

: starts the initializer list. The initializer list allows some to execute some expressions before the call is forwarded to the constructor of the super class.

When a class is initialized, read access to this is forbidden until the call to the super constructor is completed (until the body of the constructor is executed - in your example the constructor has no body).

The initializer list is often use to validate passed parameter values with assert(key != null) or to initialize final fields with calculated values (final fields can't be initialized or updated later).

super(key: key) forwards to the constructor of the super class and passes the parameter key passed to MyHomepage to the super constructors key parameter (same as for MyHomepage({Key key})).

for those who don't know what's the meaning of `super` keyword. `super` is just like `this` keyword that indicates to the parent class. another point is once we use inheritance with `extends` keyword; constructor of child class will be executed after parent's constructor execution. — Reza GH, Jul 22 '22 at 18:54

score 50 · Answer 2 · edited Jun 16 '20 at 16:40

Thanks for Günter's detailed explanation which helped me at the very beginning. Here I would like to explain the background for this question, and especially the punctuation as syntax a little bit.

The mentioned line of code,

MyHomepage({Key key, this.title}) : super(key: key);

should come from the auto-generated Flutter application boilerplate.

The complete context is:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

For me, the weird punctuation (curly brackets{ } and two colons :) is what prevented me from comprehending its syntax.

Curly brackets of {Key key, this.title}: is the syntax for declaring optional parameters while defining function in Dart.

The first colon of MyHomepage(...) : super(key: key) is a separator that specifies the initializer list (super(key: key)) of constructor function MyHomepage(...)

The second colon within super(key: key) is the way how you pass a parameter to a named function (super() in this case).

For example, a function enableFlags is defined as follows

void enableFlags({bool bold, bool hidden}) {...}

To call the function, the way Dart passes parameter to the function, is by declaring parameterName before value, separated with colon :, which is safer for developer than the Pythonic way. The counterpart syntax in Swift should be external parameter.

enableFlags(bold: true, hidden: false);

I wish this could help.

All the definitions and examples can be found in Dart's official document.

I'm new to Flutter/Dart, but from Dart docs I understood `{Key key, this.title}` is the syntax for declaring named parameters not optional parameters (aldo it's true that named parameters are optional by default). What I'm confused about is the use of `this.title` in a named parameter declaration. As I understant it, this syntax declares a parameter named `title` and also initialises the `title` property of the object with the value passed for the `title` parameter. — Sorin, Oct 18 '20 at 16:56
@Sorin I have to say that the latter is really an ugly syntax even though it looks like more brief. — Neal.Marlin, Mar 21 '22 at 17:54

score 4 · Answer 3 · answered Jun 19 '20 at 03:28

Flutter uses Keys for a lot of things inside the framework. Since your widget extends StatelessWidget or StatefulWidget, this is the way of your widget having a key so that the framework knows what to do with it (the super function is passing the key to the superclass widget - which can be understood by the framework).

Except for that is only Dart syntax (which is awesome by the way).

You can learn more about Keys here: https://www.youtube.com/watch?v=kn0EOS-ZiIc

Another example is the testing framework. Flutter driver needs a key to know which widget to look for and interact with it. With this syntax your widget will have a key and it will work!

That video, while not perfect, is certainly useful for someone new to flutter trying to figure out what keys in widgets are all about. Thanks! — 6cef, Jul 05 '23 at 05:01

score 1 · Answer 4 · answered Apr 15 '21 at 14:54

1

just look my pictures including two cases :

answered Apr 15 '21 at 14:54

Jagie

2,190
3
27
25

'MyhomePage({Key key, this.title}) : super(key: key);' in Flutter - what would be a clear explanation with an example?

4 Answers4

Linked