Implement pagination in Flutter with a bloc pattern - flutter

Question

Using the NotificationListener, I am trying to integrate pagination with the ListView.Builder, but I don't get the expected result. While the list is working, it scrolls very slowly.
The code I wrote is below
NotificationListener<ScrollNotification>(
onNotification: (scrollNotification) {
if (_controller.position.maxScrollExtent ==
_controller.offset) {
if (state is LoghistorySuccess) {
if (logsData.length == _index) {
if (pagecount > page) {
setState(() {
page = page + 1;
print(page);
BlocProvider.of<LogHistoryBloc>(
context)
.add(LogHistoryFetchEvent(
page: page));
});
}
}
}
}
if (scrollNotification
is ScrollStartNotification) {
_onStartScroll(scrollNotification.metrics);
} else if (scrollNotification
is ScrollUpdateNotification) {
_onUpdateScroll(scrollNotification.metrics);
} else if (scrollNotification
is ScrollEndNotification) {
_onEndScroll(scrollNotification.metrics);
}
return true;
},
child: logsData.isNotEmpty
? ListView.builder(
controller: _controller,
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: logsData.length,
//state.logHistoryModel.results?.logs?.length ?? 0,
itemBuilder: (context, index) {
return Padding(
padding:
const EdgeInsets.only(top: 12.0),
child: DottedBorder(
borderType: BorderType.RRect,
strokeWidth: 1,
dashPattern: [2.5, 2.5],
color:
HexColor(Constants.primary),
radius: Radius.circular(10),
child: Padding(
padding: const EdgeInsets.only(
top: 15.0,
left: 15,
right: 15,
bottom: 8.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Container(
width: MediaQuery.of(
context)
.size
.width /
2,
child: Text(
"${logsData[index].date}",
style: TextStyle(
overflow:
TextOverflow
.ellipsis,
fontWeight:
FontWeight
.w500,
fontSize: 16,
color: HexColor(
Constants
.primary),
)),
),
// Text(
// "${state.logHistoryEntity.logs?[index]["entry_date"]}",
// style: TextStyle(
// color:
// Color(0xff555B5F)),
// ),
],
),
Container(
margin: EdgeInsets.only(
top: 15,
),
child: ListView.builder(
shrinkWrap: true,
physics:
NeverScrollableScrollPhysics(),
itemCount:
logsData[index]
.log
?.length ??
0,
//state.logHistoryModel.results?.logs?[index].log?.length ?? 0,
itemBuilder:
(context, _index) {
var _data =
logsData[index]
.log?[_index];
return Padding(
padding:
const EdgeInsets
.only(
bottom:
8.0),
child: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
InkWell(
onTap: () {
summaryPopUp(
context,
_data!);
},
child: Text(
"• ${_data?.startTime} to ${_data?.endTime}",
style: TextStyle(
color: Color(
0xff555B5F)),
),
),
Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Text(
"${_data?.logtype}",
style: TextStyle(
color:
Color(0xffED5B2E)),
),
SizedBox(
width: 20,
),
_data?.createdDate ==
formatted
? Row(
children: [
InkWell(
onTap: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => EditLogsScreen(log: _data!),
));
},
child: ImageIcon(
AssetImage("assets/icons/pencil.png"),
color: Color(0xff18A558),
size: 20,
),
),
SizedBox(
width: 8,
),
InkWell(
onTap: () {
showDialog(
context: context,
builder: (context) {
return DeletLogConfPopUp(
logId: _data?.id,
log: logsData[_index].log,
index: _index,
);
},
);
},
child: ImageIcon(
AssetImage("assets/icons/delete_icon.png"),
color: Color(0xffE72323),
size: 18,
),
),
],
)
: Container()
],
)
],
),
);
},
),
)
],
),
)),
);
},
)
: Container(),
// Center(
// child: Column(
// children: [
// Image(
// image: AssetImage(
// "assets/images/no_task.png")),
// Text("You don't have any logs yet")
// ],
// ),
// ),
)
with this code pagination works fine but not scrolling fast.