1

I have a PageView to navigate between images that I would like to behave as an infinite loop or as a ring array, that is to say, be able to navigate from the last page to the first one without passing through the ones in the middle.

PageView.builder(
     controller: _pageController,
     itemCount: 3,
     itemBuilder: (context, index) {
         return Image.asset(
               "assets/images/home_screen/device_content$index.png",
               height: 500,
               fit: BoxFit.fill,
               key: ValueKey<int>(index),
         );
     },
),

This is the button where I change the page:

IconButton(
  onPressed: () {
    setState(() {
      _n += 1;
      if (_n > 2) _n = 0;
      _pageController.animateToPage(
        _n,
        duration: Duration(milliseconds: 500),
        curve: Curves.easeInOut,
      );
    });
  },
  icon: const Icon(Icons.arrow_forward_ios),
),

Here is a video of the behaviour

enter image description here

Is there a way to make the animation between the last page and the first one be on the same direction than the animation in between the middle pages?

JAgüero
  • 403
  • 1
  • 4
  • 14
  • 1
    [Does this answer your question?](https://stackoverflow.com/questions/49161719/is-there-a-way-to-have-an-infinite-loop-using-pageview-in-flutter) – FLjubic Aug 20 '22 at 13:06
  • make `itemCount: double.infinity` and `itemBuilder: (context, i) { final index = i % 3; ...` – pskink Aug 20 '22 at 13:07
  • @pskink it doesn't change the behavior, it already loops infinite but keep going through the middle pages when going from last to first. – JAgüero Aug 20 '22 at 18:09

1 Answers1

0

If you remove the itemCount parameter you can make your PageView loop infinitely.

SLendeR
  • 839
  • 7
  • 25
  • But as I use a button to change the page, I already had to make the infinite loop with an algorithm. It still goes through the middle pages when it passes from the last to the first. – JAgüero Aug 20 '22 at 18:03