Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to decrease IconButton size properly when wrapped by Ink?

At the Flutter documentation, the recommended way for building an IconButton widget with opaque colored background is the following:

class IconButtonExample extends StatelessWidget {
  const IconButtonExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white,
      child: Center(
        child: Ink(
          decoration: const ShapeDecoration(
            color: Colors.lightBlue,
            shape: CircleBorder(),
          ),
          child: IconButton(
            icon: const Icon(Icons.add),
            color: Colors.white,
            onPressed: () {},
          ),
        ),
      ),
    );
  }
}

enter image description here

However, if I want to decrease the size of the overall size of the button to 24, like the following:

          child: Ink(
            height: 24,
            width: 24,
            decoration: ShapeDecoration(

the icons is not centered anymore, although its content size would fit in the mentioned size.

an IconButton wrapped by Ink widget, but it is not centered

Even decreasing the Icon widget size itself to 14, don’t give a satisfying result, and using Center widget and Alignment.center also do not solve it.

I’m not willing to use FAB widget, because FAB literally is supposed to float in the screen. The widget I’m trying to achieve is supposed to exist as an generic widget.

Tags:

4

Answers


  1. 0

    24 is the iconSize and it left no space for default padding on IconButton.You can set zero padding or adjust the size

    IconButton(
  padding: EdgeInsets.zero,
  icon: const Icon(Icons.add),
  color: Colors.white,
  onPressed: () {},
),
    Login or Signup to reply.
  2. 0

    You could just create this button from scratch.

    InkWell(
  onTap: () {},
  child: Container(
    margin: const EdgeInsets.only(right: 8.0),
    decoration: BoxDecoration(
      color: Colors.blue,
      shape: BoxShape.circle,
    ),
    child: Icon(
      Icons.info_outline,
      color: Colors.white,
    ),
  ),
);
    Login or Signup to reply.
  3. 0

    You can use Transform.scale to scale that whole widget or you can try to warp that IconButton with CircleAvatar instead of Ink.

    Login or Signup to reply.
  4. 0

    Material3 now provides IconButton, IconButton.filled, and IconButton.filledTonal widgets for flutter.

    To show an IconButton with a background color you can simply use the IconButton.filled widget. It has multiple options to change icon size, splash radius, splash color, etc.

    IconButton.filled(
          icon: const Icon(Icons.volume_up),
          iconSize: 50,
          tooltip: 'Increase volume by 10',
          onPressed: () {
            
          },
        ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search