如何更改 Flutter 中提升按钮的选定文本的颜色？

Question

当提升按钮中的文本从黑色选择为白色时，我想更改它们的颜色。 现在，如果我从这些提升的按钮中选择任何选项，背景颜色会发生变化，但文本颜色不会发生变化。但我也想更改文本颜色。 这是我当前代码的示例图像。 谁能帮我解决这个问题，好吗？

Image example

这是我目前这部分的代码 -

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

根据类似条件更改ElevatedButton.styleFrom 上的onPrimary: 颜色

onPrimary: index == 2 ? Colors.white : Colors.black, 用于Clas 03 按钮，同样将index==classIndex 更改为其他两个

完整小部件

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()),
                    // );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}