Question 76074 in Flutter Question posted in
The official Flutter documentation can be found here.

How scroll infinite in left right both direction using pageView builder in flutter?

At the first time of app opening user will see a pageview.
In pageview builder initial value starts from the 0. At first time page opening user will see page index 0.

PageView.builder(
   controller: pageController,
   itemBuilder: (BuildContext context, int index) {
   return MyPage(data: dataList[index]);
});

If pagecount is not provided then, user can able to swipe right direction infinitely, but not left side.

I want that, user can swipe left right in both direction infinitely. User will page index of 0. Then user can not swipe at left direction. So i want to make this happen.

i.e. user can swipe a -1 , -2 index like that..

How to do this.

Tags:

2

Answers


  1. 0

    Didn’t really under stand the use-case, but You can do this by setting up your own page controller

    PageController pageController = PageController(
  initialPage: 0,
  viewportFraction: 1.0,
);

// Function to move to the next page
void nextPage() {
  pageController.animateToPage(
    pageController.page.toInt() + 1,
    duration: Duration(milliseconds: 500),
    curve: Curves.easeIn,
  );
}

// Function to move to the previous page
void previousPage() {
  pageController.animateToPage(
    pageController.page.toInt() - 1,
    duration: Duration(milliseconds: 500),
    curve: Curves.easeOut,
  );
}

// Logic to make sure the page index never goes out of bounds
// This will make sure that the user can swipe infinitely
pageController.addListener(() {
  if (pageController.page.toInt() >= dataList.length - 1) {
    pageController.animateToPage(
      0,
      duration: Duration(milliseconds: 500),
      curve: Curves.easeIn,
    );
  } else if (pageController.page.toInt() <= 0) {
    pageController.animateToPage(
      dataList.length - 1,
      duration: Duration(milliseconds: 500),
      curve: Curves.easeOut,
    );
  }
});

PageView.builder(
   controller: pageController,
   itemBuilder: (BuildContext context, int index) {
   return MyPage(data: dataList[index]);
});

    This way, the user can swipe left and right infinitely without ever going out of bounds. Hope this helps!

    Login or Signup to reply.
  2. 0

    here is how to do it my code is work perfectly

    at first declare a member variable for the current page index

    int page_index=0;
int page_index=/*your list length*/

PageController controller; 
bool _isReverse = false; //for controlling the directions 
@override
initState(){
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
       controller=PageController(initialPage: page_index);
    });
    super.initState();
      }
@override
Widget build(BuildContext context) {
return Scaffold(
    child:NotificationListener<UserScrollNotification>(
    onNotification: (notification) {
        final ScrollDirection direction = notification.direction;
        setState(() {
            if(_isReverse && page_index==0 ){
                if(direction.name=="forward"){
                    _isReverse=false;
                }
            }else{
                if(page_index==0)
                    if(direction.name=="forward"){
                        _isReverse=true;
                    }
            }
        });
        return true;
      },
    child: PageView.builder(
        scrollDirection: Axis.horizontal,
        reverse: _isReverse,
        onPageChanged: (index) {
            setState(() {
                page_index=index;
            });
        },
    physics: ClampingScrollPhysics(),
    controller: controller,
   
    itemBuilder: (BuildContext context, int index) {
        return Text((index%itemsNumber).toString());
}),));}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search