如何使小部件像按钮一样短暂改变颜色

Question

因此，按钮的行为方式会让用户知道他/她单击了按钮[单击时按钮会短暂更改其前景色。]

现在我的问题是我如何在容器上做到这一点，当用户单击小部件时，它会变得响应[前景变暗]，并且当用户从小部件上抬起手指时[变得正常]？

我的小部件代码如下：

     Container(
                height: 60,
                width: double.infinity,
                margin: EdgeInsets.all(10.0),
                child: Material(
                  borderRadius: BorderRadius.circular(10.0),
                  elevation: 1,
                  shadowColor: Colors.black,
                  child: Padding(
                    padding: EdgeInsets.only(left: 8),
                    child: Stack(
                      children: <Widget>[
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            'Click Me',
                            style: TextStyle(
                              fontFamily: 'Poppins',
                              fontSize: 14,
                            ),
                          ),
                        ),
                        Align(
                          alignment: Alignment.centerRight,
                          child: Icon(
                            CupertinoIcons.right_chevron,
                            color: color_primary,
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              )

Answer 1

在您的 Padding 小部件周围添加一个带有非空 onTap 参数的 InkWell。

Container(
          height: 60,
          width: double.infinity,
          margin: EdgeInsets.all(10.0),
          child: Material(
            borderRadius: BorderRadius.circular(10.0),
            elevation: 1,
            shadowColor: Colors.black,
            child: InkWell(
              borderRadius: BorderRadius.circular(10.0),
              onTap: () {
                // do something on tap
              },
              child: Padding(
                padding: EdgeInsets.only(left: 8),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                      child: Text(
                        'Click Me',
                        style: TextStyle(
                          fontFamily: 'Poppins',
                          fontSize: 14,
                        ),
                      ),
                    ),
                    SizedBox(width: 10.0),
                    Icon(
                      CupertinoIcons.right_chevron,
                      color: Theme.of(context).primaryColor,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),

另外，请查看一种无需使用 堆栈 即可获得相同结果的方法（因为在这种情况下这可能是开销）。