afonsocraposo / buttons_tabbar

A Flutter package that implements a TabBar where each label is a toggle button.
https://pub.dev/documentation/buttons_tabbar/latest/
MIT License
103 stars 34 forks source link

refactor(style): make button spacing more proportional #44

Closed ryanaidilp closed 1 year ago

ryanaidilp commented 1 year ago

Pull Request Description

In this pull request, I've undertaken a significant style enhancement focused on creating a more visually harmonious user interface. The issue at hand was the irregular spacing between buttons caused by direct padding implementation. Previously, when padding was directly applied using EdgeInsets.all(16), it resulted in uneven distances between buttons, leading to an unbalanced layout:

Before:

16 -- First Tab -- 16 -- 16 -- Second Tab -- 16 -- 16 -- Last Tab -- 16

Simulator Screen Recording - iPhone 14 Pro Max - 2023-10-14 at 11 33 20

To rectify this, I've implemented a more precise logic to ensure proportional spacing between buttons. Through careful adjustments in the code, I've calculated margins dynamically based on the provided widget.buttonMargin values and the position of the button. This meticulous approach results in a visually appealing and symmetrical button layout:

After:

16 -- First Tab -- 8 - 8 -- Second Tab -- 8 - 8 -- Last Tab -- 16

Simulator Screen Recording - iPhone 14 Pro Max - 2023-10-14 at 11 33 56

By applying these changes, the spacing between buttons is now not only consistent but also proportionate, creating a more polished and aesthetically pleasing user interface. This enhancement significantly improves the overall user experience and aligns the application's visual elements with modern design standards.

afonsocraposo commented 1 year ago

Hey @ryanaidilp ! Thank you a lot for your contribution 🙏🏻 Can you please implement the suggestions above and bump the version number?

ryanaidilp commented 1 year ago

Hey @ryanaidilp ! Thank you a lot for your contribution 🙏🏻 Can you please implement the suggestions above and bump the version number?

Thank you for your feedback! I've implemented the suggestions and bumped the version number to 1.3.7+2 in my recent push. Please feel free to review it when you get a chance. Let me know if there's anything else I can assist with.

afonsocraposo commented 1 year ago

Thank you a lot for your contribution @ryanaidilp !!! 🙇🏻

ryanaidilp commented 1 year ago

Thank you a lot for your contribution @ryanaidilp !!! 🙇🏻

You're welcome! 😊 Thank you as well for creating this amazing package 👏👍

afonsocraposo commented 1 year ago

Thank you a lot for your contribution @ryanaidilp !!! 🙇🏻

You're welcome! 😊 Thank you as well for creating this amazing package 👏👍

No problem at all. I have not been working in Flutter for more than one year, so it's really good that people like you still put the effort into this! 💪🏻

Btw, here's the link in pub.dev: https://pub.dev/packages/buttons_tabbar/versions/1.3.8