How to create a circle icon button in Flutter? - flutter

Question

How can I create something similar to a FloatingActionButton?

Answer 1

RawMaterialButton is better suited I think.
RawMaterialButton(
onPressed: () {},
elevation: 2.0,
fillColor: Colors.white,
child: Icon(
Icons.pause,
size: 35.0,
),
padding: EdgeInsets.all(15.0),
shape: CircleBorder(),
)

Answer 2

Update (use new ElevatedButton)
ElevatedButton (with less customizations)
ElevatedButton(
onPressed: () {},
child: Icon(Icons.menu, color: Colors.white),
style: ElevatedButton.styleFrom(
shape: CircleBorder(),
padding: EdgeInsets.all(20),
backgroundColor: Colors.blue, // <-- Button color
foregroundColor: Colors.red, // <-- Splash color
),
)
ElevatedButton (with more customizations)
ElevatedButton(
onPressed: () {},
child: Icon(Icons.menu),
style: ButtonStyle(
shape: MaterialStateProperty.all(CircleBorder()),
padding: MaterialStateProperty.all(EdgeInsets.all(20)),
backgroundColor: MaterialStateProperty.all(Colors.blue), // <-- Button color
overlayColor: MaterialStateProperty.resolveWith<Color?>((states) {
if (states.contains(MaterialState.pressed)) return Colors.red; // <-- Splash color
}),
),
)
Using InkWell
ClipOval(
child: Material(
color: Colors.blue, // Button color
child: InkWell(
splashColor: Colors.red, // Splash color
onTap: () {},
child: SizedBox(width: 56, height: 56, child: Icon(Icons.menu)),
),
),
)
Output (same for the last two):

Answer 3

You just need to use the shape: CircleBorder()
MaterialButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
child: Icon(
Icons.camera_alt,
size: 24,
),
padding: EdgeInsets.all(16),
shape: CircleBorder(),
)

Answer 4

You can use InkWell to do that:
A rectangular area of a Material that responds to touch.
Below example demonstrate how to use InkWell. Notice: you don't need StatefulWidget to do that. I used it to change the state of the count.
Example:
import 'package:flutter/material.dart';
class SettingPage extends StatefulWidget {
#override
_SettingPageState createState() => new _SettingPageState();
}
class _SettingPageState extends State<SettingPage> {
int _count = 0;
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new InkWell(// this is the one you are looking for..........
onTap: () => setState(() => _count++),
child: new Container(
//width: 50.0,
//height: 50.0,
padding: const EdgeInsets.all(20.0),//I used some padding without fixed width and height
decoration: new BoxDecoration(
shape: BoxShape.circle,// You can use like this way or like the below line
//borderRadius: new BorderRadius.circular(30.0),
color: Colors.green,
),
child: new Text(_count.toString(), style: new TextStyle(color: Colors.white, fontSize: 50.0)),// You can add a Icon instead of text also, like below.
//child: new Icon(Icons.arrow_forward, size: 50.0, color: Colors.black38)),
),//............
),
),
);
}
}
If you want to get benefit of splashColor, highlightColor, wrap InkWell widget using a Material widget with material type circle. And then remove decoration in Container widget.
Outcome:

Answer 5

If you need a background image, you can use CircleAvatar with IconButton. Set the backgroundImage property.
CircleAvatar(
backgroundImage: NetworkImage(userAvatarUrl),
)
Example with button:
CircleAvatar(
backgroundColor: Colors.blue,
radius: 20,
child: IconButton(
padding: EdgeInsets.zero,
icon: Icon(Icons.add),
color: Colors.white,
onPressed: () {},
),
),

Answer 6

You can easily do the following:
FlatButton(
onPressed: () {
},
child: new Icon(
Icons.arrow_forward,
color: Colors.white,
size: 20.0,
),
shape: new CircleBorder(),
color: Colors.black12,
)
The result is

Answer 7

RaisedButton is depricated,
now you can create this by ElevatedButton.
ElevatedButton(
onPressed: () {},
child: Icon(Icons.add, color: Colors.white),
style: ElevatedButton.styleFrom(
shape: CircleBorder(),
padding: EdgeInsets.all(20),
primary: Colors.blue,
onPrimary: Colors.black,
),
)

Answer 8

RawMaterialButton(
onPressed: () {},
constraints: BoxConstraints(),
elevation: 2.0,
fillColor: Colors.white,
child: Icon(
Icons.pause,
size: 35.0,
),
padding: EdgeInsets.all(15.0),
shape: CircleBorder(),
)
note down constraints: BoxConstraints(), it's for not allowing padding in left.
Happy fluttering!!

Answer 9

