Flutter：如何根据条件更改按钮背景颜色

Question

说明（要求）：

我正在尝试更改按钮背景颜色并在按下启用和禁用时处理它。 我想，当用户重定向到仪表板屏幕时，会有 2 个按钮进入和超时。初始时间按钮将启用（背景颜色应为深蓝色），超时按钮将禁用（背景颜色应为浅蓝色）。

当getTimeInStatus=false（我从api获取这个值）时，按钮中的时间将被启用，它的背景颜色应该是深蓝色，当用户点击按钮中的时间时，它的文本变为当前时间，它的背景颜色应该变为浅蓝色，并且应该禁用按下。并且超时按钮背景颜色应更改为深蓝色，用户将能够单击它。

代码：

我创建了两个小部件，一个用于时间输入，另一个用于超时，在正文中调用它。

这是时间代码

Widget _timein() {
   //enable
    if(getTimeInStatus==false) {
      return FlatButton(
                color: timeInButtonPressed ? Colors.blue[200]:Colors.blue[500],
                textColor: Colors.white,
                padding: EdgeInsets.all(15.0),                             
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(buttonRoundRadius)),
                child: Row(
                  children:<Widget>[                   
                    Icon(Icons.timer,),
                    Expanded(child: 
                    Text(timeInText,
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: textFontSize),),)                  
                    ,]),                
                onPressed: () {
                  _getTime();
                  setState(() {
                  timeInText=getTime;
                  }
                ); 
                calltimeInApi();             
                timeOutButtonPressed=true;    
                //timeInButtonPressed=true;
                }
                
        );               
    }

    //disable
      else if(timeInText!="Time in") {
        return FlatButton(
                color: Colors.blue[200],
                textColor: Colors.white,
                padding: EdgeInsets.all(15.0),                             
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(buttonRoundRadius)),
                child: Row(
                  children:<Widget>[                   
                    Icon(Icons.timer,),
                    Expanded(child: 
                    Text(timeInText,
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: textFontSize),),)                    
                    ,]),               
                );}
  }

这里是超时代码：

   Widget _timeout(){
      //enable
      if(timeOutButtonPressed==true) {
        return  FlatButton(
                color: Colors.blue[500],
                textColor: Colors.white,
                padding: EdgeInsets.all(15.0),                             
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(buttonRoundRadius)),
                child: Row(
                  children:<Widget>[                   
                    Icon(Icons.timer_off,),
                    Expanded(child: 
                    Text(timeOutText,
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: textFontSize),),)
                    
                    ,]),
                onPressed: () {
                  _getTime();
                  setState(() {
                  timeOutText=getTime;
                  }
                );   
                calltimeOutApi();              
                }               
                );
      }
      //disable
      else if(timeInText=="Time in"){
        return  FlatButton(
                color: Colors.blue[200],
                textColor: Colors.white,
                padding: EdgeInsets.all(15.0),                             
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(buttonRoundRadius)),
                child: Row(
                  children:<Widget>[                   
                    Icon(Icons.timer_off,),
                    Expanded(child: 
                    Text(timeOutText,
                    textAlign: TextAlign.center,
                    style: TextStyle(fontSize: textFontSize),),)
                    
                    ,]),
                            
                );
      }
    
 }

输出：

登录后，当用户重定向到仪表板屏幕时，我的按钮看起来像这样，我希望超时的背景颜色为浅蓝色。

当我单击按钮中的时间时，这是输出，但我可以再次单击按钮中的时间。这不是我的要求。

请帮助我如何做到这一点。需要进一步澄清。

Answer 1

FlatButton( color : condition ? Colors.green : Colors.grey )

只要你想更新颜色，setState() 就会更新名为 'condition' 的布尔值。

条件为真时为绿色，为假时为灰色。