How to add ripple effect to PhysicalModel in flutter

Issue

I was trying to create a login button, which will be animated on pressing on it. But while clicking on the button( on the PhysicalModel), a ripple effect is shown only on the Login text, not entirely on the physical model. How to add ripples to PhysicalModel or remove the ripple effect from MaterialButton ?

PhysicalModel(
            color: Colors.teal,
            borderRadius: BorderRadius.circular(50.0),
            child: MaterialButton(
                   key: _globalKey,
                   child: Text("Login"),
                   onPressed: () {
                        setState(() {
                             if (_state == 0) {
                                    animateButton();
                             }
                        });
                   },
                   elevation: 4.0,
                   minWidth: _width,
                   height: 20.0,
            ),
)

Solution

If you want to remove the splash color of the MaterialButton just change these colors to transparent.

  MaterialButton(
    splashColor: Colors.transparent,
    highlightColor: Colors.transparent,

If you want ripple effect for your PhysicalModel:

    PhysicalModel(
                  color: Colors.teal,
                  borderRadius: BorderRadius.circular(50.0),
                  child: RawMaterialButton(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(50.0)),
                    padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 30.0),
                    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                    child: Text("Login"),
                    onPressed: () {
                      setState(() {});
                    },
                    elevation: 4.0,
                  ),
                )

Answered By – diegoveloper

Answer Checked By – Mildred Charles (FlutterFixes Admin)