search

shyndman / flutter_layout_grid

A grid-based layout system for Flutter, inspired by CSS Grid Layout
MIT License
441 stars 43 forks source link

Row gaps in nested grid cause overflow on parent grid #83

Closed dsyrstad closed 2 years ago

dsyrstad commented 2 years ago

In this example: https://gist.github.com/dsyrstad/ecc79ed05f25a462476ea414812158f2 I have two nested grids which use auto-sized rows and row gaps. The inner grid overflows the outer grid's cell by the exact amount of the row gap:

image

It overflows by exactly the InnerGrid rowGap (10) * 2 (two gaps). Notice that when InnerGrid is not nested (bottom of screenshot), it does not overflow.

If I change the InnerGrid rowGap to zero, it no longer overflows:

image

Note that the rowGap on OuterGrid is simply there so you can see Row 3 overflowing into the gap.

I'm using flutter_layout_grid 2.0.0 and Flutter 2.10.5. The problem is reproducible on all platforms that I've tried (Linux desktop, web, and Android).

dsyrstad commented 2 years ago

I think have I found a fix for this. This line does not consider the gaps in the min/max sizes: https://github.com/shyndman/flutter_layout_grid/blob/bcf4206a10c857d77ee0bbf31daa4cf4bff3f193/lib/src/rendering/layout_grid.dart#L524

Changing the line to:

    var axisMinSize = totalGapAlongAxis, axisMaxSize = totalGapAlongAxis;

seems to fix the issue. The tests pass, but I'm not sure if it is a solid fix. I can raise a PR if you'd like.

dsyrstad commented 2 years ago

I just went ahead and opened PR #84. All of the tests (including a new one) pass and the examples seem to work fine.

shyndman commented 2 years ago

Wonderful! Thank you @dsyrstad

I'll get that merged right away.

shyndman commented 2 years ago

Published as v2.0.1