How to conditionally add widgets to a list?

Question

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?

Answer 1

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?

Answer 2

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?

Answer 3

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?

Answer 4

 Row( children: [ if (_id == 0) ...[ Container() ] else if(_id == 1)...[ Text("Hello") ] else ...[ SizedBox(width: 20) ], ], ),