此容器小部件中的漣漪效應不起作用

Question

我是 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,
                    ),
                  ),
                ),
              ),
            ),
          ),

Answer 1

內容器顏色超過飛濺顏色。 並有飛濺效果使用 InkWell 而不是GestureDetector

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 25.0),
  child: Material(
    color: Colors.deepPurple,
    child: InkWell(
      onTap: () {},
      splashColor: Colors.red,
      child: Center(
        child: Text(
          'Sign In',
          style: TextStyle(
            color: Colors.white,
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ),
  ),

Answer 2

您可以簡單地將 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,
            ),
          ),
        ),
      ),
    )

Answer 3

如果您的容器有背景顏色，您可以使用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,
            ),
          ),
        ),
      ),
    ))

Answer 4

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