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.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call the MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with State less widget.
|
1 2 3 4 |
class MyApp extends StatelessWidget { } |
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.
|
1 2 3 4 5 |
void message(){ print('Message Called.'); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
GestureDetector( onTap: () {message();}, child: ClipOval( child: Container( color: Colors.lightBlue, height: 100.0, width: 100.0, child: Center( child: Text('Round Shape', style: TextStyle(color: Colors.white, fontSize: 24), textAlign: TextAlign.center,)), ), ), ), GestureDetector( onTap: () {message();}, child: ClipOval( child: Container( color: Colors.lightBlue, height: 100.0, width: 140.0, child: Center( child: Text('Oval Shape', style: TextStyle(color: Colors.white, fontSize: 24), textAlign: TextAlign.center,)), ), ), ), |
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { void message(){ print('Message Called.'); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[ GestureDetector( onTap: () {message();}, child: ClipOval( child: Container( color: Colors.lightBlue, height: 100.0, width: 100.0, child: Center( child: Text('Round Shape', style: TextStyle(color: Colors.white, fontSize: 24), textAlign: TextAlign.center,)), ), ), ), GestureDetector( onTap: () {message();}, child: ClipOval( child: Container( color: Colors.lightBlue, height: 100.0, width: 140.0, child: Center( child: Text('Oval Shape', style: TextStyle(color: Colors.white, fontSize: 24), textAlign: TextAlign.center,)), ), ), ), ]) ) ) ); } } |
Screenshot:
