Login

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);

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})`).

Thanks for [Günter's detailed explanation][1] 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,

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

should come from the auto-generated [Flutter application boilerplate][2].

The **complete context** is:

```dart
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

```dart
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][3] way. The counterpart syntax in [Swift][4] should be **external parameter.**

```dart
enableFlags(bold: true, hidden: false);
```

I wish this could help.

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

[1]: