Multiple items with end-padding

[rvanderlinden]

When displaying multiple items on the screen (with enableInfiniteScroll: false and pageSnapping: true), the first and last item in the carousel must reach the center of the screen before scroll stops working. Or, according to the documentation of padEnds: If this is set to true and viewportFraction < 1.0, padding will be added such that the first and last child slivers will be in the center of the viewport when scrolled all the way to the start or end, respectively..

This gives the following result:

Settings padEnds: false gives the following result:

Instead, I would like to have a gutter on either side of the carousel. Goal:

Is there a way to achieve this result? So far, I have attempted:

1. Add a padding / margin to the first and last item in the list. Unfortunately, all items are uniformly sized so they do not maintain their aspect ratio (the first and last are now less wide than the other items).
2. Add a container with padding around the CarouselSlider with clipBehaviour: Clip.none. This provides the intended result visually, but now the partially cut-off next item (achieved with viewportFraction < 1) is removed after scrolling when it is located in this padding because it is no longer part of the CarouselSlider viewport.
3. Add a row with multiple items per 'page', so that the page centers in the screen and not the individual items. The problem with this setup is that the last page may not contain the correct amount of items, which gives a similar result with a lot of white space.

Thanks!