Flutter widgets may or may not have children. For example:
- a
Container widget can have a single child (in a
property named child), or none at all
- a
OverflowBar widget can have multiple children (in a
property named children), or none at all
When a widget has children, it is common to pass them as named parameters. When that is the case, it is a good practice to pass them as the last
arguments in the constructor invocation.
This makes the code more readable and easier to understand.
Exceptions
The rule does not apply in the case of widgets that define their children via positional parameters, since the order of the parameters is fixed by
the constructor signature:
class MyWidget extends StatelessWidget {
final Widget child;
MyWidget(this.child, {Key? key}) : super(key: key);
}
var myWidget = MyWidget(MyChildWidget(), key: Key('myKey')); // Non applicable
What is the potential impact?
The child and children properties of widgets wrapping other widgets are usually the longest and most complex ones. If
those are not placed last, vertical scrolling may hide the rest of the constructor invocation, that potentially include other properties modifying the
behavior of the widget.
For example, a Container may be introduced with the intent of applying a transformation, such as a rotation, that can crucially impact
the overall UI layout.
If the transformation property comes after the child widget, and the child widget is long and complex, the
developer may miss the transformation property when inspecting the code.
Container(
// ...
child: MyWidget(
// very long widget definition
),
// ...
transformation: Matrix4.rotationZ(0.1), // This may be overlooked
)
The impact may be further amplified in the case of nesting of widgets within widgets within widgets:
Container(
child: MyWidget(
// very long widget definition
child: AnotherWidget(
// very long widget definition
child: YetAnotherWidget(
// very long widget definition
),
customProperty: 42, // This may be overlooked
),
customProperty: 42, // This may also be overlooked
),
transformation: Matrix4.rotationZ(0.1), // This may also be overlooked
)
