Add "EdgeInsets? margin" to ButtonStyle

[LinHaoLove]

Use case

In some cases, I need the desktop and mobile to have the same button layout. The Button style is now available in different styles for different platforms. And the only option.

Proposal

Add "EdgeInsets? margin" to ButtonStyle. If margin==null, the existing style is used. If margin! =null, I want to be able to achieve the desired style. Thank you very much.

[huycozy]

Hi @LinHaoLove I wonder how the margin works inside ButtonStyle. Could you please be more specific?

ButtonStyle includes visual properties for the button such as color, textStyle or padding between the button's boundary and its child. The properties apply inside the button. Meanwhile, margin as I understand it is the distance between the button and the ancestor widget.

[LinHaoLove]

Hi @LinHaoLove I wonder how the margin works inside ButtonStyle. Could you please be more specific?

ButtonStyle includes visual properties for the button such as color, textStyle or padding between the button's boundary and its child. The properties apply inside the button. Meanwhile, margin as I understand it is the distance between the button and the ancestor widget.

For example, when multiple buttons are placed in a Row or Column. And "mainAxisAlignment: MainAxisAlignment.start,", The spacing between buttons will vary on different platforms. I hope that sometimes they are the same on different platforms. And the spacing can be set, I cannot modify the spacing between them now. Now I have customized a button to solve this problem, but my coding skills are not very good.

[Piinks]

@LinHaoLove can you share an example of what you are specifically trying to achieve with ButtonStyle? Some sample code would be very helpful to identify the issue here.

For example, when multiple buttons are placed in a Row or Column.

ButtonStyle only applies to one button, it does not apply to multiple buttons or how they are positioned in relation to each other.

[LinHaoLove]

您能分享一个您特别想用 ButtonStyle 实现的目标的例子吗？一些示例代码对于识别此处的问题非常有帮助。

例如，当多个按钮放置在行或列中时。

ButtonStyle 仅适用于一个按钮，不适用于多个按钮或它们彼此之间的位置。

Example.zip

Thank you very much. I have provided screenshots of the running effect and code. Ultimately, I hope to use the same spacing between buttons on various platforms. If there are other options, they are also possible.

[huycozy]

I extracted the Example.zip file above so others can easily look into it.

Sample code

Demo

column_android	column_windows

[Piinks]

Thanks for extracting this! This is something that should be handled with the Padding widget, or in a Row/Column I've seen folks use a SizedBox for spacing as well. We typically do not enumerate padding properties on widgets, since we have a Padding widget!

Thanks for clarifying the issue.

[LinHaoLove]

Thanks for extracting this! This is something that should be handled with the Padding widget, or in a Row/Column I've seen folks use a SizedBox for spacing as well. We typically do not enumerate padding properties on widgets, since we have a Padding widget!

Thanks for clarifying the issue.

Hi， Based on the current state, there will be different spacing on different platforms. SizedBox or Padding will increase their spacing on top of the existing spacing. And it won't keep their spacing the same. So，we need to first unify their existing spacing by a optional way .

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.