Depressed/pressed 按钮设计——Flutter

Question

我对 flutter 比较陌生。当我在寻找 UI 来复制练习时，我遇到了一个带有漂亮按钮的按钮。下面是设计图供参考。

我的目标是让用户点击按钮，它应该将按钮的 design/state 从抬起变为按下，即阴影应该从落在按钮周围变为落在按钮内.

我成功地复制了底部的方形按钮，但无法复制顶部的方形按钮。
下面是图片底部方形按钮的代码：

Center(
  child: GestureDetector(
    onTap: () {},
    child: Container(
      height: 300.0,
      width: 300.0,
      decoration: BoxDecoration(
        color: Colors.grey.shade300,
        borderRadius: BorderRadius.circular(50.0),
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: Colors.grey.shade100,
            offset: Offset(_offset * -1, _offset * -1),
            blurRadius: 8.0,
          ),
          BoxShadow(
            color: Colors.grey.shade500,
            offset: Offset(_offset, _offset),
            blurRadius: 8.0,
          ),
        ],
      ),
    ),
  ),
)

为了进一步参考，我附上了一个类似的设计，但它不是按钮，而是一个搜索栏。

如何实现这种设计以及点击时更改按钮设计的功能？

编辑：我主要担心的是我无法复制按钮的“按下”设计

Answer 1

您可以为此使用 GestureDetector：

GestureDetector(
    onTapDown: () {
        pressing = true;
    },
    onTapUp: () {
        pressing = false;
    }

)

Depressed/pressed 按钮设计——Flutter

Depressed/pressed button design - Flutter

user-interface

button

flutter