padding on elevated buttons flutter (noob issue)

[placeboroy]

How do i eliminate this blue rectangles that looks like paddings, i try to remove all the paddings but they still

[rydmike]

Hi @placeboroy, thanks for the question.

I am not entirely sure if you are asking for those Material default paddings to be removed from ALL elevated buttons on your theme, or for just a few specific buttons in your app.

Generally I would not recommend removing the padding from from all ElevatedButtons, so let's just go with that you want them removed from a few specific use cases.

In that case you can do something like this:

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

  @override
  Widget build(BuildContext context) {
    const double buttonSize = 55;
    return RepaintBoundary(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        spacing: 0,
        children: <Widget>[
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              minimumSize: const Size(buttonSize, buttonSize),
              padding: EdgeInsets.zero,
            ),
            onPressed: () {},
            child: const Icon(Icons.play_arrow),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  minimumSize: const Size(buttonSize, buttonSize),
                  padding: EdgeInsets.zero,
                ),
                onPressed: () {},
                child: const Icon(Icons.play_arrow),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  minimumSize: const Size(buttonSize, buttonSize),
                  padding: EdgeInsets.zero,
                ),
                onPressed: () {},
                child: const Icon(Icons.play_arrow),
              ),
            ],
          ),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              minimumSize: const Size(buttonSize, buttonSize),
              padding: EdgeInsets.zero,
            ),
            onPressed: () {},
            child: const Icon(Icons.play_arrow),
          ),
        ],
      ),
    );
  }
}

If you buttons are smaller than the default tap target size, 48dp, you will notice that the spacing is inserted anyway on mobile devices, but not on desktop:

For example:

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

  @override
  Widget build(BuildContext context) {
    const double buttonSize = 40;
    return RepaintBoundary(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        spacing: 0,
        children: <Widget>[
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              minimumSize: const Size(buttonSize, buttonSize),
              padding: EdgeInsets.zero,
            ),
            onPressed: () {},
            child: const Icon(Icons.play_arrow),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  minimumSize: const Size(buttonSize, buttonSize),
                  padding: EdgeInsets.zero,
                ),
                onPressed: () {},
                child: const Icon(Icons.play_arrow),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  minimumSize: const Size(buttonSize, buttonSize),
                  padding: EdgeInsets.zero,
                ),
                onPressed: () {},
                child: const Icon(Icons.play_arrow),
              ),
            ],
          ),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              minimumSize: const Size(buttonSize, buttonSize),
              padding: EdgeInsets.zero,
            ),
            onPressed: () {},
            child: const Icon(Icons.play_arrow),
          ),
        ],
      ),
    );
  }
}

You will then need to remove the min tapTargetSize restriction on mobile, to get none padded buttons, despite they already being formatted as such:

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

  @override
  Widget build(BuildContext context) {
    const double buttonSize = 40;
    return RepaintBoundary(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        spacing: 0,
        children: <Widget>[
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              minimumSize: const Size(buttonSize, buttonSize),
              padding: EdgeInsets.zero,
              tapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
            onPressed: () {},
            child: const Icon(Icons.play_arrow),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  minimumSize: const Size(buttonSize, buttonSize),
                  padding: EdgeInsets.zero,
                  tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                ),
                onPressed: () {},
                child: const Icon(Icons.play_arrow),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  minimumSize: const Size(buttonSize, buttonSize),
                  padding: EdgeInsets.zero,
                  tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                ),
                onPressed: () {},
                child: const Icon(Icons.play_arrow),
              ),
            ],
          ),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              minimumSize: const Size(buttonSize, buttonSize),
              padding: EdgeInsets.zero,
              tapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
            onPressed: () {},
            child: const Icon(Icons.play_arrow),
          ),
        ],
      ),
    );
  }
}

---

If you were using IconButton the styling is pretty similar.

---

If you want to remove minimum tap target size for all buttons on mobile, so paddings match desktop default, or wise versa, you can do so with a theme setting that is also supported in FlexColorScheme and the Themes Playground.

By default mobile builds have a tap target padding but desktop/web builds do not. You can make it so that all platforms have it or do not have it, see here:

---

If you really want to remove this padding an ALL ElevatedButton:s globally in your theme, that is also doable, but it is not directly supported in FlexColorScheme or the Themes Playground. But you can still add it to the theme produced by FlexColorScheme by using ThemeData.copyWith. That would involve putting the styling above into the ElevatedButton component theme, after FlexColorScheme has produced the theme and using that theme as you app theme.

There are some similar example on how to do that in the discussions.

---

Since this is not really an issue, I will convert it to a discussion and we can continue there if you need more assistance.