How to change the color of result text dynamically by adding if-else statement? currently I am not able to add if-else inside text widget

Issue

This is where I’m sending the result texts to Result class:

calculateButton(
                    btnColor: _BtnColor,
                    txtColor: Colors.white,
                    text: buttonText,
                    width: ScreenUtil().screenWidth,
                    height: 0.06.sh,
                    size: 21.0.ssp,
                    callback: () {
                      BMILogic calculate = BMILogic(height: height, weight: weight);

                      Navigator.push(context, MaterialPageRoute(
                          builder: (context) => BMIResult(
                            bmiResult: calculate.calculateBMI(),
                            bmiDisplay: calculate.displayBMIinText(),
                            bmiInText: calculate.printResult(),
                          )));
                    }
                ),

To the Result screen I’m sending the above code:
Result Class:

Container(
                  color: _Containercolor,
                  width: ScreenUtil().screenWidth,
                  height: 0.6.sh,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      text(text1: bmiDisplay, size: 22.ssp,
                          if(bmiDisplay == "Overweight"){ // here for 'if' it is dispaying as Expected an identifier. Expected to find ')'
                            color: _red,
                            }
                          ),
                      text(text1: bmiResult, size: 44.ssp, color: _white),
                      text(text1: bmiInText, size: 22.ssp, color: _white)
                    ],
                  ),
                )

This is where I have defined the Logic:

class BMILogic{

  final int height;
  final int weight;
  double _bmi;

  BMILogic({this.height, this.weight});

  String calculateBMI() {
    _bmi =  weight / pow( height / 100, 2);
    return _bmi.toStringAsFixed(1);
  }

  String displayBMIinText(){
    return (_bmi >= 25) ? "Overweight"
        : (_bmi > 18.5) ? "Normal"
        : "Underweight" ;
  }

  String printResult(){
    if (_bmi >= 25){
      return 'You have a higher than normal body weight. Try to avoid carbs, sugar and exercise more.';
    }else if (_bmi >= 18.5) {
      return 'You have a normal body weight. Maintain the same, Good job!';
    } else {
      return 'You have a lower than normal body weight. Eat a bit more and exercise.';
    }
  }
}

I need to change the text color based on overweight, underweight, and normal weight. How can I achieve this, this is the last part of the app I’m stuck with. Please look into the code.

Solution

Simple solution would be using a ternary operator inside your code:

color: bmiDisplay == 'Overweight'? Colors.red : bmiDisplay == 'Underweight'?  Colors.yellow : Colors.green

Answered By – Simon Sot

Answer Checked By – David Marino (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *