Inline conditional rendering in list

[tzvc]

Hi everyone,

I have a list of widget (Column widget) and I would like to render one of them only on condition.
I tried achieving that using a ternary operator but flutter complains about rendering a null widget.

    return Column(children: <Widget>[
      Text("hello"),
      condition ? Text("should not render if false") : null,
      Text("world")
    ],);

My question is therefore, is there a way to do inline conditional rendering in Flutter like it is possible to do in React using the logical && operator ?

Thanks :)

[Kartik1607]

This has been discussed before in #3783 issue.

For now , the optimal way is

bool notNull(Object o) => o != null;
Widget build() {
  return new Column(
    children: <Widget>[
      new Title(),
      new Body(),
      shouldShowFooter ? new Footer() : null
    ].where(notNull).toList(),
  );
}

[zoechi]

Better language support for that is work in progress dart-lang/language#47

Please consider asking support questions in one of the other channels listed at http://flutter.io/support .

[tzvc]

For the record, Dart 2.3 added the ability to use if/else statements in Collection literals. This is now done the following way:

    return Column(children: <Widget>[
      Text("hello"),
      if (condition)
         Text("should not render if false"),
      Text("world")
    ],);

[oli06]

@theochampion and the best thing about this is, that you can use it as a appending list:

    return Column(children: <Widget>[
      Text("hello"),
      if (condition) ...[
         Text("should not render if false"),
         Text("This should not render as well"),
         Text("Same for me"),
      ],
      Text("world")
    ],);

@theochampion is there any feature to add for loop in list like this if statement?

[yahya-uddin]

@princebillygk Yes.

var listOfInts = [1, 2, 3];
var listOfStrings = [
  '#0',
  for (var i in listOfInts) '#$i'
];
assert(listOfStrings[1] == '#1');

See: https://dart.dev/guides/language/language-tour#lists

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.