Is there a way to have an infinite loop using PageView in Flutter?

Question

Is there a way to have an infinite loop using PageView in Flutter? For example if my PageView has 5 pages, after swiping to page 5, I would be able to swipe again in the same direction to get to Page 1.

Answer 1

By default, PageView.builder is infinite in flutter. Unless you provide an itemCount.

The following will print page from 0 to 4 infinitely

final controller = new PageController(initialPage: 999);
 ...

new PageView.builder(
      controller: controller,
      itemBuilder: (context, index) {
        return new Center(
          child: new Text('${index % 5}'),
        );
      },
)

Answer 2

If you have a list of pre-defined Widgets, you can achieve continuous scrolling using:

return PageView.builder(
  itemBuilder: (context, index) {
    return _children[index % _children.length];
  },
  controller: pageController,
);

Answer 3

I've found a good solution using this lib https://pub.dev/packages/infinity_page_view

Just import the lib and use InfinityPageView instead of PageView

InfinityPageView(
  controller: infinityPageController,
  itemCount: colorList.length,
  itemBuilder: (context, index) {
    return Container(
      color: colorList[index];
    );
  },
)

Answer 4

You can achieve infinite scrolling using PageView builder, without giving value to itemCount there will be infinite pages, you just have to maintain the page index which will be painted on screen.

PageView.builder(
  controller: _pageController,
  scrollDirection: Axis.horizontal,
  onPageChanged: (index) {
    setState(() {
      _currentIndex = index % _walkthroughSlides.length;
    });
  },
  itemBuilder: (context, index) {
    return _walkthroughSlides[index % _walkthroughSlides.length];
  },
)

Answer 5

The answer mentioned above will take more memory and probably that is redundancy and when you are on the first child you can't go the last one by scrolling in reverse direction

import 'package:flutter/material.dart';
import 'dart:async';

class InfiniteScroll extends StatefulWidget{
  final List<Widget> children;
  InfiniteScroll({this.children});
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _InfiniteScrollState();
  }
}

class _InfiniteScrollState extends State<InfiniteScroll>{
  List<Widget> children;
  ScrollController s;
  int _pos;

  @override
  void initState() {
    _pos=1;
    children = [widget.children[widget.children.length - 1]];
    for (int i = 0; i < widget.children.length; ++i) {
      children.add(widget.children[i]);
    }
    if (widget.children.length > 1) {
      children.add(children[1]);
    }
    s = PageController();
    super.initState();
     WidgetsBinding.instance
        .addPostFrameCallback((_){
          s.jumpTo(MediaQuery.of(context).size.width);
        });
 
  }
  


  @override
  Widget build(BuildContext context) {
    
    return PageView.builder(
      scrollDirection: Axis.horizontal,
      controller: s,
      onPageChanged: (int i) {
        setState(() {
          _pos=i+1;
        });
        if (i == children.length - 1) {
          Timer(Duration(milliseconds: 400), () {
            s.jumpTo(MediaQuery.of(context).size.width);
          });
          setState(() {
          _pos=1;
        });

        } else if (i == 0) {
          Timer(Duration(milliseconds: 400), () {
            s.jumpTo(MediaQuery.of(context).size.width * (children.length - 2));
          });
          setState(() {
            _pos=children.length-2;
          });
        }
        
      },
      itemBuilder: (BuildContext context, int index) {
        return children[index];
      },
      itemCount: children.length,
    );
  }
}

and now you can use it as

import 'package:flutter/material.dart';
import 'package:test1/Widgets/infinite_scroll.dart';


class CoursesPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return 
        Container(
          height: MediaQuery.of(context).size.height,
          child: 
              InfiniteScroll(
                children: <Widget>[
                  Container(
                    color: Colors.red,
                    child: Center(child: Text("1",style: TextStyle(color: Colors.white,fontSize: 50),),),
                  ),
                  Container(
                    color: Colors.black,
                    child: Center(child: Text("2",style: TextStyle(color: Colors.white,fontSize: 50),),),
                  ),
                  Container(
                    color: Colors.green,
                    child: Center(child: Text("3",style: TextStyle(color: Colors.white,fontSize: 50),),),
                  ),
                  Container(
                    color: Colors.blue,
                    child: Center(child: Text("4",style: TextStyle(color: Colors.white,fontSize: 50),),),
                  ),
                ],
              )
        );
  }
}

Answer 6

It's work without controller. You need comment prop itemCount & repce index like bellow.

PageView.builder(
  onPageChanged: (v) {
    setState(() => _currentImage = v % images.length);
  },
  scrollDirection: Axis.horizontal,
  // itemCount: images.length,
  itemBuilder: (ctx, i) {
    return CustomImageNetwork(
      width: imageSize,
      height: imageSize,
      image: images[i % images.length] ?? '',
    );
  },
)

Answer 7

Used extention beside remi solution

extension ListX<E> on List {
  E loop(int index) => this[index % length];
}

class _CarouselWidgetState extends State<CarouselWidget> {
  late final List<Widget> children;
  late final PageController controller;
  @override
  initState() {
    super.initState();
    children = widget.children;
    controller = PageController(initialPage: 100);
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: controller,
      // itemCount: children.length,
      itemBuilder: (context, pagePosition) {
        return children.loop(pagePosition)
      },
    );
  }
}

Answer 8

You can use an "OverScroll notifier" and PageController controller.jumpToPage() to change the current page to the last or the first page depending on the edge we "overscrolled".

class CarousselView extends StatefulWidget {
const CarousselView({super.key});

@override
State<CarousselView> createState() => _CarousselViewState();
}

class _CarousselViewState extends State<CarousselView>
with SingleTickerProviderStateMixin {
 int _index = 1;

 TabController? controller;
 late PageController _controller;
 String message = "";

  @override
 void initState() {
 controller = TabController(
  length: 6,
  vsync: this,
   );
  _controller = PageController();
 }

@override
Widget build(BuildContext context) {
 return Stack(
   children: [
    NotificationListener<OverscrollIndicatorNotification>(
      onNotification: ((notification) {
        print("Oversrolled");
        setState(() {
          _controller.jumpToPage(_index == 0 ? 5 : 0);
        });
        return true;
      }),
      child: PageView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 6,
        controller: _controller,
        onPageChanged: (int index) => setState(() {
          controller!.index = index;
          _index = index;
        }),
        itemBuilder: (_, i) {
          return Card(
            elevation: 6,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20)),
            child: Center(
              child: Text(
                "Card ${i}",
                style: TextStyle(fontSize: 32),
              ),
            ),
          );
        },
      ),
    ),
    Container(
      alignment: Alignment.bottomCenter,
      child: TabPageSelector(
        indicatorSize: 6.0,
        controller: controller,
         ),
        )
       ],
     );
   }
 }

Answer 9

final controller = new PageController(initialPage: children.length*999);

PageView.builder(
  controller: controller,
  itemBuilder: (context, index) {
    return new Center(
      child: new Text('${index % children.length}'),
    );
  },

)