How to change text color based on checkbox value

I want to change the text color if the checkbox is selected but I am stuck. I have a function called getTextColor that should define which color should be used depending on the text.

In that case, when the checkbox is selected, it should check if the text has an 'A' in it and, if so, apply the blue color. How to achieve this?

Here is how I am trying to build it:

class _MainScreenState extends State<MainScreen> {
  bool? dominant_A = false;

  Color getTextColor(String text) {
    var TheRightColor = Colors.black;

    if (text == 'AABB' || text == 'AaBb') {
      TheRightColor = Colors.blueAccent;
    } 

    return TheRightColor;
  }

  // Here is the structure of the checkbox
  void _onDominant_A(bool? newValue) => setState(() {
        dominant_A = newValue;

        if (dominant_A ?? true) {
          // Here should be the logic that applies the blue color to 'AABB' and 'AaBb' (both has an 'A').

        } 
      });

Here is how it's called later:

         TextSpan(
                  text: widget.result   '  ',
                  style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                    color: object.getTextColor(widget.result), // The result is the text
                    height: 2.5,
                    letterSpacing: 0.7,
                  )),

Additional information: I'm not sure if the function getTextColor needs to exist. I just put it there because I don't know how to call it later like I did in the second code.

CodePudding user response：

Instead of setting a variable for storing the right color, try assesing the right color in getTextColor() and return that to the style property of your text. This way the text color will always be recomputed everytime you setState((){})

Below is an implementation of the same. See if it helps.

class _MyHomePageState extends State<MyHomePage> {
  bool isChecked = false;
  @override
  Widget build(BuildContext context) {
    String text = "AABB";

    Color getTextColor(String textToBeAssesed) {
      if (isChecked) {
        //Logic to be checked if checkbox is clicked
        if (text == 'AABB' || text == 'AaBb') {
          return Colors.blueAccent;
        } else {
          return Colors.black;
        }
      } else {
        //Logic to be checked if checkbox is unticked
        return Colors.black;
      }
    }

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Checkbox(
              value: isChecked,
              onChanged: (value) {
                setState(() {
                  isChecked = !isChecked;
                });
              },
            ),
            Text(
              text,
              style: TextStyle(color: getTextColor(text)),
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

I haven't tested it but I believe you can use setState for this:

class _MainScreenState extends State<MainScreen> {
  bool? dominant_A = false;
  Color textSpanColor = Color(0xFFEFEFEF); //your textspan default color here

  checkText(String text){
      if (dominant_A) {
          setState(() { textSpanColor = getColor(); });
      }
  }

  Color getColor() {
      Color color = Colors.black;

      if (text == 'AABB' || text == 'AaBb') {
          color = Colors.blueAccent;
      }
  
      return color;
  }

Your textspan:

TextSpan(
    text: widget.result   '  ',
    style: TextStyle(
        fontSize: 20.0,
        fontWeight: FontWeight.bold,
        color: textSpanColor,
        height: 2.5,
        letterSpacing: 0.7,
    ),
),

Here you will pass the color when a checkbox is selected using onChanged:

Checkbox(
  ...
  value: dominant_A,
  onChanged: (bool? value) {
      setState(() {
         dominant_A = value!;
      });
      checkText(widget.result);
  },
  ...
)