How to change the color of the selected text of elevated button in Flutter?

Question

I want to change the color of the text in the elevated button when they are selected from black to white. For now, if I select any option from these elevated buttons, the background color changes, but there is no change in the text color. But I want to change the text color as well. Here is a sample image of my current code. Can anyone help me out with this one, please?

Image example

Here is my current code of this part -

class property_selection extends StatefulWidget {
  const property_selection({Key? key}) : super(key: key);

  @override
  _property_selectionState createState() => _property_selectionState();
}

int index = -1;
Color enableColor = Colors.red; //your color
Color disableColor = Colors.white; //your color

class _property_selectionState extends State<property_selection> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: ListView(
            shrinkWrap: true,
            children: <Widget>[
              Container(
                margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
                child: Text(
                  'Select your class',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Colors.red,
                      fontWeight: FontWeight.w500,
                      fontSize: 30),
                ),
              ),
              SizedBox(
                height: 15.0,
              ),
              Container(
                margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
                padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                height: 60.0,
                child: ElevatedButton(
                  onPressed: () {
                    setState(() {
                      index = 0;
                    });
                  },
                  child: SizedBox(
                    width: double.infinity,
                    child: Text(
                      'Clas 01',
                      textAlign: TextAlign.left,
                    ),
                  ),
                  style: ElevatedButton.styleFrom(
                      side: BorderSide(width: 2.5, color: Colors.grey),
                      primary: index == 0 ? Colors.red : Colors.white,
                      onPrimary: Colors.black,
                      textStyle: const TextStyle(
                        fontSize: 15,
                      )),
                ),
              ),
              SizedBox(
                height: 10.0,
              ),
              Container(
                margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
                padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                height: 60.0,
                child: ElevatedButton(
                  onPressed: () {
                    setState(() {
                      index = 1;
                    });
                  },
                  child: SizedBox(
                    width: double.infinity,
                    child: Text(
                      'Clas 02',
                      textAlign: TextAlign.left,
                    ),
                  ),
                  style: ElevatedButton.styleFrom(
                      side: BorderSide(width: 2.5, color: Colors.grey),
                      primary: index == 1 ? Colors.red : Colors.white,
                      onPrimary: Colors.black,
                      textStyle: const TextStyle(
                        fontSize: 15,
                      )),
                ),
              ),
              SizedBox(
                height: 10.0,
              ),
              Container(
                margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
                padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                height: 60.0,
                child: ElevatedButton(
                  onPressed: () {
                    setState(() {
                      index = 2;
                    });
                  },
                  child: SizedBox(
                    width: double.infinity,
                    child: Text(
                      'Clas 03',
                      textAlign: TextAlign.left,
                    ),
                  ),
                  style: ElevatedButton.styleFrom(
                      side: BorderSide(width: 2.5, color: Colors.grey),
                      primary: index == 2 ? Colors.red : Colors.white,
                      onPrimary: Colors.black,
                      onSurface: Colors.white,
                      textStyle: const TextStyle(
                        fontSize: 15,
                      )),
                ),
              ),
              SizedBox(
                height: 10.0,
              ),
              Container(
                margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
                height: 50,
                padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                child: ElevatedButton(
                  child: Text('Next'),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => customer_name()),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

Change onPrimary: color on ElevatedButton.styleFrom based on condition like

onPrimary: index == 2 ? Colors.white : Colors.black, onPrimary: index == 2 ? Colors.white : Colors.black, it is for Clas 03 button, do the same with changing index==classIndex for others two

Full Widget

class property_selection extends StatefulWidget {
  const property_selection({Key? key}) : super(key: key);

  @override
  _property_selectionState createState() => _property_selectionState();
}

int index = -1;
Color enableColor = Colors.red; //your color
Color disableColor = Colors.white; //your color

class _property_selectionState extends State<property_selection> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: ListView(
            shrinkWrap: true,
            children: <Widget>[
              Container(
                margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
                child: Text(
                  'Select your class',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Colors.red,
                      fontWeight: FontWeight.w500,
                      fontSize: 30),
                ),
              ),
              SizedBox(
                height: 15.0,
              ),
              Container(
                margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
                padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                height: 60.0,
                child: ElevatedButton(
                  onPressed: () {
                    setState(() {
                      index = 0;
                    });
                  },
                  child: SizedBox(
                    width: double.infinity,
                    child: Text(
                      'Clas 01',
                      textAlign: TextAlign.left,
                      // style: TextStyle(
                      //   color: index == 0 ? Colors.white : Colors.black,
                      // ),
                    ),
                  ),
                  style: ElevatedButton.styleFrom(
                      side: BorderSide(width: 2.5, color: Colors.grey),
                      primary: index == 0 ? Colors.red : Colors.white,
                      onPrimary: index == 0 ? Colors.white : Colors.black,
                      textStyle: const TextStyle(
                        fontSize: 15,
                      )),
                ),
              ),
              SizedBox(
                height: 10.0,
              ),
              Container(
                margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
                padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                height: 60.0,
                child: ElevatedButton(
                  onPressed: () {
                    setState(() {
                      index = 1;
                    });
                  },
                  child: SizedBox(
                    width: double.infinity,
                    child: Text(
                      'Clas 02',
                      textAlign: TextAlign.left,
                    ),
                  ),
                  style: ElevatedButton.styleFrom(
                      side: BorderSide(width: 2.5, color: Colors.grey),
                      primary: index == 1 ? Colors.red : Colors.white,
                       onPrimary: index == 1? Colors.white : Colors.black,
                      textStyle: const TextStyle(
                        fontSize: 15,
                      )),
                ),
              ),
              SizedBox(
                height: 10.0,
              ),
              Container(
                margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
                padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                height: 60.0,
                child: ElevatedButton(
                  onPressed: () {
                    setState(() {
                      index = 2;
                    });
                  },
                  child: SizedBox(
                    width: double.infinity,
                    child: Text(
                      'Clas 03',
                      textAlign: TextAlign.left,
                    ),
                  ),
                  style: ElevatedButton.styleFrom(
                      side: BorderSide(width: 2.5, color: Colors.grey),
                      primary: index == 2 ? Colors.red : Colors.white,
                        onPrimary: index == 2 ? Colors.white : Colors.black,
                      onSurface: Colors.white,
                      textStyle: const TextStyle(
                        fontSize: 15,
                      )),
                ),
              ),
              SizedBox(
                height: 10.0,
              ),
              Container(
                margin: EdgeInsets.fromLTRB(75, 0, 75, 0),
                height: 50,
                padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
                child: ElevatedButton(
                  child: Text('Next'),
                  onPressed: () {
                    // Navigator.push(
                    //   context,
                    //   MaterialPageRoute(builder: (context) => customer_name()),
                    // );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}