2

How to create an PageView which are supported circle scroll in Flutter? That's mean when I stand on 0 page, I could scroll to left to the last page.

Updated: I answered this question and update a gist source also.

Trần Đức Tâm
  • 4,037
  • 3
  • 30
  • 58
  • I do not think it is possible in flutter right now. I have tried every thing for the same feature. Didn't found anything useful. – Jay Mungara Nov 26 '19 at 10:29

2 Answers2

1

What I did with mine was I set my page controller's initialPage to 10000 * pageCount, and in my page view itself, I have itemBuilder: (context, index) => pages[index % pageCount], and itemCount: null. It's not really infinite, but most users will not scroll 10000 pages back, so it works for my use case. As far as I know, there isn't an elegant way to make it truly infinite. You could probably set up a listener so that whenever the controller.page is about to become 0, you set it back to 10000 * pageCount or something similar.

David L.
  • 762
  • 4
  • 7
  • 2
    :/ This make my page view be not recyclable. – Trần Đức Tâm Nov 26 '19 at 10:41
  • Not sure what you mean by that. You can put your PageView in a separate StatefulWidget and use that as a custom widget in your code. Dispose of the controller properly in your state's `dispose` method, and you should be able to reuse this component anywhere, as long as you pass in the children list. AFAIK, this is how most carousel plugins on pub.dev work too. – David L. Nov 26 '19 at 10:51
1

I found a solution here. I create a CustomScrollView with 2 slivers. One for go forward, one for go back. However, I have to calculate if my list short.

typedef Widget Builder(BuildContext buildContext, int index);

class InfiniteScrollView extends StatefulWidget {
  final Key center = UniqueKey();
  final Builder builder;
  final int childCount;

  InfiniteScrollView(
      {Key key, @required this.builder, @required this.childCount})
      : super(key: key);

  @override
  _InfiniteScrollViewState createState() => _InfiniteScrollViewState();
}

class _InfiniteScrollViewState extends State<InfiniteScrollView> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: CustomScrollView(
        center: widget.center,
        scrollDirection: Axis.horizontal,
        slivers: <Widget>[
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) => widget.builder(
                  context, widget.childCount - index % widget.childCount - 1),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(widget.builder),
            key: widget.center,
          )
        ],
      ),
    );
  }
}

Updated: I write a new widget which support infinity TabBar.

https://gist.github.com/MrNinja/6f6a5fc73803bdfaf2a493a35c258fee

Trần Đức Tâm
  • 4,037
  • 3
  • 30
  • 58