Infinite scroll with cubit and Firebase API - flutter

Question

In my Flutter app the user can create new tasks and see them in the homepage, but right now I am fetching all the tasks from Firebase at once, and I wish I could do that using infinite scroll. I googled how to do this, but I really couldn't figure it out.
In my API project I have the following:
async getTasksByFilter(filters: Array<IFilter>): Promise<Array<ITask>> {
let tasksUser: Array<ITask> = [];
let collectionQuery: Query<DocumentData> = this.db.collection(
this.taskCollection,
);
let query = collectionQuery;
return new Promise((resolve, reject) => {
filters.forEach(entry => {
switch (entry.searchType) {
case 'where':
query = query.where(
entry.field,
entry.condition as WhereFilterOp,
entry.value,
);
break;
default:
break;
}
});
query
.orderBy('createdAt', 'asc')
.get()
.then(query => {
if (query.docs.length > 0) {
query.docs.forEach(doc => {
let task: ITask = this.transformDate(doc.data());
tasksUser.push(task);
});
}
return resolve(tasksUser);
})
.catch(error => {
return reject(error);
});
});
}
In my app I use this function to fetch the tasks
Future<List<Task>> getUserTasks(String _extension, Filter filters) async {
final Response response =
await client.post(Uri.parse("$BASE_URL$_extension"),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
},
body: jsonEncode(filters.toJson()),
);
Iterable l = jsonDecode(response.body);
List<Task> tasks = List<Task>.from(l.map((model) => Task.fromJson(model)));
return tasks;
}
So when the tasks page is opened, the cubit changes its state to InitTaskListState, start to fetch all the tasks data and show a loading spinner for the user. When its done the state changes to LoadedTaskListState and the task list is displayed.
This is my code for it:
BlocConsumer<TaskListCubit, TaskListState>(
listenWhen: (previous, current) =>
current is FatalErrorTaskListState,
listener: (context, state) {
if (state is FatalErrorTaskListState) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text(state.title ?? 'Error'),
content: Text(state.message ?? 'Error'),
actions: <Widget>[
TextButton(
child: const Text('Ok'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
},
builder: (context, state) {
if (state is InitTaskListState ||
state is LoadingTaskListState) {
return const ProgressView(message: 'Loading tasks');
}
if (state is LoadedTaskListState) {
final tasks = state.tasks;
return taskList(context, cubit, state, tasks);
}
return const Text('Unknown error');
},
)
TabBarView taskList(BuildContext context, TaskListCubit cubit,
LoadedTaskListState state, List<Task> tasks) {
return TabBarView(
physics: const NeverScrollableScrollPhysics(),
children: List<Widget>.generate(
cubit.tabNames.length,
(int index) {
if (index == state.tabIndex) {
return Center(
child: tasks.isEmpty
? setEmptyListText(state.tabName)
: Column(
children: [
Expanded(
child: ListView.builder(
itemBuilder: (context, index) {
final task = tasks[index];
return TaskCard(
task,
state.tabName,
state.tabType,
cubit,
onClick: () {
push(
context,
TaskDetailsContainer(task, state.tabType),
);
},
);
},
itemCount: tasks.length,
),
),
],
),
);
} else {
return const Text('');
}
},
),
);
}
Does someone can explain me how to implement the infinite scroll in my project?

Answer 1

I think this will give you a pretty good idea of how to do it:
https://medium.com/flutter-community/flutter-infinite-list-tutorial-with-flutter-bloc-2fc7a272ec67
What you need to do is that each time reach the bottom of the list you will increment the limit of your current query, which can be easily done with firebase.
In your api call you can do like this:
firestore.collection("products").limit(_myLimit).get();
Make sure to update your limit as you reach the bottom of the screen and change states accordingly. Your bloc could keep track of the current limit and then you just increase it as you scroll down.