I put a IconButton
to SliverAppBar
actions , but the output compress to oval shape
actions: [
IconButton(
splashRadius: 23,
icon: Container(
decoration: BoxDecoration(
color: Color(0xFF05122B),
borderRadius: BorderRadius.circular(100)
),
padding: EdgeInsets.all(10),
child: Center(child: Icon(OIcons.share, color: Colors.white, size: 20))
),
onPressed: (){
},
),
],
if using shape
with padding
, icon not align center
IconButton(
splashRadius: 23,
icon: Container(
decoration: BoxDecoration(
color: Color(0xFF05122B),
shape: BoxShape.circle
),
padding: EdgeInsets.all(10),
child: Center(child: Icon(OIcons.share, color: Colors.white, size: 20))
),
onPressed: (){
},
),
if using shape
with width
and height
, no matter how much width and height is set, the button size still small.
IconButton(
splashRadius: 23,
icon: Container(
decoration: BoxDecoration(
color: Color(0xFF05122B),
shape: BoxShape.circle
),
height: 50,
width: 50,
child: Center(child: Icon(OIcons.share, color: Colors.white, size: 20))
),
onPressed: (){
},
),
CodePudding user response:
You can use CircleAvatar
instead of Container
CircleAvatar(
backgroundColor: Color(0xFF05122B),
child: IconButton(
padding: EdgeInsets.all(0),
splashRadius: 23,
icon: Icon(Icons.share, color: Colors.white, size: 20),
onPressed: () {},
),
),
CodePudding user response:
You can use shape
instead of borderRadius
on BoxDecoration
. To increase the icon
size, you need to use iconSize:x
IconButton(
splashRadius: 24,
iconSize: 43,
icon: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xFF05122B),
),
child: Center(
child: Icon(Icons.share, color: Colors.white, size: 20),
),
),
onPressed: () {},
),