Как изменить цвет фона CupertinoButton только при вызове onPressed

Question

Я попробовал следующий код, но он не меняет цвет кнопки только при ее нажатии.

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

Answer 1

Вы можете обернуть CupertinoButton в GestureDetector. Затем используйте onTapDown и onTapCancel для изменения цвета только при нажатии. Как это:

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

Теперь вы можете использовать событие onTap в GestureDetector для вызова навигации или всего, что вам нужно.

Answer 2

Ваш код работает.

Вам просто нужно поместить "bgColor" вне функции сборки, чтобы при вызове setState он снова не устанавливал его обратно в 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');
        },
      ),
    ),
  );
}

Answer 3

К сожалению, вы никак не можете это сделать.
Вы можете расширить CupertinoButton и добавить функциональность, или использовать RawMaterialButton и сделать его с нужным вам внешним видом.

Редактировать : Если вы хотите навсегда изменить цвет кнопки, ответ @ sina-seirafi является правильным.Но если вы хотите, чтобы кнопка была только черной, вы нажимаете кнопку RawMaterialButton с черным цветом заставки - лучшее решение.