此容器小部件中的涟漪效应不起作用答案

【问题标题】：ripple effect in this container widget is not working此容器小部件中的涟漪效应不起作用
【发布时间】：2022-07-30 15:08:17
【问题描述】：

我是 Flutter 的新手，并试图通过文档在此容器小部件中的按钮按下上应用涟漪效应，但无法做到

    Padding(
            padding: const EdgeInsets.symmetric(horizontal: 25.0),
            child: GestureDetector(
              onTap: signIn,
              child: Container(
                padding: EdgeInsets.all(20),
                decoration: BoxDecoration(
                    color: Colors.deepPurple,
                    borderRadius: BorderRadius.circular(12)),
                child: Center(
                  child: Text(
                    'Sign In',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ),
          ),

【问题讨论】：

标签： flutter dart button flutter-layout flutter-animation

【解决方案1】：

您可以简单地将 GestureDetector 替换为 InkWell 小部件，如下所示。

  InkWell(
      onTap: signIn,
      child: Container(
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(color: Colors.deepPurple, borderRadius: BorderRadius.circular(12)),
        child: Center(
          child: Text(
            'Sign In',
            style: TextStyle(
              color: Colors.white,
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    )

【讨论】：

【解决方案2】：

如果您的容器有背景色，您可以使用InkWell 并用透明颜色的Material 包裹它；

Material(
  color: Colors.transparent,
    child: InkWell(
      splashColor: Colors.blue,
      onTap: () {},
      child: Container(
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(
            color: Colors.deepPurple,
            borderRadius: BorderRadius.circular(12)),
        child: Center(
          child: Text(
            'Sign In',
            style: TextStyle(
              color: Colors.white,
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    ))

【讨论】：