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

1,642

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!

Share:
1,642
Vijay Kumar Kanta
Author by

Vijay Kumar Kanta

Linux bigot here. Programming is my daily routine with the system. Be it a script or a complete application, it excites me more than anything else.

Updated on December 06, 2022

Comments

  • Vijay Kumar Kanta
    Vijay Kumar Kanta over 1 year

    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?