按下/按下按钮设计 - Flutter

Posted 2023-03-25

【中文标题】按下/按下按钮设计 - Flutter

【英文标题】：Depressed/pressed button design - Flutter

【发布时间】：2021-11-29 06:50:31

【问题描述】：

我对 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,
          ),
        ],
      ),
    ),
  ),
)

为了进一步参考，我附上了一个类似的设计，但它不是一个按钮，而是一个搜索栏。 我怎样才能实现这种设计以及点击时更改按钮设计的功能？

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

【参考方案1】：

您可以使用 GestureDetector：

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

)

【讨论】：

问题是我无法复制按下的设计，即按钮内部应该有阴影，而不是围绕它。

检查这个：***.com/questions/54061964/…