pedromassango / bottom_navy_bar

A beautiful and animated bottom navigation
https://youtu.be/jJPSKEEiN-E
Apache License 2.0
1.02k stars 217 forks source link

Bottom overflow by "X' pixel #98

Open OAndreLuizSilva opened 3 years ago

OAndreLuizSilva commented 3 years ago

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 commented 2 years ago

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