Flutter List View Item occupy screen height and snap to next item on scroll

Question

I am trying to achieve something similar to the CureJoy iOS app where each item looks like an independent vertical list item fully occupying the screen height, when we scroll even a little down, it snaps to next item occupying entire screen height. I have tried many things like

NotificationListener(onNotification: ... // other code

wrapper to listview and calling a function which handles scroll change

_func(ScrollNotification notification) {
    ... // other code
    double scollPos = notification.metrics.pixels;
    double toScroll = oldScrollPos;

    newScrollPos = scrollPos;
    if(newScrollPos < oldScrollPos)
        toScroll -= rowHeight;
    else
        toScroll += rowHeight;
    oldScrollPos = toScroll;

    _scrollController.animateTo(toScroll,
        duration: const Duration(milliseconds: 500),
        curve: Curves.easeOut,
    );

The other code actually does some logic that holds a previous scroll position that could be lesser or greater than current scroll position, according to which I will forcefully step to next or previous list item position. This is very ineffective and scrolls to many wrong positions and throws error at the end.

Is there a very elegant and easier solution?

Vijay Kumar Kanta Vijay Kumar Kanta · Accepted Answer · 2018-07-22T07:45:43

Sorry folks, but my nature of working on existing things to get desired result has taken a toll on me, but there seems to be a PageView class ready made in Flutter. Ah, I feel ashamed!

Flutter List View Item occupy screen height and snap to next item on scroll

1 Answers