Changing Text Color onTap, Flutter

Question

I am an android developer new to flutter and i am trying to create 3 grey text widgets where when a user clicks one, the clicked one becomes blue while the others remain grey. This is the code i currently have

Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: const <Widget>[

                  InkWell(
                    child: Text('Click 3',
                        style: TextStyle(
                          color: Colors.indigo,
                          fontSize: 15.0,
                          fontWeight: FontWeight.bold,
                        )),
                    onTap: () => Colors.blue,
                  ),




                  InkWell(
                    child: Text('Click 2',
                        style: TextStyle(
                          color: Colors.indigo,
                          fontSize: 15.0,
                          fontWeight: FontWeight.bold,
                        )),
                    onTap: () => Colors.blue,
                  ),


                  InkWell(
                    child: Text('Click 3',
                        style: TextStyle(
                          color: Colors.indigo,
                          fontSize: 15.0,
                          fontWeight: FontWeight.bold,
                        )),
                    onTap: () => Colors.blue,
                  ),
                ],
              ),

Also whatever i put in onTap() i get the error that says

invalid constant value

score 1 · Accepted Answer · answered Oct 16 '21 at 17:53

You should create three separate variables for each button's color and then remove the const keyword in Row,

Color firstColor = Colors.indigo;
Color secondColor = Colors.indigo;
Color thirdColor = Colors.indigo;
...
Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[  /// remove const keyword
    InkWell(
      child: Text('Click 3',
        style: TextStyle(
          color: firstColor,
          fontSize: 15.0,
          fontWeight: FontWeight.bold,
        ),
      ),
      onTap: (){
        setState((){
          firstColor=Colors.blue;
        });
      },
    ),
    InkWell(
      child: Text('Click 2',
        style: TextStyle(
          color: secondColor,
          fontSize: 15.0,
          fontWeight: FontWeight.bold,
        ),
      ),
      onTap: (){
        setState((){
          secondColor=Colors.blue;
        });
      },
    ),
    InkWell(
      child: Text('Click 3',
        style: TextStyle(
        color: thirdButton,
        fontSize: 15.0,
        fontWeight: FontWeight.bold,
        ),
      ),
      onTap: (){
        setState((){
          thirdColor=Colors.blue;
        });
      },
    ),
  ],
),

thank you very much, with your quite clear explanation and example, i have not only managed to implement the the feature i wanted, but also managed to implement other functions similar — Tinovimba Mawoyo, Oct 16 '21 at 18:32

Changing Text Color onTap, Flutter

1 Answers1