Hello Guys How are you all ? Hope you all are fine. Today in this tutorial we are going to learn How to create a circle icon button in Flutter? Here we will discuss all possible methods to create a circle icon button in flutter. so let’s get started without wasting your time.
How to create a circle icon button in Flutter?
- How to create a circle icon button in Flutter?
To create a circle icon button in Flutter ElevatedButton has style property which has shape property so we can easily shape our elevatedButton. Here is an Example. MaterialButton has shape property so we can easily shape our MaterialButton. Here is an Example.
- create a circle icon button in Flutter
To create a circle icon button in Flutter ElevatedButton has style property which has shape property so we can easily shape our elevatedButton. Here is an Example. MaterialButton has shape property so we can easily shape our MaterialButton. Here is an Example.
1. create a circle icon button using ElevatedButton Widget.
ElevatedButton has style property which has shape property so we can easily shape our elevatedButton. Here is an Example.
Example Source Code.
child: Center(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
shape: CircleBorder(),
padding: EdgeInsets.all(30),
),
child: Icon(
Icons.android_outlined,
size: 50,
),
onPressed: () {},
),
),Output.
2. create a circle icon button using MaterialButton Widget.
MaterialButton has shape property so we can easily shape our MaterialButton. Here is an Example.
Example Source Code.
child: Center(
child: MaterialButton(
shape: CircleBorder(),
color: Colors.green,
padding: EdgeInsets.all(20),
onPressed: () {},
child: Icon(
Icons.android_outlined,
size: 50,
color: Colors.white,
),
),
),Output.
3. create a circle icon button using ClipOval Widget.
We are going to use ClipOval widget. Here is an example.
Example Source Code.
child: Center(
child: ClipOval(
child: Material(
color: Colors.blue,
child: InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.all(20),
child: Icon(
Icons.android_outlined,
size: 50,
color: Colors.white,
),
),
),
),
),
),Output.
4. create a circle icon button using CircleAvatar Widget.
CircleAvatar has radius property so we can easily give radius to our CircleAvatar. Here is an example.
Example Source Code.
child: Center(
child: CircleAvatar(
radius: 50,
backgroundColor: Colors.green,
child: IconButton(
color: Colors.white,
padding: EdgeInsets.all(20),
iconSize: 50,
icon: Icon(Icons.android_outlined),
onPressed: () {},
),
),
),Output.
5. create a circle icon button using Ink Widget.
Ink has decoration and we can assign decoration as ShapeDecoration property which has shape property so we can easily shape our Ink widget. Here is an example.
Example Source Code.
child: Center(
child: Ink(
decoration: ShapeDecoration(
shape: CircleBorder(),
color: Colors.green,
),
child: IconButton(
icon: Icon(Icons.android_outlined),
iconSize: 50,
color: Colors.white,
onPressed: () {},
),
),
),Output.
Summery
So, It’s All About this tutorial. I hope this tutorial helps you to Solve your error. Please Comment Below if You stucks anywhere with my code. And please comment below on which solution worked for you. Thank You.
Leave a Reply