A Flutter widget for Scrollview, pop when overscroll like Instagram

scrollview

a flutter widget for scrollv,iew, pop when overscroll like instagram, pinterest.

getting started

1. include the package to your project as dependency:

dependencies:
  	overscroll_pop: <latest version>

2. use the widget:

wrap your scaffold or top widget by overscrollpop, every scrol,lview widget (listview, gridview, pageview, customscrollview, …) which has scroll physics clampingscrollphysics(important) will have overscroll to pop effect.

    materialapp(
      home: scaffold(
        appbar: appbar(
          title: const text('overscroll example'),
        ),
        body: builder(
          builder: (c) => center(
            child: hero(
              tag: '${scrolltopopoption.start}${dragtopopdirection.toright}',
              child: elevatedbutton(
                onpressed: () => pushpage(
                  c,
                  (buildcontext context, _, __) => verticalscro,llview(
                    scrolltopopoption: scrolltopopoption.start,
                    dragtopopdirection: dragtopopdirection.toright,
                  ),
                ),
                child: text('vertical scrol,lview ${scrolltopopoption.start}'),
              ),
            ),
          ),
        ),
      ),
    );

    class verticalscrollview extends statelesswidget {
      final scrolltopopoption scrolltopopoption;
      final dragtopopdirection? dragtopopdirection;

      const verticalscrollview({
        key? key,
        this.scrolltopopoption = scrolltopopoption.start,
        this.dragtopopdirection,
      }) : super(key: key);

      @override
      widget build(buildcontext context) {
        return overscrollpop(
          scrolltopopoption: scrolltopopoption,
          dragtopopdirection: dragtopopdirection,
          child: container(
            clipbehavior: clip.hardedge,
            decoration: boxdecoration(borderradius: borderradius.circular(16.0)),
            child: scaffold(
              appbar: preferredsize(
                preferredsize: size.fromheight(ktoolbarheight),
                child: hero(
                  tag: '$scrolltopopoption${dragtopopdirection ?? ''}',
                  child: appbar(
                    title: text(
                      'vertical scrollview',
                      overflow: textoverflow.visible,
                    ),
                  ),
                ),
              ),
              body: listview.builder(
                physics: const clampingscrollphysics(),
                itembuilder: (_, index) => container(
                  height: 160.0,
                  margin: const edgeinsets.symmetric(vertical: 8.0),
                  color: index % 2 == 0 ? colors.cyanaccent : colors.orangeaccent,
                  alignment: alignment.center,
                  child: column(
                    mainaxisalignment: mainaxisalignment.center,
                    children: [
                      text(scrolltopopoption.tostring()),
                      if (dragtopopdirection != null)
                        text(dragtopopdirection.tostring()),
                    ],
                  ),
                ),
                itemcount: mediaquery.of(context).size.height ~/ 160.0 + 2,
              ),
            ),
          ),
        );
      }
    }

3. configure scroll direction and add extra drag to pop:
   • by default, the effect only apply for overscroll at the start of scrollview (top edge of vertical scroll, left edge of horizontal scroll)

- to enable the end edge (or both edges) for overscroll to pop, set `scrolltopopoption` to `scrolltopopoption.end` (or `scrolltopopoption.both`)
    ```
    overscrollpop(
      scrolltopopoption: scrolltopopoption.end, // or scrolltopopoption.both
      ...
    )
    ```

- beside overscroll, you can config the other drag direction to achieve the pop effect by passing `dragtopopdirection`
    ```
    overscrollpop(
      dragtopopdirection: dragtopopdirection.totop, //  totop, tobottom, toleft, toright, horizontal and vertical
      ...
    )
    ```

1. vertical scroll: drag to left, right or horizontal (both left and right)

2. horizontal scroll: drag to top, bottom or vertical (both top and bottom)