Is it safe to have a Widget class that returns a widget conditionally?

Question

Quite often I only want to draw a Widget based on a condition.

For example, I may be creating a component that displays a FadeIn.image but the image: may not be set in the CMS. In this case I want to ignore drawing the FadeIn.image and just return an empty container.

for context, I had done,

child: (someValue == null) ? new Container() : new LabelComponent(label: myStringLabel)

But this broke hot reload and I needed to replace with, child: _createLabelComponent(myStringLabel),

Widget _createLabelComponent(String label)
{
  if(label == null) {
      return new Container();
    } else {
      return new LabelComponent(label: label) 
    }
}

Is the below safe to work and will not break hot reload? It seems to work at the moment but before I replace all my conditions with this Widget, I'd like some more feedback.

class ConditionalWidget extends StatefulWidget {

  final bool condition;
  final Widget conditionalWidget;

  ConditionalWidget(this.condition, this.conditionalWidget, {Key key});

  @override
  State createState() => new ConditionalWidgetState();

}

class ConditionalWidgetState extends State<ConditionalWidget> {

  ConditionalWidgetState();

  @override
  void initState()
  {
    super.initState();
  }

  @override
  Widget build(BuildContext context)
  {
    if(widget.condition) {
      return widget.conditionalWidget;
    } else {
      return new Container();
    }
  }
}

It's safe as long as it returns a widget. It's common to conditionaly return different widgets. — Günter Zöchbauer, Jan 15 '19 at 04:07
Your first code seems fine too. Maybe get rid of the parenthesis like this: child: someValue == null ? new Container() : new LabelComponent(label: myStringLabel) — dshukertjr, Jan 15 '19 at 04:29
@GünterZöchbauer that is interesting. I was reading a thread on the reddit.com/r/flutterdev where someone mentioned ternary operators would break hot reload so I have been moving all my conditional code to functions. This did seem to stabilise the hot reload functionality using Intelli J and TBH it's a bit tidier, but a whole heap more code that essentially does the same thing - check a value and if null return a new Container() — Flutter_say_what, Jan 15 '19 at 19:38
There is a SO question about "functional widgets" where this is discussed. Only on my phone so no link. — Günter Zöchbauer, Jan 15 '19 at 19:50
I'm sure I've read that and just did had quick look again but nothing returned when looking for 'functional widgets' but I found this https://stackoverflow.com/questions/49713189/how-to-use-conditional-statement-within-child-attribute-of-a-flutter-widget-cen which is about conditional widgets. I am trying to solve hot reload problems rather than the best way to write conditional statements. Ternary would be the most efficient but as on a widget with too many, hot reload halts at 'Syncing files to device....' — Flutter_say_what, Jan 15 '19 at 20:05

score 0 · Answer 1 · answered Jan 15 '19 at 08:12

Nothing magic here, child is a property of a Container class: it is safe to use whatever expression returns a widget for child property, obviously also conditional expressions condition ? expr1 : expr2.

If hot reload in broken check for other causes.

For example your code that break hot reload:

child: (someValue == null) ? new Container() : new LabelComponent(label: myStringLabel)

uses someValue and myStringLabel, whereas in _createLabelComponent there is only a label variable.

score 0 · Answer 2 · answered Oct 26 '21 at 11:31

class StatmentExample extends StatelessWidget {
  Widget build(BuildContext context) {
    return Text((() {
      if(true){
        return "tis true";}

      return "anything but true";
    })());
  }
}

wrap your statements in a function

(() {
  // your code here
}())

Is it safe to have a Widget class that returns a widget conditionally?

2 Answers2