CODEWITHSUNDEEP
flutterdartconditional-statementsflutter-widgetflutter-listview
Rémi Rousselet
Rémi Rousselet

Reputation: 276957

How to conditionally add widgets to a list?

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?

Upvotes: 53

Views: 24290

Answers (4)

Hardik Hirpara
Hardik Hirpara

Reputation: 3016

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

Upvotes: 8

vovahost
vovahost

Reputation: 35997

Here's a simpler version I use:

Row(
  children: [
    Text("always included"),
    skipNulls([
      icon,
      label,
    ]),
  ],
);

skipNulls<T>(List<T> items) {
  return items..removeWhere((item) => item == null);
}

Upvotes: 4

R&#233;mi Rousselet
R&#233;mi Rousselet

Reputation: 276957

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

Upvotes: 94

G. Marc
G. Marc

Reputation: 5997

The new Dart syntax allows 'if' in lists, which leads to this simple solution:

Row(
  children: <Widget>[
    if (foo == 42) Text("foo"),
  ],
);

Upvotes: 7

Related Questions