CODEWITHSUNDEEP
flutterdart
Joshua
Joshua

Reputation: 279

Check for overscroll in PageView - Flutter

Hi I am using PageView in my flutter app. I want to detect when the user overscrolls and is out of pages. How do i achieve it

The code of my PageView:

PageView(
      controller: _controller,
      children: widget.imagePaths,
    ),

Upvotes: 4

Views: 2259

Answers (3)

Viết Kenji Gi
Viết Kenji Gi

Reputation: 428

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  Widget build(BuildContext context) {
    return NotificationListener<OverscrollIndicatorNotification>(
      onNotification: (overscroll) {
        onNotification: (ScrollNotification notification) {
         if (notification is OverscrollNotification || 
             notification.metrics.outOfRange) {
              print("Bounced!");
           }
        return false;
      },
      child: PageView(
        children: [
          Container(color: Colors.red),
          Container(color: Colors.green),
        ],
      ),
    );
  }
}

Upvotes: 0

DamirR
DamirR

Reputation: 1705

Another solution would be to use NotificationListener<OverscrollNotification> because then you can choose to which amount of over-scroll you want to react. This is useful if you want to ignore incidental small drag movements.

For example:

NotificationListener<OverscrollNotification>(
  onNotification: (OverscrollNotification notification) {
    if (notification.overscroll < 8) {
      // ignore, don't do anything
      return false;
    }

    // do something, for example: load next screen, etc ...

    return true;
  },
  child: PageView(
    controller: _controller,
    children: widget.imagePaths,
  ),
),

8 from above example is result of experiment. You should select the amount which works best for you.

For full example, checkout this blog post.

Upvotes: 2

RukshanJS
RukshanJS

Reputation: 966

Wrap your PageView inside a NotificationListener<OverscrollIndicatorNotification> like this. Then whenever the user overscrolls in either direction, the function onNotification is called.

return NotificationListener<
                          OverscrollIndicatorNotification>(
                        onNotification: (overscroll) {
                          print("overscrolled"); //do whatever you need to do when overscroll
                        },
                        child: PageView(
                          controller: _controller,
                          children: widget.imagePaths,
                        ),
                      );

Full script file

import 'package:flutter/material.dart';

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  Widget build(BuildContext context) {
    return NotificationListener<OverscrollIndicatorNotification>(
      onNotification: (overscroll) {
        print("overscrolled");
      },
      child: PageView(
        children: [
          Container(color: Colors.red),
          Container(color: Colors.green)
        ],
      ),
    );
  }
}

Upvotes: 8

Related Questions