Are there IF conditions in child widgets without the ELSE part to hide widgets?

[Michael Büchele]

Hi guys,

I try to hide widgets based on state variables, but all I can find are "if/else" conditional-operators like this:

actions: <Widget>[
  _someBoolean ? new IconButton(
    icon: new Icon(Icons.person_add),
  ) : new IconButton(
    icon: new Icon(Icons.cancel),
  ),

]

What I try to achieve is to simply hide widgets based on a single "if" condition, something like this:

actions: <Widget>[
  if(_someBoolean){ new IconButton(
    icon: new Icon(Icons.person_add),
  )},

  if(_someOtherBoolean){ new IconButton(
    icon: new Icon(Icons.cancel),
  )},

]

Using "null" as the else-part will throw an error.

In returned widgets (that ones with "return in front"), I can use IF without problems, but that doesn't work in child widgets.  

Is there any concept like this that works in child widgets?

Do I miss something in general (flutter is new to me)?

Any help or a link to some documentation would be helpful :)

Thanks a lot,

Mike

[Kris Giesing]

I think you can move the conditional outside of the declaration of the widget list, and provide an empty list in the else - something like this:

actions: _someBoolean ? <Widget>[ new IconButton(
    icon: new Icon(Icons.person_add),
  ) ] : <Widget>[],

(Caveat: I haven't tested this code myself.)

Alternatively you could put the conditional outside the declaration of whatever widget is taking the 'actions' parameter, and not provide that parameter at all in the else case.

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Jonah Williams]

Hi Mike,

In cases where you are conditionally adding a widget to a child list, I would recommend first creating a list, then conditionally adding widgets to it, then finally passing it to another widget.  For example,

```
List<Widget> children = [];
if (someCondition) {
  children.add(new Something());
}
if (otherCondition) {
  children.add(new Otherthing());
}
return new Column(children: children);
```

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev+unsubscribe@googlegroups.com.

[Ralph Bergmann]

I'm not sure if it is the best way but sometimes I do the following:

someBoolean
? new IconButton(...)
: new Offstage()



Ralph

[Momsenmeister]

Thanks for the quick answers.

Unfortunately, I don't really understand these solutions.

I have a widget tree that should contain all the possible widgets right from the beginning.

Then by only changing the boolean variables, the state of the widget tree should adapt according to the conditions.

Is there no proper "Flutter-way"?

Something like this would be nice :)

new IconButton(

    icon: new Icon(Icons.person_add),
    show: _someBoolean,

  ),

new IconButton(

    icon: new Icon(Icons.cancel),
    show: _someOtherBoolean,

  )

[Mikkel Ravn]

The Opacity widget might be useful, if you want the hidden widget to take up its usual layout space, but just not be drawn:

Opacity(

  opacity: _someBoolean ? 1.0 : 0.0,

  child: someWidget

)

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Mikkel Nygaard Ravn

Software Engineer

[Ralph Bergmann]

Am 15.06.18 um 22:17 schrieb Momsenmeister:

> I have a widget tree that should contain all the possible widgets right
> from the beginning.

nope. It should contain all widget for the current state. And if the
state changes (your boolean value changes for example) the tree will be
rebuilt.

If you don't want to rebuild the whole tree (because it is a huge tree
for example) you can use FutureBuilder
(https://docs.flutter.io/flutter/widgets/FutureBuilder-class.html) or
StreamBuilder
(https://docs.flutter.io/flutter/widgets/StreamBuilder-class.html).

There was a where interesting talk at this years I/O about state
handling in Flutter -> https://www.youtube.com/watch?v=RS36gBEp8OI


Ralph

[Kris Giesing]

To elaborate on this...

There's a key difference between Flutter Widgets and the UI element objects you'd work with in some other systems, e.g. Android View objects. Flutter Widgets are lightweight, often ephemeral objects that don't represent the same resource-ownership that Android Views do. Rather, they are simple, (usually) stateless configuration objects[1], meant to be cheap to manufacture. Thus, when state changes, it's relatively straightforward to regenerate the whole set of widgets that you need for the desired presentation of the new state.

The talk goes into this in a lot more detail, but the above may help establish some context for previous answers.

[1] The persistent state that widgets configure takes a few different forms, but one of the more common ones is RenderObject, which is perhaps most similar to e.g. DOM elements in web development.

[Momsenmeister]

OK thanks guys.

I think the solution, that fits best for me is using the Opacity Widget or showing an empty Container in the "else"-part.

Would be great if there was an easier way in the future...

[Denis Bakhtin]

There was a workaround on the forums, which I use in my projects:

<Widget>[

  ....

  somecondition ? new IconButton(...) : null,

  ....
].where(notNull).toList()

Where notNull function is:

bool notNull(Object o) => o != null;

[Satya]

Hi ,

How to navigate to another screen from Material app context using Navigator?

Regards,

K.Satya.

--

You received this message because you are subscribed to the Google Groups "Flutter Dev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev+unsubscribe@googlegroups.com.