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

In Flutter, you can use conditional statements like if/else, switch, and others directly in your widget’s code. This is especially useful when you have complex conditions that need to be evaluated before rendering the UI.

Using a Builder Widget

You can use a Builder widget to create a conditional statement within the child attribute of another widget. Here’s an example:

Widget build(BuildContext context) {
  return Container(
    child: Builder(
      builder: (context) {
        if (true)
          return "This is true";
        return "Anything but true";
      },
    ),
  );
}

This code will render either “This is true” or “Anything but true” based on the condition.

Using an Immediate Anonymous Function

You can also use an immediate anonymous function to create a conditional statement. Here’s an example:

Widget build(BuildContext context) {
  return Container(
    child: () {
      if (value == 1) {
        return Text('This is true');
      }
      return Text('Anything but true');
    }(),
  );
}

This code will also render either “This is true” or “Anything but true” based on the condition.

Using the Ternary Operator

You can use the ternary operator to create a conditional statement in one line. Here’s an example:

condition ? Text("True") : null,

This code will render either Text("True") or null based on the condition.

Using If or For Statements or Spread Operators in Collections

You can use if/else, for, and spread operators to create conditional statements within the child attribute of a widget. Here’s an example:

children: [
  ...manyItems,
  oneItem,
  if (canIKickIt)
    ...kickTheCan
  for (item in items)
    Text(item)
]

This code will render either multiple widgets or individual widgets based on the conditions.

Using a Method

You can create a method to handle complex conditional statements. Here’s an example:

Widget getWidget() {
  if (x > 5) ...
  // More logic here and return a widget
}

This code will call the getWidget() method to determine which widget to render.

New with Dart 3.0: If-Case & Switch Expressions

Dart 3.0 introduces new functionality like if-case and switch expressions, allowing you to use pattern matching, destructuring, and guard clauses within your conditional statements. Here’s an example:

child: switch (task) {
  Task_completed(date): Text("Completed on $date"),
  Task_overdue(priority): Text("$priority"),
},

This code will render either a Text widget with the completion date or the overdue priority based on the condition.

New with Dart 3.0: If-Case Expressions

You can use if-case expressions to create conditional statements with multiple conditions. Here’s an example:

return ListView(children: [
  Text('header'),
  if (pair case [int x, int y]) // 
    Text('Coordinates: ($x, $y)') // 
  else
    Text('No coordinates given'),
]);

This code will render either a Text widget with the coordinates or “No coordinates given” based on the condition.

If/Else Statements in Children

You can use if/else statements to create conditional statements within the child attribute of a widget. Here’s an example:

Column(
  children: [
    if (_selectedIndex == 0) ...[
      DayScreen(),
    ] else ...[
      StatsScreen(),
    ],
  ],
)

This code will render either DayScreen() or StatsScreen() based on the condition.

If/Else If Statements in Children

You can use if/else if statements to create conditional statements with multiple conditions. Here’s an example:

Column(
  children: [
    if (_selectedIndex == 0) ...[
      DayScreen(),
    ] else if (_selectedIndex == 1) ...[
      StatsScreen(),
    ],
  ],
)

This code will render either DayScreen(), StatsScreen(), or no widgets based on the conditions.

Multiple Widgets Example in Children

You can use if/else statements to create conditional statements with multiple conditions and render multiple widgets. Here’s an example:

Column(
  children: [
    if (_selectedIndex == 0) ...[
      DayScreen(),
      AboutScreen(),
      InfoScreen(),
    ] else if (_selectedIndex == 1) ...[
      HomeScreen(),
      StatsScreen(),
    ],
  ],
)

This code will render either multiple widgets or individual widgets based on the conditions.