Ternary operator is the only available operator which handles 2 operands. Ternary conditional operator has 2 code execution sides and each will be know as True block and False Block. Ternary operator works on condition and returns result in True False Boolean format. If the condition is True then it will execute the first code block and if the condition is false then it will execute the second code block. Ternary operator takes 3 arguments and based upon first argument it will returns us True and False by comparing condition passed in first argument. So in this tutorial we would learn about How to Use Ternary Conditional Operator in Dart Flutter Example.
Contents in this project How to Use Ternary Conditional Operator in Dart Flutter Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method and now we would call our main MyApp class here.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main MyApp class extends with StatelessWidget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
4. Creating 3 variables named as a, b and c. We would use these variables to compare condition in Ternary operator.
|
1 2 3 4 5 |
int a = 20 ; int b = 30 ; bool c = true ; |
5. Creating a function named as checkWithCondition() and checkWithBoolean() function. According to given condition in the Ternary operator will execute a part of expression. See the below screenshot for more detailed explanation.
Explanation: If the condition part is true then it will execute the Expression-1 block. If the condition part is false then it will execute the Expression-2 block.
|
1 2 3 4 5 6 7 8 9 10 |
void checkWithCondition() { (a>b) ? print('A is Big') : print('B is Big') ; } void checkWithBoolean(){ c ? print('C is True') : print('C is False'); } |
6. Creating Widget Build area in MyApp class. Now we would make 2 Raised Button widgets and call above 2 function on button onPress event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( margin: const EdgeInsets.fromLTRB(20, 0, 20, 0), child: RaisedButton( onPressed: () => checkWithCondition(), child: Text('Call Ternary Operator With Condition'), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), Container( margin: const EdgeInsets.fromLTRB(20, 0, 20, 0), child: RaisedButton( onPressed: () => checkWithBoolean(), child: Text('Call Ternary Operator With Boolean Value'), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), ]) ) ) ); } |
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { int a = 20 ; int b = 30 ; bool c = true ; void checkWithCondition() { (a>b) ? print('A is Big') : print('B is Big') ; } void checkWithBoolean(){ c ? print('C is True') : print('C is False'); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( margin: const EdgeInsets.fromLTRB(20, 0, 20, 0), child: RaisedButton( onPressed: () => checkWithCondition(), child: Text('Call Ternary Operator With Condition'), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), Container( margin: const EdgeInsets.fromLTRB(20, 0, 20, 0), child: RaisedButton( onPressed: () => checkWithBoolean(), child: Text('Call Ternary Operator With Boolean Value'), textColor: Colors.white, color: Colors.green, padding: EdgeInsets.fromLTRB(12, 12, 12, 12), ) ), ]) ) ) ); } } |
Screenshots:
