如何在颤动中更改按下时的文本按钮颜色？

Question

我想使用 Flutter 在我的应用程序中创建一个页面，人们可以在其中 select 使用我使用文本按钮创建的选项。我的代码的当前结果如下图所示。但我想这样做 - 在 select 一个文本按钮之后，按钮的背景颜色和文本颜色将更改为其他颜色。除非“下一步”按钮未被 select 编辑，否则它将以那种方式保持颜色。这可能使用颤动吗？如果是的话，你能帮我看看怎么做吗？

Added Text buttons in Flutter-example

我的代码-

    class property_selection extends StatefulWidget {
      const property_selection({Key? key}) : super(key: key);
    
      @override
      _property_selectionState createState() => _property_selectionState();
    }
    
    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: TextButton(
                      onPressed: () {},
                      child: SizedBox(
                        width: double.infinity,
                        child: Text(
                          'Class 01',
                          textAlign: TextAlign.left,
                        ),
                      ),
                      style: ButtonStyle(
                        side: MaterialStateProperty.all(
                          BorderSide(width: 2, color: Colors.grey),
                        ),
                        backgroundColor: MaterialStateProperty.all(Colors.white),
                        foregroundColor: MaterialStateProperty.all(Colors.black),
                        padding: MaterialStateProperty.all(
                            EdgeInsets.symmetric(vertical: 10, horizontal: 50)),
                        textStyle: MaterialStateProperty.all(
                          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: TextButton(
                      onPressed: () {},
                      child: SizedBox(
                        width: double.infinity,
                        child: Text(
                          'Class 02',
                          textAlign: TextAlign.left,
                        ),
                      ),
                      style: ButtonStyle(
                        side: MaterialStateProperty.all(
                          BorderSide(width: 2, color: Colors.grey),
                        ),
                        foregroundColor: MaterialStateProperty.all(Colors.black),
                        padding: MaterialStateProperty.all(
                            EdgeInsets.symmetric(vertical: 10, horizontal: 50)),
                        textStyle: MaterialStateProperty.all(
                          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: TextButton(
                      onPressed: () {},
                      child: SizedBox(
                        width: double.infinity,
                        child: Text(
                          'Clas 03',
                          textAlign: TextAlign.left,
                        ),
                      ),
                      style: ButtonStyle(
                        side: MaterialStateProperty.all(
                          BorderSide(width: 2, color: Colors.grey),
                        ),
                        foregroundColor: MaterialStateProperty.all(Colors.black),
                        padding: MaterialStateProperty.all(
                            EdgeInsets.symmetric(vertical: 10, horizontal: 50)),
                        textStyle: MaterialStateProperty.all(
                          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

int index = -1

Color enableColor = //your color
Color disableColor = //your color

onPressed: () {
  //onPressed for button 1
  setState((){
    index = 0;
  });
},

onPressed: () {
 //onPressed for button 2
 setState((){
    index = 1;
  });
},

onPressed: () {
 //onPressed for button 3
 setState((){
    index = 2;
  });
},

现在在您的小部件中设置颜色

color: index == 0 ? enableColor : disableColor //this is for 1 button color

color: index == 1 ? enableColor : disableColor //this is for 2 button color

color: index == 2 ? enableColor : disableColor //this is for 3 button color

如何在颤动中更改按下时的文本按钮颜色？

How to change the text button color on press in flutter?

flutter

flutter-layout

flutter-design