Can't center Icon in a TextButton-CodePudding

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,
          ),
        )
      ],
    );
  }

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

CodePudding user response：

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.

CodePudding user response：

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.

CodePudding user response：

You can use CupertinoIcons.minus like

      TextButton(
        onPressed: appWindow.minimize,
        style: const ButtonStyle(
            alignment: Alignment.center,
            padding: MaterialStatePropertyAll(EdgeInsets.all(0))),
        child: const Icon(
          CupertinoIcons.minus,
          color: Colors.white,
        ),
      ),