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

Can't center Icon in a TextButton – Flutter

I’m trying to center the minimized icon in this Icon Button but can’t get it to work:

@override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SizedBox(
          height: 25,
          child: TextButton(
            onPressed: appWindow.minimize,
            style: const ButtonStyle(
                alignment: Alignment.center,
                padding: MaterialStatePropertyAll(EdgeInsets.all(0))),
            child: const Icon(
              Icons.minimize,
              color: Colors.white,
            ),
          ),
        ),
        TextButton(
            onPressed: maximizeOrRestore,
            child: Icon(
              appWindow.isMaximized ? Icons.fullscreen_exit : Icons.fullscreen,
              color: Colors.white,
            )),
        TextButton(
          onPressed: appWindow.close,
          child: const Icon(
            Icons.close,
            color: Colors.white,
          ),
        )
      ],
    );
  }

flutter image

I’m expecting the button to be centered and as you can see i’ve already tried using alignment and padding

Tags:

3

Answers


  1. 0

    It’s not that the icon is not centered, the Material minimize icon has blank space in the upper size, because it is suppose to be down to understand that is a minimize button just like the maximize button has blank space in the bottom size. What you can try is to use a different icon if you really want it to be centered. Try with Icons.horizontal_rule.

    Login or Signup to reply.
  2. 0

    When you say "center the minimized icon", do you mean that this icon should be between the other two icons? In that case, you just need to switch the first two widgets in the Row widget’s children.

    But I think you want the minimize icon to be higher so that it’s something like-> – ◾️ X

    If this is what you want then you can’t use Icons.minimize. If you check out this icon on this page, you will notice that the minimize icon looks like an underscore. This is by design. I think this looks good, but if you insist on having a minus sign kind of symbol then you can use Icons.remove_rounded.

    Login or Signup to reply.
  3. 0

    You can use CupertinoIcons.minus like

          TextButton(
        onPressed: appWindow.minimize,
        child: const Icon(
          CupertinoIcons.minus,
          color: Colors.white,
        ),
      ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search