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!
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:
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!