按下/按下按钮设计 - Flutter

Question

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


我的目标是让用户点击按钮，它应该将按钮的设计/状态从提升变为按下，即阴影应该从落在按钮周围变为落在按钮内部。

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

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

)