Flutter NeverScrollableScrollPhysics pagenation not work - flutter

Question

I am trying to bind NestedScrollView and GridView with pagenation.
However, I put NeverScrollableScrollPhysics() in the GridView, the pagenation function does not work.
I guess it is caused by scrollcontroller.
How can I solve this problem?
I will attach my code.
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
//infinite scroll
List<DocumentSnapshot> products = []; // stores fetched products
bool isLoading = false; // track if products fetching
bool hasMore = true; // flag for more products available or not
int documentLimit = 20; // documents to be fetched per request
DocumentSnapshot
lastDocument; // flag for last document from where next 10 records to be fetched
ScrollController _scrollController =
ScrollController(); // listener for listview scrolling
#override
void initState() {
getProducts();
_scrollController.addListener(() {
double maxScroll = _scrollController.position.maxScrollExtent;
double currentScroll = _scrollController.position.pixels;
double delta = MediaQuery.of(context).size.height * 0.20;
if (maxScroll - currentScroll <= delta) {
getProducts();
}
});
}
#override
void dispose() {
_scrollController?.dispose();
super.dispose();
}
getProducts() async {
//...
//get items from firebase
//...
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.backgroundwhite,
title: Image(
width: 132.0,
height: 40.0,
image: AssetImage('images/logo_horiz.png'),
),
),
body: NestedScrollView(
headerSliverBuilder: (context, isScrolled) {
return <Widget>[
SliverList(
delegate: SliverChildListDelegate([
Padding(
padding: const EdgeInsets.all(18.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"다른 유저가 키우는",
style: TextStyle(
fontSize: 24.0,
color: Colors.black,
fontWeight: FontWeight.w200,
fontFamily: "Roboto"),
),
Padding(padding: EdgeInsets.fromLTRB(0, 0, 0, 5.0)),
Row(
children: <Widget>[
Text(
"율마",
style: new TextStyle(
fontSize: 24.0,
color: Colors.black,
fontWeight: FontWeight.bold,
fontFamily: "Roboto"),
),
Text(
"가 궁금하신가요?",
style: new TextStyle(
fontSize: 24.0,
color: Colors.black,
fontWeight: FontWeight.w200,
fontFamily: "Roboto"),
),
],
),
Padding(padding: EdgeInsets.fromLTRB(0, 0, 0, 25.0)),
Container(
color: Colors.transparent,
width: double.infinity,
height: 46,
child: FlatButton(
color: Theme.of(context).colorScheme.lightGrey,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SearchPage()),
);
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
child: Row(
children: <Widget>[
Icon(Icons.search,
size: 30.0, color: Colors.black12),
Padding(
padding:
const EdgeInsets.only(right: 10.0),
),
Text(
"율마",
style: new TextStyle(
fontSize: 20.0,
color: Theme.of(context)
.colorScheme
.textBlack,
fontWeight: FontWeight.w200,
fontFamily: "Roboto"),
)
],
))),
]),
),
]))
];
},
body: LayoutBuilder(
builder:(BuildContext context, BoxConstraints viewportConstraints) {
return ConstrainedBox(
constraints: BoxConstraints(
minHeight: viewportConstraints.maxHeight,
),
child: IntrinsicHeight(
child: Column(children: <Widget>[
Flexible(
// this will host our Tab Views
child: GridView.builder(
// physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 1.0,
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0),
controller: _scrollController,
itemCount: products.length,
itemBuilder: (context, index) {
return _buildListItem(context, products[index]);
},
)),
])));
}),
));
}
Widget _buildListItem(BuildContext context, item) {
return Hero(
tag: item.documentID,
child: Material(
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => DetailPostPage(item)),
);
},
child: Image.network(item['imageUrls'][0]['url'], fit: BoxFit.cover),
),
),
);
}
}
Thank you so much

Answer 1

Oh! finally I have solved this problem using CustomScrollView instead of NestedScrollview.
In addition, I wraped the CustomScrollView as LayoutBuilder.
Hense the final code of the body part of Scaffold is following:
LayoutBuilder(
builder: (BuildContext context, BoxConstraints viewportConstraints) {
return ConstrainedBox(
constraints: BoxConstraints(
minHeight: viewportConstraints.maxHeight,
),
child: CustomScrollView(
// physics: AlwaysScrollableScrollPhysics(),
controller: _scrollController,
slivers: <Widget>[
SliverList(
delegate: SliverChildListDelegate([
_buildHeader()
])),
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 1.0,
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0),
delegate: SliverChildBuilderDelegate((BuildContext context, int index) {
return _buildListItem(context, products[index]);
},
childCount: products.length,
),
)
]
)
);
}),
I hope it would be helpful for you!