Make PageView page scroll when child ListView reaches scroll limit - nested scroll?

Question

Nested scrolling?

I have three vertical pages in a PageView that I want to be able to flip between. The pages consists of scrollable ListViews.

When a page is in focus the displayed list should be vertically scrollable, but when the list is scrolled to either end I want the pageView scrolling to take over the scroll behaviour and handle the page flipping to next page (like a web page with scrollable elements).

Example with scrolling lists below. If the list scrolling is disabled the page flipping works. How can I make both work?

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VerticalPageView(),
    );
  }
}

class VerticalPageView extends StatelessWidget {
  VerticalPageView({Key key}) : super(key: key);

  final PageController pageController = PageController();
  final ScrollController scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PageView(
          controller: pageController,
          pageSnapping: true,
          scrollDirection: Axis.vertical,
          children: <Widget>[
            Container(
              color: Colors.pinkAccent,
              child: ListView.builder(
                controller: scrollController,
                itemCount: 100,
                physics: ClampingScrollPhysics(),
                itemBuilder: (context, index) {
                  return Text('page 0 item $index');
                },
              ),
            ),
            Container(
              color: Colors.lightBlue,
              child: ListView.builder(
                controller: scrollController,
                itemCount: 100,
                physics: ClampingScrollPhysics(),
                itemBuilder: (context, index) {
                  return Text('page 1 item $index');
                },
              ),
            ),
            Container(
              color: Colors.lightGreen,
              child: ListView.builder(
                controller: scrollController,
                itemCount: 100,
                physics: ClampingScrollPhysics(),
                itemBuilder: (context, index) {
                  return Text('page 2 item $index');
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

I think what you are trying to achieve is not impossible but needs a lot of study and care.

I have been trying to use several NotificationListener<ScrollNotification>'s to adapt the reaction depending on the position of the scroll but did not get anywhere.

Give a look to the Animation sample home.dart file in the Gallery App. It is full of insight in this regard.

The problem with this approach is basically what you say. When you disable programmatically the scrolling when reaching the end of the list to enable page scrolling, then you can switch to the other page but can't scroll the list in the other direction any more.

So, either you scroll the list or you scroll the pages, but not both.

Maybe you could add a GestureDetector() above everything and check on every drag update what is your situation below to configure accordingly the different scrollers.

Anyway, in case it is helpful to you I let you here an alternate solution using a CustomScrollView and SliverList's.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VerticalPageView(),
    );
  }
}

class VerticalPageView extends StatelessWidget {
  final ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        controller: _scrollController,
        slivers: <Widget>[
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  color: Colors.pinkAccent,
                  child: Text('page 0 item $index'),
                );
              },
              childCount: 100,
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  color: Colors.lightBlue,
                  child: Text('page 1 item $index'),
                );
              },
              childCount: 100,
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Container(
                  color: Colors.lightGreen,
                  child: Text('page 2 item $index'),
                );
              },
              childCount: 100,
            ),
          ),
        ],
      ),
    );
  }
}