Make ListView scrollable within PageView

[altherat]

Unless I'm missing something, I don't believe it's possible to achieve scrolling on both a ListView (or SingleChildScrollView) and a PageView when the ListView is within the PageView and they both scroll in the same direction.

Consider the following simple example app with a vertical scrolling ListView within a vertical PageView:

void main() => runApp(App());

class App extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: PageView(
          scrollDirection: Axis.vertical,
          children: <Widget>[
            ListView.builder(
              itemCount: 20,
              itemBuilder: (BuildContext context, int index) => ListTile(title: Text('Item $index'))
            ),
            Text('Page 2')
          ],
        )
      )
    );
  }

}

There is no way to get the PageView to scroll pages. I think expected behavior should be that when the ListView is scrolled to the bottom, the PageView should then handle the gesture. If I remember correctly, I believe it works like this with Android's RecyclerView and ViewPager.

I've played around with ScrollPhysics, ScrollBehavior, and NotificationListener such as listening for OverscrollNotification and then disabling scrolling for ListView, but I could not find a solution that worked well.

[goderbauer]

/cc @Piinks

[Piinks]

Hi @altherat,

Flutter determines the priority that widgets receive gesture events like scrolling through a system called the gesture arena.
In your example, both the PageView and the ListView scroll vertically, and the ListView is claiming the gesture. You can see this decision process by adding this to your app:

import 'package:flutter/gestures.dart';

void main() {
  debugPrintGestureArenaDiagnostics = true;
  runApp(App());
}

There was some discussion of this in: #28139 (comment) as well as a reference to an article on gestures in Flutter that you may find helpful to achieve the behavior you are looking for.

[altherat]

Hi @Piinks.

I've done a bit of looking at how gestures are handled and have come across those links, but because Scrollable handles the ListView's gestures, I don't believe it's possible for me to override them and handle them differently?

Even if I did have control, I'm not sure how I would implement the expected behavior because the ListView needs to only ignore scrolling down when has reached the bottom and then let the PageView handle it.

[SunPointed]

Hi @altherat Have you solved the problem yet? I have the same problem at https://github.com/SunPointed/MPFlutterChart/issues/102. I read this article https://medium.com/flutter-community/combining-multiple-gesturedetectors-in-flutter-26d899d008b2 but use this seem to need maintain all events(tap, longpress, scale etc.), it's too much trouble, is there an easier way for achieve this?

[altherat]

Hey @SunPointed,

Yeah, I hacked up some sort of solution that seems to work but it's not perfect and I haven't tested it too much so it might have problems. I'm not sure if this will work the same with charts.

Basically with my solution I manage the vertical scrolling myself by wrapping the entire thing in RawGestureDetector and providing my own PageController to the PageView and a ScrollController to the ListView. I disable the default scrolling for the PageView and ListView by passing in NeverScrollableScrollPhysics for their physics. Then, when I handle the gestures on the RawGestureDetector, I just check if the ListView has reached the bottom and if it has, then the next vertical drag I let the PageController handle. Ideally I want that scrolling transfer to happen with a single gesture but I'm not sure that's possible this way.

Here's a sample app demonstrating it. My actual app only needs this ability when it scrolls to the bottom of the list (and not the top) so that's all that I accounted for.

void main() => runApp(App());

class App extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Example()
      )
    );
  }

}

class Example extends StatefulWidget {

  @override
  _ExampleState createState() => _ExampleState();

}

class _ExampleState extends State<Example> {

