ScrollController not working inside GridView with NestedScrollView?

Question

I am having trouble with implementing a Instagram type profile page, where the user can scroll his posts with pagination.

I implemented a NestedScrollView, and inside of it's body I have a GridView.builder which shows the user's post. Normally when the user scrolls to the end of the GridView, a scrollnotification is sent and the lists gets updated if there are more posts to load.

My problem comes when I added the NestedScrollView, the Sliver won't work normally if I give a scroll controller to Gridview, i.e. scrolling inside GridView only scrolls the GridView itself, it won't also scroll the NestedScrollView.

Yet if I remove the scrollController inside Gridview, I can scroll normally, but the problem arises with scrollnotifications. I have to give the NotificationListener to the NestedScrollView, and it gets called as soon as the user scrolls one line inside gridview, since from the perspective of the NestedScrollView, it is the end of the screen. So my pagination doesn't work, too many read requests get sent.

So now I am stuck with neither solution being the optimal one.

Answer 1

You have to put the ScrollController for BOTH NestedScrollView and GridView in order to get the offset and scroll correctly

Answer 2

An alternative to using NestedScrollView with GridView is to use ListView, then set the constraint on the inside GridView. Something like this:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample App',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScrollController _controller;

  @override
  void initState() {
    super.initState();
    _controller = ScrollController()..addListener(_scrollListener);
  }

  void _scrollListener() {
    if (_controller.position.extentAfter == 0) {
      print('End of list');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        controller: _controller,
        children: [
          Container(
            height: 200,
            color: Colors.indigo,
            alignment: Alignment.center,
            child: Text('Random Box'),
          ),
          ConstrainedBox(
            constraints: BoxConstraints(
              minHeight: 100,
              maxHeight: double.infinity,
            ),
            child: GridView.count(
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              crossAxisCount: 3,
              children: List<Widget>.generate(30, (index) => Text('testing')),
            ),
          ),
        ],
      ),
    );
  }
}