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.
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,
),
),
),
),
),
);
}
}
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),
),
),
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With