How to catch a scroll event in GridView? - flutter

Question

I need somehow to catch a scroll event in the GridView to update the _length variable. So on scroll the _length is increasing and more content will be displayed in the GridView. How to make it?
import 'dart:math';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _length = 10;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: _contentGridView(),
),
);
}
Widget _contentGridView() {
return GridView.builder(
padding: EdgeInsets.all(5),
itemCount: _length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 5,
mainAxisSpacing: 5,
),
itemBuilder: (context, index) {
int i = getRandomId();
return Image.network('https://i.pravatar.cc/1000?img=1');
});
}
}

Answer 1

i belive you want pagination.
but according to your question answer will be something like , let me know something else you wanted.
import 'package:flutter/material.dart';
class MyAppG extends StatefulWidget {
#override
State<StatefulWidget> createState() => _MyAppState();
}
class _MyAppState extends State<MyAppG> {
late int _length;
late ScrollController controller;
#override
void initState() {
super.initState();
_length = 10;
controller = ScrollController();
controller.addListener(() {
if (controller.hasClients) {
if (controller.position.maxScrollExtent == controller.offset) {
setState(() {
_length += 3;
});
}
}
});
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: _contentGridView(),
),
);
}
Widget _contentGridView() {
return GridView.builder(
controller: controller,
padding: EdgeInsets.all(5),
itemCount: _length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 5,
mainAxisSpacing: 5,
),
itemBuilder: (context, index) {
return Container(
height: 50,
color: index % 3 == 0 ? Colors.cyanAccent : Colors.amberAccent,
child: Center(
child: Text("$index"),
),
);
});
}
}
```