How to use conditional statement within child attribute of a Flutter Widget Center Widget

Question

So far whenever I needed to use a conditional statement within a Widget I have done the following  Using Center and Containers as simplified dummy examples     new Center    child  condition    true   new Container     new Container       Though when I tried using an if else statement it would lead to an Dead code warning   new Center    child       if condition    true         new Container         else        new Container              Interestingly enough I tried with a switch case statement and it gives me the same warning and thus I cannot run the code  Am I doing something wrong or is it so that one cannot use if else or switch statements without flutter thinking there is dead code

User · Answer

In such a case I would recommand using the ternary operator:

child: condition ? Container() : Center()

and try to avoid code of the form:

if (condition) return A else return B

which is needlessly more verbose than the ternary operator.

But if more logic is needed you may also:

Use the Builder widget

The Builder widget is meant for allowing the use of a closure when a child widget is required:

A platonic widget that calls a closure to obtain its child widget.

It is convenient anytime you need logic to build a widget, it avoids the need to create a dedicated function.

You use the Builder widget as the child, you provide your logic in its builder method:

Center(
  child: Builder(
    builder: (context) {
      // any logic needed...
      final condition = _whateverLogicNeeded();
      
      return condition
          ? Container();
          : Center();
    }
  )
)

The Builder provides a convenient place to hold the creational logic. It is more straightforward than the immediate anonymous function proposed by atreeon.

Also I agree that the logic should be extracted from the UI code, but when it's really UI logic it is sometimes more legible to keep it there.

User · Answer

Aside from the ternary operator  you can also use Builder widget if you have operation needs to be performed before the condition statement  Container    child  Builder builder   context             some operation here          if someCondition           return Text  A                else return Text  B

User · Answer

With a button bool  paused   false   CupertinoButton    child   paused   Text  Play     Text  Pause      color  Colors blue    onPressed           setState             paused     paused

User · Answer

You can also use conditions by using this method        int  moneyCounter   0    void  rainMoney        setState             moneyCounter     100               new Expanded            child  new Center              child  new Text      moneyCounter                 style new TextStyle                color   moneyCounter  gt  1000   Colors blue   Colors amberAccent                fontSize  47                fontWeight  FontWeight w800

User · Answer

This is great article and conversation   I tried to use the ternary operator as described   But the code didn t work resulting in an error as mentioned   Column children    condition  Text  True    null        The ternary example above is miss leading   Dart will respond with an error that a null was returned instead of widget   You can t return null   The correct way will be to return a widget   Column children    condition  Text  True    Text  false           In order for the ternary to work you need to return a Widget  If you don t want to return anything you can return a empty container   Column children    condition  Text  True    Container           Good luck

User · Answer

Only if vibrating widget if bool   true  Container   child            OR  if bool   true  Container   child          else new Container child  lalala

User · Answer

child  Container     child  isFile    true                Image network pathfile  width  300  height  200  fit  BoxFit cover                 Text message subject toString    style  TextStyle color  Colors white

User · Answer

Actually you can use if else and switch and any other statement inline in dart   flutter  Use an immediate anonymous function class StatmentExample extends StatelessWidget     Widget build BuildContext context        return Text             if true           return  quot tis true quot           return  quot anything but true quot                     ie wrap your statements in a function            your code here       I would heavily recommend against putting too much logic directly with your UI  markup  but I found that type inference in Dart needs a little bit of work so it can be sometimes useful in scenarios like that  Use the ternary operator condition   Text  quot True quot     null   Use If or For statements or spread operators in collections children         manyItems    oneItem    if canIKickIt         kickTheCan   for  item in items      Text item   Use a method child  getWidget    Widget getWidget       if  x  gt  5          more logic here and return a Widget  Redefine switch statement As another alternative to the ternary operator  you could create a function version of the switch statement such as in the following post https   stackoverflow com a 57390589 1058292    child  case2 myInput          1  Text  quot Its one quot        2  Text  quot Its two quot         Text  quot Default quot

User · Answer

if you use a list of widgets you can use this   class HomePage extends StatelessWidget     bool notNull Object o    gt  o    null     override   Widget build BuildContext context        var condition   true      return Scaffold        appBar  AppBar          title  Text  Provider Demo                   body  Center            child  Column          children   lt Widget gt             condition  Text  True    null            Container              height  300              width  MediaQuery of context  size width              child  Text  Test                         where notNull  toList

User · Answer

I found out that an easy way to use conditional logic to build Flutter UI is to keep the logic outside of the UI  Here is a function to return two different colors   Color getColor int selector      if  selector   2    0        return Colors blue      else       return Colors blueGrey          The function is used below to to set the background of the CircleAvatar   new ListView builder    itemCount  users length    itemBuilder   BuildContext context  int index        return new Column        children   lt Widget gt           new ListTile            leading  new CircleAvatar              backgroundColor  getColor index               child  new Text users index  name 0                          title  new Text users index  login             subtitle  new Text users index  name                      new Divider height  2 0                             Very neat as you can reuse your color selector function in several widgets

