ListView / GridView paging?

[Martin Rybak]

In iOS, the UIScrollView class has pagingEnabled property, which automatically pages content in multiples of a UITableView's or UICollectionView's bounds.

How best to replicate this behavior in a Flutter ListView or GridView? Thanks.

[Adam Barth]

Does PageView do what you're looking for?

https://docs.flutter.io/flutter/widgets/PageView-class.html

Adam

On Tue, May 1, 2018 at 9:22 AM Martin Rybak <martin...@gmail.com> wrote:

In iOS, the UIScrollView class has pagingEnabled property, which automatically pages content in multiples of a UITableView's or UICollectionView's bounds.

How best to replicate this behavior in a Flutter ListView or GridView? Thanks.

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Martin Rybak]

Not really. I am looking to take add paging to an existing ListView or GridView.

[Adam Barth]

Here are a couple things to try.  I haven't tried them myself, so I'm not completely sure what they'll do, but they might help:

1) Use "const PageScrollPhysics()" for the "physics" property of your GridView or PageView.

2) Use a PageController for the "controller" property of your  GridView or PageView.

You could also try both if neither alone does what you're looking for.

Adam

[Martin Rybak]

Thanks! The first option worked, whereas the second did not. However now I cannot use the "BouncingScrollPhysics" I was using previously. It would be ideal if the paging behavior were independent of the scrolling physics. Would this require a major architectural change? Should I create a feature ticket for it?

[Adam Barth]

On Tue, May 1, 2018 at 10:38 AM Martin Rybak <martin...@gmail.com> wrote:

Thanks! The first option worked, whereas the second did not. However now I cannot use the "BouncingScrollPhysics" I was using previously. It would be ideal if the paging behavior were independent of the scrolling physics. Would this require a major architectural change? Should I create a feature ticket for it?

You should be able to combine the two using the "applyTo" function:

const PageScrollPhysics().applyTo(const BouncingScrollPhysics())

Adam

[Martin Rybak]

Remarkable, thanks! However when testing it out, it has some strange behavior. When arriving at the last page, it initially overscrolls a bit (to fit a full page), then automatically scrolls back to the last item.

[Adam Barth]

Yes, the issue is that the grid (or list) isn't an even multiple of the viewport size.  The page physics will compute an animation for you that takes you to the page boundary, which ends up overscrolling in this case.  When that animation ends, the "bounce" physics will create an animation to remove the overscroll.

The PageView widget avoids this problem by always having content that's an exact multiple of the viewport.  It does this by using a SliverFillViewport widget, which fills the viewport.

Two approaches for fixing this behavior jump to mind, but both are fairly advanced:

1) You can create your own version of BouncingScrollPhysics (perhaps by subclassing the existing BouncingScrollPhysics) that bounces to even multiples of the viewport rather than to zero overscroll.

2) You can create a sliver that takes the SliverList or SliverGrid child and rounds its scroll extent up to a multiple of the viewport.  You'd then use a CustomScrollView widget to use both this new sliver and the SliverList/SliverGrid.

My guess is that (2) will give you the best results (and would be generically re-usable), but it will involve learning a bit about how slivers work:

https://docs.flutter.io/flutter/rendering/RenderSliver-class.html

Adam

On Wed, May 2, 2018 at 10:41 AM Martin Rybak <martin...@gmail.com> wrote:

Remarkable, thanks! However when testing it out, it has some strange behavior. When arriving at the last page, it initially overscrolls a bit (to fit a full page), then automatically scrolls back to the last item.

--

[Martin Rybak]

Interesting. I really appreciate you spelling out these advanced options. However, given that this is pretty straightforward functionality in iOS, does it warrant a simpler, built-in API for Flutter developers? I can create a feature request in Github.