There actually is an example how to create a circle IconButton similar to the FloatingActionButton.
Ink(
decoration: const ShapeDecoration(
color: Colors.lightBlue,
shape: CircleBorder(),
),
child: IconButton(
icon: Icon(Icons.home),
onPressed: () {},
),
)
To create a local project with this code sample, run:
flutter create --sample=material.IconButton.2 mysample

Answer 10

Using ElevatedButton:
ElevatedButton(
onPressed: () {},
child: Icon(
Icons.add,
color: Colors.white,
size: 60.0,
),
style: ElevatedButton.styleFrom(
shape: CircleBorder(), primary: Colors.green),
)

Answer 11

2021
If you need it flat (no elevation) as FlatButton is now deprecated.
TextButton(
onPressed: (){},
child: Icon(Icons.arrow_back),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.black26),
shape: MaterialStateProperty.all(const CircleBorder())),
);

Answer 12

I created a version with correct clipping, elevation and border. Feel free to customize it.
Material(
elevation: 2.0,
clipBehavior: Clip.hardEdge,
borderRadius: BorderRadius.circular(50),
color: Colors.white,
child: InkWell(
onTap: () => null,
child: Container(
padding: EdgeInsets.all(9.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.blue, width: 1.4)),
child: Icon(
Icons.menu,
size: 22,
color: Colors.red,
),
),
),
)),

Answer 13

I used this one because I like the customisation of the border-radius and size.
Material( // pause button (round)
borderRadius: BorderRadius.circular(50), // change radius size
color: Colors.blue, //button colour
child: InkWell(
splashColor: Colors.blue[900], // inkwell onPress colour
child: SizedBox(
width: 35,height: 35, //customisable size of 'button'
child: Icon(Icons.pause,color: Colors.white,size: 16,),
),
onTap: () {}, // or use onPressed: () {}
),
),
Material( // eye button (customised radius)
borderRadius: BorderRadius.only(
topRight: Radius.circular(10.0),
bottomLeft: Radius.circular(50.0),),
color: Colors.blue,
child: InkWell(
splashColor: Colors.blue[900], // inkwell onPress colour
child: SizedBox(
width: 40, height: 40, //customisable size of 'button'
child: Icon(Icons.remove_red_eye,color: Colors.white,size: 16,),),
onTap: () {}, // or use onPressed: () {}
),
),

Answer 14

There are many ways to create the circle icon button in Flutter. Each of the examples below will use a different method.
Using ElevatedButton + Icon (recommended)
Using MaterialButton
ClipOval + Material + InkWell + Padding + Icon
IconButton + CircleAvatar
Ink + IconButton
Using ElevatedButton + Icon
ElevatedButton(
style: ElevatedButton.styleFrom(
shape: const CircleBorder(),
padding: const EdgeInsets.all(30)
),
child: const Icon(
Icons.add,
size: 50,
),
onPressed: () {},
),
Output:
Using MaterialButton
MaterialButton(
shape: const CircleBorder(),
color: Colors.red,
padding: const EdgeInsets.all(20),
onPressed: () {},
child: const Icon(
Icons.star,
size: 50,
color: Colors.yellow,
),
)
Output:
ClipOval + Material + InkWell + Padding + Icon
ClipOval(
child: Material(
color: Colors.blue,
child: InkWell(
onTap: () {},
child: const Padding(
padding: EdgeInsets.all(20),
child: Icon(
Icons.plus_one,
size: 50,
color: Colors.white,
),
),
),
),
)
Output:
IconButton + CircleAvatar
CircleAvatar(
radius: 50,
backgroundColor: Colors.amber,
child: IconButton(
color: Colors.black,
padding: const EdgeInsets.all(20),
iconSize: 50,
icon: const Icon(Icons.shop),
onPressed: () {
// do something
}),
),
Output:
Ink + IconButton
Ink(
decoration:
const ShapeDecoration(
shape: CircleBorder(),
color: Colors.purple
),
child: IconButton(
icon: const Icon(Icons.arrow_back),
iconSize: 30,
color: Colors.white,
onPressed: () {},
),
)
Output:

Answer 15

My contribution:
import 'package:flutter/material.dart';
///
/// Create a circle button with an icon.
///
/// The [icon] argument must not be null.
///
class CircleButton extends StatelessWidget {
const CircleButton({
Key key,
#required this.icon,
this.padding = const EdgeInsets.all(8.0),
this.color,
this.onPressed,
this.splashColor,
}) : assert(icon != null),
super(key: key);
/// The [Icon] contained ny the circle button.
final Icon icon;
/// Empty space to inscribe inside the circle button. The [icon] is
/// placed inside this padding.
final EdgeInsetsGeometry padding;
/// The color to fill in the background of the circle button.
///
/// The [color] is drawn under the [icon].
final Color color;
/// The callback that is called when the button is tapped or otherwise activated.
///
/// If this callback is null, then the button will be disabled.
final void Function() onPressed;
/// The splash color of the button's [InkWell].
///
/// The ink splash indicates that the button has been touched. It
/// appears on top of the button's child and spreads in an expanding
/// circle beginning where the touch occurred.
///
/// The default splash color is the current theme's splash color,
/// [ThemeData.splashColor].
final Color splashColor;
#override
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
return ClipOval(
child: Material(
type: MaterialType.button,
color: color ?? theme.buttonColor,
child: InkWell(
splashColor: splashColor ?? theme.splashColor,
child: Padding(
padding: padding,
child: icon,
),
onTap: onPressed,
),
),
);
}
}

