How to have Circle ripple effect on an IconButton?

Question

I would like to make a button with a circular ripple effect using an Icon, I've seen something online but I can't do it. It is not that straight forward like it should be. Trying with this code now.

InkWell(
                      onTap: () {},
                      splashColor: Colors.red,
                      highlightColor: Colors.white,
                      child: new Icon(
                        FontAwesomeIcons.chevronCircleUp,
                        size: 100,
                      ),
                    )

Another try was with this, but I cannot understand why those don't perfectly centers with each other.

Container(
                      margin: EdgeInsets.all(0.0),
                      height: 100.0,
                      width: 100.0,
                      child: new RaisedButton(
                          padding: EdgeInsets.all(0.0),
                          elevation: 100.0,
                          color: Colors.black,
                          highlightElevation: 0.0,
                          onPressed: () {},
                          splashColor: Colors.red,
                          highlightColor: Colors.red,
                          //shape: RoundedRectangleBorder e tutto il resto uguale
                          shape: CircleBorder(
                            side: BorderSide(color: Colors.black, width: 5),
                          ),
                          child: Icon(
                            FontAwesomeIcons.chevronCircleUp,
                            color: Colors.white.withOpacity(.8),
                            size: 80,
                          )),
                    ),

Thanks for the help

Answer 1

I see that you'd like granular controll over the size of the ripple. I ended up using the code below.

Padding(
    padding: EdgeInsets.all(8.0),
    child: InkWell(
        customBorder: new CircleBorder(),
        onTap: () {},
        splashColor: Colors.red,
        child: new Icon(
            Icons.arrow_back,
            size: 24,
            color: Colors.black,
        ),
    ),
)

The InkWell effect renders a square, however using CircleBorder crops it to a circular shape.

By default the effect attempts to fill the space, so to modify the size I added padding on all sides, cropping the effect. If you are still having trouble with the ripple effect not rendering at all, wrapping your code in a Material() should fix most issues, or taking a look at the app theme.