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

Posted 2023-02-23

【中文标题】如何在颤动中更改文本按钮颜色？

【英文标题】：How to change the text button color on press in flutter?

【发布时间】：2021-12-14 13:27:15

【问题描述】：

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

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

【参考方案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

【讨论】：

非常感谢。成功了！