Answer 16

This code will help you to add button without any unwanted padding,
RawMaterialButton(
elevation: 0.0,
child: Icon(Icons.add),
onPressed: (){},
constraints: BoxConstraints.tightFor(
width: 56.0,
height: 56.0,
),
shape: CircleBorder(),
fillColor: Color(0xFF4C4F5E),
),

Answer 17

Not Material solution:
final double floatingButtonSize = 60;
final IconData floatingButtonIcon;
TouchableOpacity(
onTap: () {
/// Do something...
},
activeOpacity: 0.7,
child: Container(
height: floatingButtonSize,
width: floatingButtonSize,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(floatingButtonSize / 2),
color: Theme.of(context).primaryColor,
boxShadow: [
BoxShadow(
blurRadius: 25,
color: Colors.black.withOpacity(0.2),
offset: Offset(0, 10),
)
],
),
child: Icon(
floatingButtonIcon ?? Icons.add,
color: Colors.white,
),
),
)
You can use GestureDetector instead of TouchableOpacity library.

Answer 18

You can also use a RaisedButton with an image inside (for example for social login) like this (sizedbox with fittebox is needed to contraint the image on the specified size):
FittedBox(
fit: BoxFit.scaleDown,
child: SizedBox(
height: 60,
width: 60,
child: RaisedButton(
child: Image.asset(
'assets/images/google_logo.png'),
shape: StadiumBorder(),
color: Colors.white,
onPressed: () {},
),
),
),

Answer 19

ClipOval(
child: MaterialButton(
color: Colors.purple,
padding: EdgeInsets.all(25.0),
onPressed: () {},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
child: Text(
'1',
style: TextStyle(fontSize: 30.0),
),
),
),

Answer 20

Below code will create a Circle of radius 25 and will have white color add icon in it. and If user also want to have click method that can be simply achieved by wrapping a Container widget into GestureDetector() or InkWell().
Container(
height: 50,
width: 50,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(50 / 2),
),
child: Center(
child: Icon(
Icons.add,
color: Colors.white,
),
),
),

Answer 21

Just use the circle shape
MaterialButton(
onPressed: () {
print("Circle button pressed");
},
color: Colors.blue,
textColor: Colors.white,
child: Icon(
Icons.favorite,
size: 20,
),
padding: EdgeInsets.all(16),
//use this class Circleborder() for circle shape.
shape: const CircleBorder(),
)

Answer 22

