Search code examples
flutterflutter-pageview

How to create infinity PageView in Flutter


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.


Solution

  • 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