Conditional (Ternary) Operator in Dart and Flutter

Last updated on May 18, 2021 Guest Contributor Loading... Post a comment

This article is a deep dive to Conditional (ternary) operator in Dart and Flutter.

The Basic

The conditional (ternary) operator is the only Dart operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy.

The syntax:

condition ? exprIfTrue : exprIfFalse

Where:

  • condition: An expression whose value is used as a condition.
  • exprIfTrue: An expression which is evaluated if the condition evaluates to a truthy value (one which equals or can be converted to true).
  • exprIfFalse: An expression which is executed if the condition is falsy (that is, has a value which can be converted to false).

Examples

String message(bool isValid) {
  return isValid ? 'This is valid' : 'This is not valid';
}

void main() {
  print(message(true));
}
Center(
        child: isLogin ? Text('You are a member') : Text('Hello Guest'),
),

Conditional chains

The ternary operator is right-associative, which means it can be “chained” to check multiple conditions in turn.

The syntax:

condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : condition4 ? value4
         : condition5 ? value5 // and so on
         : valueN;

Example:

int age = 30;
String output = age < 1 ? 'Infrant'
      : age < 4 ? 'Baby' 
      : age < 12 ? 'Middle Childhood'
      : age < 18 ? 'Adolescence'
      : 'Grown Up';
print(output);

Null Checking Expression

This expression uses double-question-mark and can be used to test for null.

The syntax:

expr1 ?? expr2

If expr1 is non-null, returns its value; otherwise, evaluates and returns the value of expr2.

Example:

// Flutter
Center(
        child: Text(name ?? 'No Name Found'),
),

Ternary operator vs If-else statement

The conditional expression condition ? expr1: expr2 has a value of expr1 or expr2 while an if-else statement has no value. A statement often contains one or more expressions, but an expression can’t directly contain a statement.

There are some things that you can do with the ternary operator but can’t do with if-else. For example, if you need to initialize a constant or reference:

const int number = (some conditions) ? 100 : 1;

Writing Concise Code

In the vast majority of cases, you can do the same thing with a ternary operator and an if-else statement. However, using ? : helps us avoid redundantly repeating other parts of the same statements/function-calls, for example:

if (someCondition)
    return x;
else
    return y;

Compare with:

return condition ? x : y;

Conclusion

You’ve learned the fundamentals of using conditional expressions when programming in Dart. Continue exploring more new and interesting stuff by taking a look at the following articles: Sorting Lists in Dart and Flutter (5 Examples)Flutter and Firestore Database: CRUD exampleUsing GetX (Get) for State Management in FlutterUsing GetX (Get) for Navigation and Routing in FlutterFlutter & Dart: Get File Name and Extension from Path/URL.

You can also take a tour around our Flutter topic page, or Dart topic page for the latest tutorials and examples.

Related Articles

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x