Home > Net >  Flutter : SliverAppBar actions button
Flutter : SliverAppBar actions button

Time:02-23

I put a IconButton to SliverAppBar actions , but the output compress to oval shape

enter image description here

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

enter image description here

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.

enter image description here

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: () {},
),
  • Related