按下时带有渐变的 Flutter 按钮，因为它的突出显示颜色

Question

我有一个带有渐变颜色的按钮，所以我希望渐变在按下时反转，然后在松开时让渐变颜色恢复到开始时的状态。

我在一个数组中有渐变颜色，因此可以轻松交换，但不确定如何做到这一点。我之前用 React Native 做过这个效果，所以想知道如何用 Flutter 做这个。

目前它只是在按下 highlightColor 时使用一种颜色，但这看起来太基本了。

 const gradientcolours = [
  [Color(0xFF00000), Color(0xFFFFFFF)],
  [Color(0xFFFFFFF), Color(0xFF00000)]
];

    return Container(
      padding: EdgeInsets.all(20),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(60),
      ),
      child: Container(
        padding: EdgeInsets.all(2),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(60),
          gradient: LinearGradient(
              begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: gradientcolours[0]),
        ),
        child: RawMaterialButton(
          splashColor: Color(0xFF030303),
          highlightColor: Color(0xFF030303),
          child: Text('Press'),
            child: Container(
              height: 40,
              width: 40,
            ),
          ),
          onPressed: onPressed,
          constraints: BoxConstraints.tightFor(
            width: 80,
            height: 80,
          ),
          shape: CircleBorder(),
        ),
      ),
    );

Answer 1

您可以尝试类似的方法：

int index = 0;

/* ... */

Listener(
  child: Container(
    padding: EdgeInsets.all(2),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(60),
      gradient: LinearGradient(
          begin: Alignment.topCenter, end: Alignment.bottomCenter, colors: gradientcolours[index]),
    ),
    /* ... */
  ),
  onPointerDown: (_) {
    setState(() {
      index = 1;
    });
  },
  onPointerUp: (_) {
    setState(() {
      index = 0;
    });
  },
);

按下时带有渐变的 Flutter 按钮，因为它的突出显示颜色

Flutter button with gradient when pressed for it's highlight colour

gradient

button

dart

flutter