I use StreamProvider to receive firestore data in my app. And I use lazy_load_scrollview package for the pagination in the image gridview. In the StreamProvider I have to pass context to listen to data streams. Just like Provider.of<List>(context) . So I have to define it inside the build. But in the _loadMore() method I have defined in the code I need images(this is where I listen to the Stream) list to update the data list for pagination. Pagination works fine but when I first launch the app it only shows the loading indicator and does not load anything. When I swipe down the screen it starts loading and pagination works fine. To load the grid items when I first start, I need to call _loadMore() method in the initState(). I can't call it because it is inside the build. But I can't define that method outside of the build because it needs to define Stream listener(which is images). I can't get the context outside from the build to do that. Is there any way to get the context outside of the build ? or is there any better solution for pagination ? I would be grateful if you can suggest me a solution. here is my code,
class ImageGridView extends StatefulWidget {
@override
_ImageGridViewState createState() => _ImageGridViewState();
}
class _ImageGridViewState extends State<ImageGridView> {
List<GridImage> data = [];
int currentLength = 0;
final int increment = 10;
bool isLoading = false;
// I need to call _loadMore() method inside the initState
/*@override
void initState() {
_loadMore();
super.initState();
}*/
@override
Widget build(BuildContext context) {
// listening to firebase streams
final images = Provider.of<List<GridImage>>(context) ?? [];
Future _loadMore() async {
print('_loadMore called');
setState(() {
isLoading = true;
});
// Add in an artificial delay
await new Future.delayed(const Duration(seconds: 1));
for (var i = currentLength; i < currentLength + increment; i++) {
if (i >= images.length) {
setState(() {
isLoading = false;
});
print( i.toString());
} else {
data.add(images[i]);
}
}
setState(() {
print('future delayed called');
isLoading = false;
currentLength = data.length;
});
}
images.forEach((data) {
print('data' + data.location);
print(data.url);
//print('images length ' + images.length.toString());
});
try {
return LazyLoadScrollView(
isLoading: isLoading,
onEndOfPage: () {
return _loadMore();
},
child: GridView.builder(
itemCount: data.length + 1,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemBuilder: (context, index) {
if (index == data.length) {
return CupertinoActivityIndicator();
}
//passing images stream with the item index to ImageGridItem
return ImageGridItem(gridImage: data[index],);
},
),
);
} catch (e) {
return Container(
child: Center(
child: Text('Please Upload Images'),
)
);
}
}
}
