Filling hexagon with square image not possible in grid

[notsag-dev]

Hi. I'm filling hexagons with square images (height == width). If I use the individual hexagon that's not a problem because I can set the height and width and the image fills the hexagon totally fine if I set width = height. But in the grid, I don't know why by default the grid hexagons seem to not have same width and height, they're slightly different, and even if the image inside is set a BoxFit.fill, fitHeight, fitWidth or whatever option it never fills the hexagon totally. Am I missing something? Any ideas?

Thank you!

[notsag-dev]

There seems to have a inBounds parameter in the code that I don't know if it's possible to set for Grids, but that is what makes the relation between height and width to not be 1 but 0.75

[notsag-dev]

Hi @orlikraf, if you give me context on this and there's something to fix maybe I can jump on it, it's important for my project to be able to at least fill an hexagon of the grid with a square image, and ideally to be able to set any type of BoxFit for any image size.

[orlikraf]

Hi, I'm sorry for not responding to you before - I'm busy with my daily work and haven't free time to work on hexagons in a while.

I remember as much about the inBounds = false was used exactly in grid to let the hexagons overlap other space and draw the edges further than the rectangle center body (this is where the child is constrained to show it's self in grids).

Keep in mind that hexagons aren't squares so something will be cut off. I assume you want to decorate with something nicer that just boring single color so you should probably consider getting the background image under the clipping on the HexagonPainter.

If you come up with something I can include it into release or at least discuss the solution on weekends.

[notsag-dev]

Thank you for your response @orlikraf, I was struggling to make an image cover the entire hexagon but I found a workaround.

I have a CachedNetworkImage as a child of the hexagon, and independently of the BoxFit I used it was impossible to make it fit (there were always empty spaces around the edges).

But I found this workaround: Wrap the child image in an AspectRatio widget:

  AspectRatio(
       aspectRatio: 0.88,
        child: CachedNetworkImage(
            fit: BoxFit.cover,
            imageUrl: {{imageUrl}})

With BoxFit.cover + AspectRatio around 0.88 it's filling the thing for any image so this is good enough for me.

Thank you again for your message and for this package.

[notsag-dev]

For the record, I double checked and the solution was right in the example :facepalm:

There are constants for aspect ratio for pointy or flat hexagons already! This is what works best for my hexagon (pointy)

    aspectRatio: HexagonType.POINTY.ratio,

I feel so dumb now but I'm happy I found this lol