User · Answer

Here is the solution  I have fixed it  Here is the code  child   status data index   status      Widget  status status      if  status     3         return Text  Process        else if status     1         return Text  Order        else       return Text  Waiting

User · Answer

I personally use if else statement in children with this kind of block statement  It only supports on Dart version 2 3 0 above   if   else  Column      children            if   selectedIndex    0                 DayScreen              else                StatsScreen                            if   else if  Column      children            if   selectedIndex    0                 DayScreen              else if  selectedIndex    1                StatsScreen

User · Answer

In flutter if you want to do conditional rendering  you may do this  Column     children   lt Widget gt        if  isCondition    true          Text  The condition is true               But what if you want to use a tertiary  if-else  condition  when the child widget is multi-layered  You can use this for its solution flutter conditional rendering a flutter package which enhances conditional rendering  supports if-else and switch conditions  If-Else condition  Column        children   lt Widget gt           Conditional single            context  context            conditionBuilder   BuildContext context    gt  someCondition    true            widgetBuilder   BuildContext context    gt  Text  The condition is true               fallbackBuilder   BuildContext context    gt  Text  The condition is false                                 Switch condition  Column        children   lt Widget gt           ConditionalSwitch single lt String gt             context  context            valueBuilder   BuildContext context    gt   A             caseBuilders                 A    BuildContext context    gt  Text  The value is A                  B    BuildContext context    gt  Text  The value is B                            fallbackBuilder   BuildContext context    gt  Text  None of the cases matched                                 If you want to conditionally render a list of widgets  List lt Widget gt   instead of a single one  Use Conditional list   and ConditionalSwitch list

User · Answer

You can use ternary operator for conditional statements in dart  It s use is simple  condition    statement1   statement2  if the condition is true then the statement1 will be executed otherwise statement2  Taking a practical example Center child  condition   Widget1     Widget2     Remember if you are going to use null as Widget2 it is better to use SizedBox shrink   because some parent widgets will throw an exception after getting a null child

User · Answer

In Dart  if else and switch are statements not expressions  They don t return a value so you can t pass them to constructor params  If you have a lot of conditional logic in your build method  then it is a good practice to try and simplify it   For example  you can move self-contained logic to methods  and use if else statements to initialize local variables which you can later use   Using a method and if else  Widget  buildChild       if  condition        return           return        Widget build BuildContext context      return new Container child   buildChild         Using an if else  Widget build BuildContext context      Widget child    if  condition        child           else       child             return new Container child  child

User · Answer

Lol after months of using    I just find out that I can use this  Column       children           if  true  Text  true   else Text  false

User · Answer

You can simply use a conditional statement a  b c d  For example    Container    color  Colors white    child    condition       Widget1          Widget2          I hope you got the idea   Suppose if there is no else condition you can use a SizedBox shrink    Container        color  Colors white        child    condition            Widget1               SizedBox shrink           If it is a column no need to write    operator  Column   children   lt Widget gt     if  condition       Widget1

User · Answer

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   lt Widget gt     Text  hello      if  condition       Text  should not render if false      Text  world          Flutter Issue  28181 - Inline conditional rendering in list

User · Answer

Another alternative  for  switch s  like statements  with a lot of conditions  I like to use maps    return Card          elevation  0          margin  EdgeInsets all 1           child  conditions widget coupon  widget coupon status                  throw ArgumentError  invalid status        conditions Coupon coupon    gt          Status added new  CheckableCouponTile coupon code         Status redeemed  SimpleCouponTile coupon code         Status invalid  SimpleCouponTile coupon code         Status valid not redeemed  SimpleCouponTile coupon code            It s easier to add remove elements to the condition list without touch the conditional statement    Another example   var condts       0  Container      1  Center      2  Row      3  Column      4  Stack        class WidgetByCondition extends StatelessWidget     final int index    WidgetByCondition this index      override   Widget build BuildContext context        return condts index

User · Answer

In my app I created a WidgetChooser widget so I can choose between widgets without conditional logic  WidgetChooser        condition  true        trueChild  Text  This widget appears if the condition is true           falseChild  Text  This widget appears if the condition is false             This is the source for the WidgetChooser widget  import  package flutter widgets dart    class WidgetChooser extends StatelessWidget     final bool condition    final Widget trueChild    final Widget falseChild     WidgetChooser   required this condition   required this trueChild   required this falseChild        override   Widget build BuildContext context        if  condition          return trueChild        else         return falseChild

[dart] How to use conditional statement within child attribute of a Flutter Widget (Center Widget)

Use the Builder widget

Examples related to dart

Examples related to flutter