Flutter: How to change button background color on the basis of condition

Question

Description (Requirement):

I'm trying to change the button background color and handling its on press enable and disable. I want, when user redirect to dashboard screen there will be 2 buttons time in and time out. Initially time in button will be enable (background color should be dark blue) and time out button will be disable (background color should be light blue).

Time in button will be enable when getTimeInStatus=false (i am getting this value from api), and its background color should be dark blue and when user click on time in button its text change to current time, and its background color should change to light blue and it should be disable for press. and time out button background color should be change to dark blue and user will be able to click it.

Code:

i have created two widgets, one for time in and other is time out, calling it in body.

here is time in code

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

here is time out code:

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

Output:

After login, when user redirect to dashboard screen my button looks like this, and i want background color of time out light blue.

when i click on time in button this is output, but i am able to click again time in button. which is not my requirement.

Please help me how I can do this. Would add more clarification is needed.

Answer 1

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

Anytime you want to update the colors, setState() with the bool named 'condition' updated.

When condition is true, the color is green and when false, it's grey.