CODEWITHSUNDEEP
flutterdartflutter-layout
Seb
Seb

Reputation: 3215

Background of ElevatedButton is not modified

I am using ButtonBar and ElevatedButton but I am not able to change the button background. It stayed grey. below is the code:

class GuestFlowBottomBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Container(
        margin: new EdgeInsets.only(left: 10.0, right: 10.0),
        child: new ButtonBar(
          alignment: MainAxisAlignment.center,
          children: <Widget>[
            new ElevatedButton(
                child: new Text('Create an Account',
                    style: TextStyle(color: Colors.orange)),
                onPressed: null,
                style: ElevatedButton.styleFrom(
                    primary: Colors.white,
                    side: BorderSide(width: 2.0, color: Colors.orange),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)))),
            new ElevatedButton(
                child: new Text('Already an Account?',
                    style: TextStyle(color: Colors.black)),
                onPressed: null,
                style: ElevatedButton.styleFrom(
                    primary: Colors.black,
                    side: BorderSide(width: 2.0, color: Colors.black),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)))),
          ],
        ),
      ),
    );
  }
}

I am forcing it using primary: Colors.black, but it remains grey as the picture below shows:

enter image description here

Any idea ?

Upvotes: 0

Views: 76

Answers (2)

Tokenyet
Tokenyet

Reputation: 4291

You might forget to write onPressed. but If It's intended, this is an another way to controll All states with your buttons.

class GuestFlowBottomBar extends StatelessWidget {
  
  Color getColor(Set<MaterialState> states) {
      const Set<MaterialState> interactiveStates = <MaterialState>{
        MaterialState.pressed,
        MaterialState.hovered,
        MaterialState.focused,
      };
      if (states.any(interactiveStates.contains)) {
        return Colors.blue;
      }
      return Colors.red;
    }
  
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Container(
        margin: new EdgeInsets.only(left: 10.0, right: 10.0),
        child: new ButtonBar(
          alignment: MainAxisAlignment.center,
          children: <Widget>[
            new ElevatedButton(
                child: new Text('Create an Account',
                    style: TextStyle(color: Colors.orange)),
                onPressed: null,
                style: ElevatedButton.styleFrom(
                    side: BorderSide(width: 2.0, color: Colors.orange),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0)))),
            new ElevatedButton(
                child: new Text('Already an Account?',
                    style: TextStyle(color: Colors.black)),
                onPressed: null,
                style: ElevatedButton.styleFrom(
                    side: BorderSide(width: 2.0, color: Colors.black),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(20.0))).copyWith(
                  backgroundColor: MaterialStateProperty.resolveWith(getColor)
                )
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 0

Asad Rehman
Asad Rehman

Reputation: 442

You have given onPressed a null value. Try:

ElevatedButton(
  child: new Text('Create an Account',
      style: TextStyle(color: Colors.orange)),
  onPressed: (){},
  style: ElevatedButton.styleFrom(
      primary: Colors.black,
      side: BorderSide(width: 2.0, color: Colors.orange),
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20.0)))),

Upvotes: 1

Related Questions