Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bottom overflow by "X' pixel #98

Open
OAndreLuizSilva opened this issue Sep 28, 2021 · 1 comment
Open

Bottom overflow by "X' pixel #98

OAndreLuizSilva opened this issue Sep 28, 2021 · 1 comment
Labels
bug Something isn't working

Comments

@OAndreLuizSilva
Copy link

OAndreLuizSilva commented Sep 28, 2021

This is the same issue reported on #59.

On small devices, having 5 items can overflow because the width of every single item is fixed when you are building them: 130 for the selected one and 50 otherwise. I've tested on a Nexus 5S that has 320 pixels wide and with 5 items without considering padding it requires 330 logical pixels.

My suggestion would be to calculate twice the space for the selected one and divide the remaining space to the other items and pass this constraints to the item being built. Something like this:

final screenSize = MediaQuery.of(context).size;

    const itemSidePadding = 12;

    final maxItemWidth =
        screenSize.width * (1 / items.length) - (itemSidePadding * 2);
    final maxSelectedWidth =
        screenSize.width * (2 / (items.length)) - (itemSidePadding * 2);

Sorry if I did something wrong here, this is my first ever issue report on git.

Love your work, thank you for this amazing package!

@batuhankrbb
Copy link

Same problem here. The size of the items isn't dynamic.

@antonio-pedro99 antonio-pedro99 added the bug Something isn't working label Sep 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants