Flutter null safety conditional widget

Question

Before Flutter introduced the null-safety feature, I was able to conditionally add Widgets within a list like so:

actions: <Widget>[
  canCancel
    ? CupertinoDialogAction(
        child: Text(cancelActionText),
           onPressed: () {
             Navigator.pop(context);
           },
      )
    : null,
].where(notNull).toList()

notNull being a homemade filter that filters off the null objects...

Now with null-safety it's impossible because the list of Widgets strictly has to be non-null. What would be a better approach?

add ? on canCancel so allows to have null – flakerimi Apr 12 '21 at 18:44 — flakerimi, Apr 12 '21 at 18:44

YoBo · Accepted Answer · 2021-04-13T03:57:21.140

14

Just use if inside the List:

<Widget>[ 
   if (true) Widget(), 
]

Example with your code:

actions: <Widget>[
  if (canCancel)
    CupertinoDialogAction(
        child: Text(cancelActionText),
           onPressed: () {
             Navigator.pop(context);
           },
      ),
]

edited Apr 13 '21 at 03:57

answered Apr 12 '21 at 19:09

YoBo

2,292
3
9
25

Wow is that something "new" you can do in Flutter? Didn't know about this! – Scaraux Apr 12 '21 at 20:00
1

@Scaraux Not really. It was something like Dart 2.5 or 2.6 or something. It's called a "collection if". – Christopher Moore Apr 12 '21 at 21:34

J. S. · Answer 2 · 2021-04-14T19:02:32.420

4

Just replace your null with an empty, size zero, SizedBox.

SizedBox(width: 0, height: 0)

Or as suggested in comments:

SizedBox.shrink()

edited Apr 14 '21 at 19:02

answered Apr 12 '21 at 18:55

J. S.

8,905
2
34
44

2

`SizedBox.shrink()` is the proper named constructor to achieve this. – YoBo Apr 12 '21 at 19:16

score 2 · Answer 3 · answered Apr 12 '21 at 21:52

As YoBo suggested, using collection-if is the better approach here, but if for some reason you need to be able to store nulls in a List and filter them out later (or if you just prefer your existing style), you can:

Change your List type to allow nullable elements. That is, use <Widget?>[] instead of <Widget>[].
Use Iterable.whereType with a non-nullable type to filter out null values.

actions: <Widget?>[
  canCancel
    ? CupertinoDialogAction(
        child: Text(cancelActionText),
           onPressed: () {
             Navigator.pop(context);
           },
      )
    : null,
].whereType<Widget>().toList();

This is a valid answer as well. I don't need to have null in the list though, the end goal was to conditionally insert the widget in a declarative manner. Thanks! — Scaraux, Apr 13 '21 at 16:07

score 1 · Answer 4 · answered Apr 15 '21 at 15:57

if is not new as it was added in Dart 2.3 a few years ago. Even before null-safety, you were not allowed to return a null for a widget. You might not see a compile-time warning before NNBD, but it is a runtime error.

As I mentioned in this answer (although that answer isn't for your case), you can use if condition or even ternary operator like this:

Column(
  children: [
    if (condition) Text(''),
    condition ? Text('') : Container(),
  ],
)

Flutter null safety conditional widget

4 Answers4