In flutter, widgets such as Row
/ListView
/Stack
don't handle null children. So if we want to conditionally add widgets as children I usually do the following:
Row( children: <Widget>[ foo == 42 ? Text("foo") : Container(), ], );
But this feels weird to add an empty container.
Another solution is a where
filter :
Row( children: <Widget>[ foo == 42 ? Text("foo") : null, ].where((t) => t != null).toList(), );
This solves the empty container problem but we still have an ugly ternary and it is tiresome to write.
Is there any better solution?
EDIT:
Since Dart 2.2, new syntaxes supports this natively:
Column( children: [ if (foo != null) Text(foo), Bar(), ], );
This problem is currently debated on github here.
But for now, you can use dart sync*
functions:
Row( children: toList(() sync* { if (foo == 42) { yield Text("foo"); } }), );
where toList
is:
typedef Iterable<T> IterableCallback<T>(); List<T> toList<T>(IterableCallback<T> cb) { return List.unmodifiable(cb()); }
Not only it solves the conditional addition problem; it also allows for a "spread operator" thanks to yield*
. Example:
List<Widget> foo; Row( children: toList(() sync* { yield Text("Hello World"); yield* foo; }), );
The new Dart syntax allows 'if' in lists, which leads to this simple solution:
Row( children: <Widget>[ if (foo == 42) Text("foo"), ], );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With