make a pagination with flutter and bloc - flutter

Question

ServiceRepo
import 'package:service_youtube/data/service_model.dart';
import 'package:http/http.dart';
class ServicesRepo {
final _url = "http://osamastartup.osamamy-class.com/api/services";
Future<List<Datum>> getServices(int page) async {
final response = await get(Uri.parse("$_url?page=$page"));
final services = serviceFromJson(response.body);
return services.data;
}
}
the _url and everything is correct and return data without any problem
ServiceBloc:
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:service_youtube/blocs/service_bloc/service_event.dart';
import 'package:service_youtube/blocs/service_bloc/service_state.dart';
import '../../data/service_repo.dart';
class ServiceBloc extends Bloc<ServiceEvent, ServiceState> {
final ServicesRepo repo;
int page = 1;
bool isFetching = false;
ServiceBloc(this.repo) : super(ServiceLoadingState()) {
on<LoadServicesEvent>((event, emit) async {
emit(ServiceLoadingState());
try {
final services = await repo.getServices(page);
emit(ServiceLoadedState(services: services));
page++;
} catch(e) {
emit(ServiceErrorState(msg: e.toString()));
}
});
}
}
surly i have all states and events , and there are no problem with them,
ServiceView
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:service_youtube/blocs/internet_bloc/internet_bloc.dart';
import 'package:service_youtube/blocs/service_bloc/service_bloc.dart';
import 'package:service_youtube/blocs/service_bloc/service_event.dart';
import 'package:service_youtube/data/service_model.dart';
import '../blocs/internet_bloc/internet_state.dart';
import '../blocs/service_bloc/service_state.dart';
class ServiceView extends StatelessWidget {
ServiceView({Key? key}) : super(key: key);
final List<Datum> _services = [];
final ScrollController _scrollController = ScrollController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("Services App"),),
body: Container(
padding: EdgeInsets.all(5),
margin: EdgeInsets.all(5),
child: Center(
child: BlocListener<ConnectedBloc, ConnectedState>(
listener: (context, state) {
if (state is ConnectedSucessState) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Internet Connected')));
} else if (state is ConnectedFailureState) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Internet Lost')));
}
},
child: BlocBuilder<ServiceBloc, ServiceState>(
builder: (context, state) {
if(state is ServiceLoadingState && _services.isEmpty) {
return const CircularProgressIndicator();
} else if (state is ServiceLoadedState) {
_services.addAll(state.services);
context.read<ServiceBloc>().isFetching = false;
return ListView.separated(
controller: _scrollController
..addListener(() {
if (_scrollController.offset ==
_scrollController.position.maxScrollExtent &&
!context.read<ServiceBloc>().isFetching) {
context.read<ServiceBloc>()
..isFetching = true
..add(LoadServicesEvent());
}
}),
itemCount: _services.length,
separatorBuilder: (context, index) => const SizedBox(height: 50),
itemBuilder: (context, index) {
return ListTile(
title: Text(_services[index].name,),
subtitle: Text(_services[index].info,),
leading: CircleAvatar(
radius: 50,
backgroundImage: NetworkImage(_services[index].image),
),
);
},
);
} else if (state is ServiceErrorState && _services.isEmpty) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
onPressed: () {
context.read<ServiceBloc>()
..isFetching = true
..add(LoadServicesEvent());
},
icon: const Icon(Icons.refresh),
),
const SizedBox(height: 15),
Text(state.msg, textAlign: TextAlign.center),
],
);
} else {
return Container();
}
},
),
),
),
),
);
}
}
the data is appear without any problem , but after i scroll show me just a blank screen, without any error message? where is the problem?