'How to use more than just if/else in ternary operator?

I am having trouble with writing the right syntax for this ternary operator. I want to put like three 'if statements' and one 'else statement'.

But as far as I know, the ternary operator is only working with if/else.

How to correct the mistakes in that code?

Text(
              (browns == true && blacks == true && whites == true)
              ? 'Proportion: $browns agutis : $blacks pretos : $whites albinos'
              : (yellows == true && yellows == true && blacks == true)
                  ? 'Proportion: $yellows dourados : $blacks pretos : $browns chocolates'
                  : (reds == true && yellows == true && blacks == true)
                      ? 'Proportion: $reds coloridos : $whites brancos'
                      : 'Invalid proportion',
                 
            ),

Edit (Showing more code):

body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              brownBlackWhites
                  ? 'Proportion: $browns agutis : $blacks pretos : $whites albinos'
                  : brownYellowBlack
                      ? 'Proportion: $yellows dourados : $blacks pretos : $browns chocolates'
                      :
                      // else if
                      redWhite
                          ? 'Proportion: $reds coloridos : $whites brancos'
                          // else
                          : 'Invalid proportion',
              style: TextStyle(
                  fontFamily: 'courier',
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                  height: 2.5,
                  letterSpacing: 0.7),
            ),].),),

Edit 2 (image according to the first code snippet):

flutter dart

Solution 1:^[1]

if (browns == true) same as if (browns) so you can store your conditions in three variables for more readability

    final brownBlackWhites = browns && blacks && whites;
    final yellowBlack = yellows && blacks; // I think depend on your login you should add `&& browns` 
    final redYellowBlack = reds && yellows && blacks;
    Text(
      // if
      brownBlackWhites
          ? 'Proportion: $browns agutis : $blacks pretos : $whites albinos'
          :
          // else if
          yellowBlack
              ? 'Proportion: $yellows dourados : $blacks pretos : $browns chocolates'
              :
              // else if
              redYellowBlack
                  ? 'Proportion: $reds coloridos : $blacks pretos : $browns chocolates'
                  // else
                  : 'Invalid proportion',
    )

Edit

remove dot from that line

   ),].),),

to be

 ),]),),

Edit 2

final browns = colors.where((color) => color == Colors.brown).length;
final brownBlackWhites = browns == true && blacks == true && whites == true;

here Is the problem the type of browns is int so browns == true won't work because the '==' compare two same type and this case you compare int with boolean

Solution 2:^[2]

My recommendation is to use a builder widget and make the code readable and maintainable without fighting with ternary operators. ternary operators hard to understand and maintain if there are more than one condition.

Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Builder(builder: (BuildContext context) {
          String text = '';
          if (browns == true && blacks == true && whites == true) {
            text =
                'Proportion: $browns agutis : $blacks pretos : $whites albinos';
          } else if (yellows == true && yellows == true && blacks == true) {
            text =
                'Proportion: $yellows dourados : $blacks pretos : $browns chocolates';
          } else if (reds == true && yellows == true && blacks == true) {
            'Proportion: $reds coloridos : $whites brancos';
          } else {
            text = 'Invalid proportion';
          }
          return Text(
            text,
            style: TextStyle(
                fontFamily: 'courier',
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
                height: 2.5,
                letterSpacing: 0.7),
          );
        })
      ],
    ),

Solution 3:^[3]

This is the Example of using Two or many conditions in Ternary Operator

const isValue = (_value) => _value > 100 ? "Greater Than 100" : _value < 100 ? "Lower Than 100" : "Equal to 100";

console.log(isValue(120)) // Output => Greater Than 100

console.log(isValue(50)) // Output => Lower Than 100

console.log(isValue(100)) // Output => Equal to 100

enter image description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2
Solution 3	Jai Rawat

'How to use more than just if/else in ternary operator?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]