CODEWITHSUNDEEP
flutterflutter-web
user10033434
user10033434

Reputation: 455

PageView animateToPage on mouse scroll event in Flutter web

I tried to use jumpToPage on mouse scroll event, and I succeeded. But there's now 2 problems. The jumpToPage is too fast and I'd like to make it a little bit slower, the second problem is there's a white background (which doesn't load on the browser, and the last page snaps back to it's place).

For the first problem I tried to use animateToPage, without any success. And for the second problem, I used an if condition so the index won't exceed the page count, without any success also.

Here's my code:

    Listener(
      onPointerSignal: (pointerSignal) {
        if (pointerSignal is PointerScrollEvent) {
          if (pointerSignal.scrollDelta.dy > 0) {
            if(_index < 4) {
              int newIndex = _index + 1;
              pageController.jumpToPage(newIndex);
              // pageController.animateToPage(
              //   newIndex, duration: Duration(milliseconds: 500), curve: Curves.easeIn
              // );
              print(newIndex);
            }
          } 
          else 
          {
            // pageController.jumpToPage(_index - 1);
          }
        }
      },
      child: PageView(
        controller: pageController,
        scrollDirection: Axis.vertical,
        pageSnapping: true,
        onPageChanged: (index) {
          _index = index;
        },
        children: [
          Container(
            color: Colors.red,
          ),
          Container(
            color: Colors.blue,
          ),
          Container(
            color: Colors.green,
          )
        ]
      ),
    )

You can see here that I used animateToPage and I hashed it. And I also hashed the jumpToPage in the else statement for testing purposes.

So, my question is, how to address the 2 problems I mentioned?

Thanks in advance...

Upvotes: 2

Views: 1766

Answers (1)

Guillaume Roux
Guillaume Roux

Reputation: 7318

I think your issue comes from the way you are using your _index variable. As you are changing the value of _index both in your onPointerSignal and in your onPageChanged both values might conflict.

Here's how I've tried implementing your code:

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int _index = 0;
  final pageController = PageController();
  final _animationDuration = Duration(milliseconds: 500);
  final _curve = Curves.easeIn;

  @override
  Widget build(BuildContext context) {
    return Listener(
      onPointerSignal: (pointerSignal) {
        if (pointerSignal is PointerScrollEvent) {
          if (pointerSignal.scrollDelta.dy > 0) {
            pageController.nextPage(
                curve: _curve, duration: _animationDuration);
          } else {
            pageController.previousPage(
                duration: _animationDuration, curve: _curve);
          }
        }
      },
      child: PageView(
          physics: NeverScrollableScrollPhysics(),
          controller: pageController,
          scrollDirection: Axis.vertical,
          pageSnapping: true,
          onPageChanged: (index) {
            _index = index;
          },
          children: [
            Container(color: Colors.red),
            Container(color: Colors.blue),
            Container(color: Colors.green)
          ]),
    );
  }
}

Test the full code on DartPad

Basically I'm not depending on the _index variable and instead using the methods nextPage and previousPage to manage the pageview indexation.

Upvotes: 4

Related Questions