A widget that simplifies the syntax for deeply nested widget trees.
Motivation
Widgets tend to get pretty nested rapidly. It's not rare to see:
MyWidget(
child: AnotherWidget(
child: Again(
child: AndAgain(
child: Leaf(),
)
)
)
)That's not very ideal.
There's where nested propose a solution.
Using nested, it is possible to flatten the previous tree into:
Nested(
children: [
MyWidget(),
AnotherWidget(),
Again(),
AndAgain(),
],
child: Leaf(),
),That's a lot more readable!
Usage
Nested relies on a new kind of widget: SingleChildWidget, which has two
concrete implementation:
These are SingleChildWidget variants of the original Stateless/StatefulWidget.
The difference between a widget and its single-child variant is that they have
a custom build method that takes an extra parameter.
As such, a StatelessWidget would be:
class MyWidget extends StatelessWidget {
MyWidget({Key key, this.child}): super(key: key);
final Widget child;
@override
Widget build(BuildContext context) {
return SomethingWidget(child: child);
}
}Whereas a SingleChildStatelessWidget would be:
class MyWidget extends SingleChildStatelessWidget {
MyWidget({Key key, Widget child}): super(key: key, child: child);
@override
Widget buildWithChild(BuildContext context, Widget child) {
return SomethingWidget(child: child);
}
}This allows our new MyWidget to be used both with:
MyWidget(
child: AnotherWidget(),
)and to be placed inside children of [Nested] like so:
Nested(
children: [
MyWidget(),
...
],
child: AnotherWidget(),
)