Search code examples
flutterdartconditional-statementsflutter-widgetflutter-listview

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?


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