Material 3 / Flutter 3.7.0-
Here is a CircleIconButton widget supporting standard, filled, filled tonal and outlined types from Material 3, as described in https://m3.material.io/components/icon-buttons/overview. The widget supports also toggle feature and enabled/disabled states.
import 'package:flutter/material.dart';
enum CircleIconButtonStyle {
standard,
filled,
filledTonal,
outlined,
}
class CircleIconButton extends StatelessWidget {
const CircleIconButton({
super.key,
required this.icon,
this.circleIconButtonStyle = CircleIconButtonStyle.filled,
required this.onPressed,
this.isSelected,
this.selectedIcon,
});
final IconData icon;
final CircleIconButtonStyle circleIconButtonStyle;
final VoidCallback? onPressed;
/// For toggle buttons
final bool? isSelected;
final Widget? selectedIcon;
#override
Widget build(BuildContext context) {
final ColorScheme colors = Theme.of(context).colorScheme;
return IconButton(
onPressed: onPressed,
icon: Icon(icon),
isSelected: isSelected,
selectedIcon: selectedIcon,
style: _CircleIconButtonStyleProvider.getStyle(
circleIconButtonStyle: circleIconButtonStyle,
isEnabled: onPressed != null,
isSelected: isSelected == true,
colors: colors),
);
}
}
// adapted from samples at https://api.flutter.dev/flutter/material/IconButton-class.html
class _CircleIconButtonStyleProvider {
static ButtonStyle? getStyle({
required CircleIconButtonStyle circleIconButtonStyle,
required bool isEnabled,
required bool isSelected,
required ColorScheme colors,
}) {
switch (circleIconButtonStyle) {
case CircleIconButtonStyle.standard:
return null;
case CircleIconButtonStyle.filled:
return isEnabled
? _enabledFilledButtonStyle(isSelected, colors)
: _disabledFilledButtonStyle(isSelected, colors);
case CircleIconButtonStyle.filledTonal:
return isEnabled
? _enabledFilledTonalButtonStyle(isSelected, colors)
: _disabledFilledTonalButtonStyle(isSelected, colors);
case CircleIconButtonStyle.outlined:
return isEnabled
? _enabledOutlinedButtonStyle(isSelected, colors)
: _disabledOutlinedButtonStyle(isSelected, colors);
}
}
static ButtonStyle _enabledFilledButtonStyle(
bool selected,
ColorScheme colors,
) {
return IconButton.styleFrom(
foregroundColor: selected ? colors.onPrimary : colors.primary,
backgroundColor: selected ? colors.primary : colors.surfaceVariant,
disabledForegroundColor: colors.onSurface.withOpacity(0.38),
disabledBackgroundColor: colors.onSurface.withOpacity(0.12),
hoverColor: selected
? colors.onPrimary.withOpacity(0.08)
: colors.primary.withOpacity(0.08),
focusColor: selected
? colors.onPrimary.withOpacity(0.12)
: colors.primary.withOpacity(0.12),
highlightColor: selected
? colors.onPrimary.withOpacity(0.12)
: colors.primary.withOpacity(0.12),
);
}
static ButtonStyle _disabledFilledButtonStyle(
bool selected,
ColorScheme colors,
) {
return IconButton.styleFrom(
disabledForegroundColor: colors.onSurface.withOpacity(0.38),
disabledBackgroundColor: colors.onSurface.withOpacity(0.12),
);
}
static ButtonStyle _enabledFilledTonalButtonStyle(
bool selected,
ColorScheme colors,
) {
return IconButton.styleFrom(
foregroundColor:
selected ? colors.onSecondaryContainer : colors.onSurfaceVariant,
backgroundColor:
selected ? colors.secondaryContainer : colors.surfaceVariant,
hoverColor: selected
? colors.onSecondaryContainer.withOpacity(0.08)
: colors.onSurfaceVariant.withOpacity(0.08),
focusColor: selected
? colors.onSecondaryContainer.withOpacity(0.12)
: colors.onSurfaceVariant.withOpacity(0.12),
highlightColor: selected
? colors.onSecondaryContainer.withOpacity(0.12)
: colors.onSurfaceVariant.withOpacity(0.12),
);
}
static ButtonStyle _disabledFilledTonalButtonStyle(
bool selected,
ColorScheme colors,
) {
return IconButton.styleFrom(
disabledForegroundColor: colors.onSurface.withOpacity(0.38),
disabledBackgroundColor: colors.onSurface.withOpacity(0.12),
);
}
static ButtonStyle _enabledOutlinedButtonStyle(
bool selected,
ColorScheme colors,
) {
return IconButton.styleFrom(
backgroundColor: selected ? colors.inverseSurface : null,
hoverColor: selected
? colors.onInverseSurface.withOpacity(0.08)
: colors.onSurfaceVariant.withOpacity(0.08),
focusColor: selected
? colors.onInverseSurface.withOpacity(0.12)
: colors.onSurfaceVariant.withOpacity(0.12),
highlightColor: selected
? colors.onInverseSurface.withOpacity(0.12)
: colors.onSurface.withOpacity(0.12),
side: BorderSide(color: colors.outline),
).copyWith(
foregroundColor:
MaterialStateProperty.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.selected)) {
return colors.onInverseSurface;
}
if (states.contains(MaterialState.pressed)) {
return colors.onSurface;
}
return null;
}),
);
}
static ButtonStyle _disabledOutlinedButtonStyle(
bool selected,
ColorScheme colors,
) {
return IconButton.styleFrom(
disabledForegroundColor: colors.onSurface.withOpacity(0.38),
disabledBackgroundColor:
selected ? colors.onSurface.withOpacity(0.12) : null,
side:
selected ? null : BorderSide(color: colors.outline.withOpacity(0.12)),
);
}
}

Answer 23

Try out this Card
Card(
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0), // half of height and width of Image
),
child: Image.asset(
"assets/images/home.png",
width: 50,
height: 50,
),
)

Answer 24

Card(
elevation: 4.0,
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(150),
),
child: InkWell(
onTap: (){},
child: Container(
width: 40,
height: 40,
padding: const EdgeInsets.all(3.0),
decoration: const BoxDecoration(
shape: BoxShape.circle, color: backGroundColor),
child: Image.asset(imageUrl)),
)),

Answer 25

Container(
width: 70.w,
height: 70.h,
alignment: AlignmentDirectional.topCenter,
child: MaterialButton(
onPressed: () {},
color: Color(0xff022C43),
textColor: Colors.white,
child: Icon(
Icons.arrow_forward,
size: 24,
),
padding: EdgeInsets.all(16),
shape: CircleBorder(),
)
)