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');
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

refer for listview end https://stackoverflow.com/questions/49508322/flutter-listview-lazy-loading and change the page — Dinesh Balasubramanian, Sep 28 '18 at 18:04
@DineshBalasubramanian Thanks. Yes, that would be an option. But I'm after a "smoother " experience where the scroll of the list seamlessly turns into a page scroll. — ninnepinne, Oct 01 '18 at 07:19
Don't know if it's what you want but you can use DraggableScrollableSheet(). See [https://api.flutter.dev/flutter/widgets/DraggableScrollableSheet-class.html](https://api.flutter.dev/flutter/widgets/DraggableScrollableSheet-class.html) — Allan Jaqueira, Apr 08 '20 at 12:24

score 1 · Answer 1 · answered Sep 28 '18 at 22:45

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,
            ),
          ),
        ],
      ),
    );
  }
}

Great pointers. Found some useful information in the suggested `home.dart` file. Will update if I find a solution. — ninnepinne, Oct 01 '18 at 07:26

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

1 Answers1