  PageController _pageController;
  ScrollController _listScrollController;
  ScrollController _activeScrollController;
  Drag _drag;

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
    _listScrollController = ScrollController();
  }

  @override
  void dispose() {
    _pageController.dispose();
    _listScrollController.dispose();
    super.dispose();
  }

  void _handleDragStart(DragStartDetails details) {
    if (_listScrollController.hasClients && _listScrollController.position.context.storageContext != null) {
      final RenderBox renderBox = _listScrollController.position.context.storageContext.findRenderObject();
      if (renderBox.paintBounds.shift(renderBox.localToGlobal(Offset.zero)).contains(details.globalPosition)) {
        _activeScrollController = _listScrollController;
        _drag = _activeScrollController.position.drag(details, _disposeDrag);
        return;
      }
    }
    _activeScrollController = _pageController;
    _drag = _pageController.position.drag(details, _disposeDrag);
  }

  void _handleDragUpdate(DragUpdateDetails details) {
    if (_activeScrollController == _listScrollController && details.primaryDelta < 0 && _activeScrollController.position.pixels == _activeScrollController.position.maxScrollExtent) {
      _activeScrollController = _pageController;
      _drag?.cancel();
      _drag = _pageController.position.drag(
        DragStartDetails(
          globalPosition: details.globalPosition,
          localPosition: details.localPosition
        ),
        _disposeDrag
      );
    }
    _drag?.update(details);
  }

  void _handleDragEnd(DragEndDetails details) {
    _drag?.end(details);
  }

  void _handleDragCancel() {
    _drag?.cancel();
  }

  void _disposeDrag() {
    _drag = null;
  }

  @override
  Widget build(BuildContext context) {
    return RawGestureDetector(
      gestures: <Type, GestureRecognizerFactory>{
          VerticalDragGestureRecognizer: GestureRecognizerFactoryWithHandlers<VerticalDragGestureRecognizer>(
          () => VerticalDragGestureRecognizer(),
          (VerticalDragGestureRecognizer instance) {
            instance
              ..onStart = _handleDragStart
              ..onUpdate = _handleDragUpdate
              ..onEnd = _handleDragEnd
              ..onCancel = _handleDragCancel;
          }
          )
      },
      behavior: HitTestBehavior.opaque,
      child: PageView(
        controller: _pageController,
        scrollDirection: Axis.vertical,
        physics: const NeverScrollableScrollPhysics(),
        children: [
          ListView(
            controller: _listScrollController,
            physics: const NeverScrollableScrollPhysics(),
            children: List.generate(
              25,
              (int index) {
                return ListTile(
                  title: Text('Item $index')
                );
              }
            )
          ),
          Center(
            child: Text('Page 2')
          )
        ],
      )
    );
  }

}

[SunPointed]

@altherat thanks for your answer. I see in my problem I just a Chart provider, I don't know under what circumstances will users use these Charts(I don't know the parent of Chart in the users's view tree). Now I use a GestureArenaTeam to help Chart win in the arena, but this made the chart area not response the PageView.

[ra-develop]

@altherat Thanks for idea. I used it in my exploration of scrolling with PageView https://github.com/ra-develop/PageView_test.Flutter.git
For best result of scrolling I changed _handleDragUpdate function. Short description of changes:

1. Deleted check for details.primaryDelta < 0 - for scrolling to UP
2. Added roundToDouble() for comparing _activeScrollController.position.pixels and _activeScrollController.position.maxScrollExtent - in this case scrolling worked stable. And you not need twice gesture for change element.
3. Changed condition of comparing _activeScrollController.position.pixels and _activeScrollController.position.maxScrollExtent - for scrolling to UP
   See all changes below:

void _handleDragUpdate(DragUpdateDetails details) {
    if (_activeScrollController == _listScrollController 
    // && (details.primaryDelta < 0) 
    && (_activeScrollController.position.pixels.roundToDouble() >= _activeScrollController.position.maxScrollExtent.roundToDouble()
    || _activeScrollController.position.pixels <0 )) {
      _activeScrollController = _pageController;
      _drag?.cancel();
      _drag = _pageController.position.drag(
        DragStartDetails(
          globalPosition: details.globalPosition,
          localPosition: details.localPosition
        ),
        _disposeDrag
      );
    }
    _drag?.update(details);
  }