Flutter Create Round Circle Oval Shape Button Android iOS Example

ClipOval widget in flutter is used to clip the child widget in Oval or Circle shape. The ClipOval widget supports both width and height and creates the children in circle shape according to given width height. If we would pass width and height with same size than it would create us a proper circle shape container view. If we would pass width and height differently then it would creates a Oval view. So in this tutorial we would Flutter Create Round Circle Oval Shape Button Android iOS Example.

Contents in this project Flutter Create Round Circle Oval Shape Button Android iOS Example Tutorial:

1. Import material.dart package in your project’s main.dart file.

2. Create void main runApp() method and here we would call the MyApp class.

3. Create our main MyApp class extends with State less widget.

4. Create a function named as message(), In this function we would only print a message on console screen. We would call this function on button click event.

5. Create Widget build are in MyApp class. Now we would make Center widget in Scaffold widget and make a Column widget in Center widget.

6. Creating Gesture detector widget -> ClipOval widget -> Container widget -> Center widget -> Text widget. We would wrap the Clip oval widget in Gesture detector widget to make the round shape clickable. We are making two widgets in first widget both width and height are same but in other both width and height are different.

7. Complete source code for main.dart file:

Screenshot:

Flutter Create Round Circle Oval Shape Button Android iOS Example

Leave a Reply

Your email address will not be published.