How to change CupertinoButton background color only when onPressed is called

Question

I have tried following code but it does not change the color of the button only when it is pressed.

//class attribute
Color bgColor = Colors.deepPurpleAccent;

//Widget
CupertinoButton(
  color: bgColor,
  child: Text('LOGIN', style: TextStyle(fontFamily: 'Roboto',)),
  borderRadius: const BorderRadius.all(Radius.circular(80.0)),
  onPressed: () {
  this.setState(() {
    bgColor = Colors.black;  
  });
  print(_emailValue);
  print(_passwordValue);
  Navigator.pushReplacementNamed(context, '/products');
  },
),

Do you want to change the color permanently after onPressed? Or only while pressed? — GaboBrandX, Jun 24 '19 at 16:39

score 4 · Answer 1 · answered Sep 26 '19 at 11:28

If you just want to adjust an opacity of the highlighted button color, you can change pressedOpacity property:

CupertinoButton(
  pressedOpacity: 0.4,
  ...

The default pressedOpacity value is 0.1, which is quite low. I found 0.4 is more natural to native iOS look.

GaboBrandX · Accepted Answer · 2019-06-24T18:47:44.407

You can wrap your CupertinoButton with a GestureDetector. Than use the onTapDown and onTapCancel to change color only when pressed. Like this:

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Color _buttonColor = Colors.deepPurpleAccent;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: GestureDetector(
            onTap: () {
              print(_emailValue);
              print(_passwordValue);
              Navigator.pushReplacementNamed(context, '/products');
            },
            onTapDown: (tapDetails) {
              setState(() => _buttonColor = Colors.black);
            },
            onTapCancel: () {
              setState(() => _buttonColor = Colors.deepPurpleAccent);
            },
            child: CupertinoButton(
              color: _buttonColor,
              child: Text('test'),
              onPressed: () {},
              pressedOpacity: 1.0,
            ),
          ),
        ),
      ),
    );
  }
}

Now you can use onTap event on GestureDetector for calling navigation or whatever you need.

I have wrapped it around GestureDetector now onTapCancel works but not the onTapDown! Should I also wrap the ButtonTheme? — Amin Memariani, Jun 24 '19 at 18:35
@AminMemariani Sorry, I've removed the ButtonTheme from my answer, as it's not needed. About the onTapDown event, you're initializing your color variable with deepPurpleAccent. So you should set that color onTapCancel and black onTapDown. — GaboBrandX, Jun 24 '19 at 18:43
@AminMemariani Please check my last update. Added the final result also. That should work! :) — GaboBrandX, Jun 24 '19 at 18:52

LgFranco · Answer 3 · 2019-06-24T17:25:19.233

Unfortunate, there's no way you can do it.
You can extend the CupertinoButton and add the functionality, or use the RawMaterialButton and make it with the appearance that you need.

Edit: If you want to permanently change the color of the button, the @sina-seirafi answer is the correct one. But if you want to the button to be black only went you are pressing the RawMaterialButton with the black splash color is the best solution.

score 0 · Answer 4 · answered Jun 24 '19 at 16:57

Your code works.

You just need to put the "bgColor" outside of the build function, so that when the setState is called, it doesn't set it again back to Purple.

Color bgColor = Colors.deepPurpleAccent;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: CupertinoButton(
        color: bgColor,
        child: Text(
          'LOGIN',
          style: TextStyle(
            fontFamily: 'Roboto',
          ),
        ),
        borderRadius: const BorderRadius.all(Radius.circular(80.0)),
        onPressed: () {
          this.setState(
            () {
              bgColor = Colors.black;
            },
          );

          // Navigator.pushReplacementNamed(context, '/products');
        },
      ),
    ),
  );
}

How to change CupertinoButton background color only when onPressed is called

4 Answers4