Flutter - Custom button tap area

Question

I'm building a Flutter application where a big portion of the screen will be occupied by a circular button.

I already tried several different approaches in order to create a circular button, but I always end up having the same problem: the 'tappable' area is not actually circular, but rectangular.

Here is an example obtained with a FloatingActionButton:

For small-sized buttons this is not really a problem - I would even say that it is somehow helpful - but in my case it is very annoying.

So my question is: is it possible to restrict the 'tappable' area to a circle?

Thanks in advance.

Solution 1

This seems to work, I don't know if it is right to do so or if there is a better way but here you go.

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.blue,
        child: Center(
          child: GestureDetector(
            onTap: () {
              print('clicky');
            },
            child: ClipOval(
              child: Container(
                width: 200,
                height: 200,
                color: Colors.red,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Solution 2

If you want the keep the splash during the tap, you can do something like this:

    Material(
              color: Colors.green,
              shape: CircleBorder(),
              elevation: 5.0,
              child: InkWell(
                borderRadius: BorderRadius.circular(100.0),
                onTap: () => print("here"),
                child: Container(
                  height: 200.0,
                  width: 200.0,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                  ),
                  child: Icon(Icons.receipt),
                ),
              ),
            ),

Comments

[Alessandro]

Thanks, that's exactly what I was looking for.

[Doc]

For material effect, replace GestureDetector with InkWell with onTap().