Conditional Statements in Flutter Widgets

In Flutter, conditional statements are used to control the flow of a program based on certain conditions. They are essential for creating dynamic and interactive user interfaces. In this tutorial, we will explore how to use conditional statements within child attributes of Flutter widgets.

Using Ternary Operator

The ternary operator is a concise way to express simple if-else statements. It consists of three parts: the condition, the value if true, and the value if false.

child: condition ? Container() : Center()

This code will render a Container widget if the condition is true, otherwise it will render a Center widget.

Using If-Else Statements

If you need to perform more complex logic, you can use an if-else statement. However, in Dart, if-else statements are not expressions and do not return values. Therefore, you cannot pass them directly to constructor parameters.

One way to solve this problem is to use a method that returns a widget:

Widget _buildChild() {
  if (condition) {
    return Container();
  }
  return Center();
}

Widget build(BuildContext context) {
  return new Container(child: _buildChild());
}

Alternatively, you can use an if-else statement to initialize a local variable and then use that variable:

Widget build(BuildContext context) {
  Widget child;
  if (condition) {
    child = Container();
  } else {
    child = Center();
  }
  return new Container(child: child);
}

Using Builder Widget

The Builder widget is a convenient way to perform logic when building a child widget. It provides a closure that returns the child widget.

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

Using Immediate Anonymous Function

Another way to perform logic when building a child widget is to use an immediate anonymous function:

Widget build(BuildContext context) {
  return Container(child: () {
    if (value == 1) {
      return Text('tis true');
    }
    return Text('anything but true');
  }());
}

Using Collection Literals

In Dart 2.3 and later, you can use if-else statements in collection literals:

return Column(children: <Widget>[
  Text("hello"),
  if (condition)
     Text("should not render if false"),
  Text("world")
],);

This code will render the second Text widget only if the condition is true.

Using Switch Expressions

In Dart 3.0 and later, you can use switch expressions to perform pattern matching:

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

This code will render a Text widget based on the value of the task variable.

Best Practices

When using conditional statements in Flutter widgets, it’s essential to keep your code organized and easy to read. Here are some best practices:

• Use methods to perform complex logic.
• Avoid using if-else statements directly in constructor parameters.
• Use the ternary operator for simple conditions.
• Use collection literals when working with lists of widgets.

By following these guidelines, you can create dynamic and interactive user interfaces that are easy to maintain and understand.