I am new to flutter and trying to apply the ripple effect on button press in this container widget through the documentation but unable to do

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

CodePudding user response：

Inner container color is over the splash color. And to have splash effect use InkWell instead of 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,
          ),
        ),
      ),
    ),
  ),

CodePudding user response：

You can simply replace GestureDetector with InkWell widget as below.

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

CodePudding user response：

you can use InkWell and wrap it with Material with transparant color if your container has background color;

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

CodePudding user response：

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