Why does it keep loading forever? - flutter

Question

there is a problem. I have SOMETIMES no download icon disappears. Or to put it another way, instead of "No more entries", I see a loading circle.
This happens depending on how much data I received. For example, for 5 records there will be an endless download, and for 6 records it will display "There are no more records"
Tell me, what's the problem?
class _MyHomePageState extends State<MyHomePage> {
var ressultat = json.decode(MyApp.resultat)['Transactions'];
final controller = ScrollController();
bool hasMore = true;
int page = 2;
bool isLoading = false;
#override
void initState() {
super.initState();
// fetch();
controller.addListener(() {
if(controller.position.maxScrollExtent == controller.offset) {
fetch();
}
});
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
Future fetch() async {
if(isLoading) return;
isLoading = true;
var token = LoginClass.resJson;
const limit = 9;
try {
final response = await http.post(
Uri.parse(Config.urlReport),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
"Authorization": "Bearer $token"
},
body: json.encode({
"Filters": {
"DateFrom" : MyApp.dateFrom,
"DateTo" : MyApp.dateEnd,
"AmountFrom": MyApp.sumFrom,
"AmountTo": MyApp.sumTo,
"SenderPaymentSystemId": MyApp.dropdownvalue,
"SenderRequisite": MyApp.phoneNum},
"Sorting": {
"Field": MyApp.isCheckedFieldPicker,
"Order": MyApp.isCheckedOrderPicker},
"Pagination": {
"PageNumber": page,
"PageSize": limit
}
})
);
if (response.statusCode == 200) {
var reportResult = (response.body);
print(reportResult);
final List ress = json.decode(reportResult)['Transactions'];
setState(() {
page++;
isLoading = false;
if(MyApp.rowNumber!.length < limit) {
hasMore = false;
}
MyApp.rowNumber?.addAll(ress.map<String>((item) {
final rowNumber = item['RowNumber'].toString();
return rowNumber;
}));
MyApp.walletName?.addAll(ress.map<String>((item) {
final walletName = item['WalletName'].toString();
return walletName;
}));
MyApp.payerPhoneNumber?.addAll(ress.map<String>((item) {
final phoneNumber = item['SenderRequisite'].toString();
return phoneNumber;
}));
MyApp.createdDate?.addAll(ress.map<String>((item) {
final createdDate = item['CreatedDate'].toString();
return createdDate;
}));
MyApp.amount?.addAll(ress.map<String>((item) {
final amount = item['Amount'].toString();
return amount;
}));
});
print(MyApp.createdDate.runtimeType);
} else {
var res = response.statusCode;
print(res);
}
} catch (error) {
print(error);
}
}
Here is all the necessary code, if you need something else, please let me know
child: ListView.builder(
controller: controller,
padding: EdgeInsets.all(5),
itemCount: MyApp.rowNumber!.length + 1,
itemBuilder: (context, index) {
if (index < MyApp.rowNumber!.length) {
return Container(
padding: EdgeInsets.all(5),
margin: EdgeInsets.all(2),
decoration: BoxDecoration(
border: Border.all(color: Colors.black)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
Container(
margin: EdgeInsets.all(5),
child: Text(' ${MyApp.rowNumber?[index]}', style: TextStyle(fontSize: 15),),
)
],
),
Column(
children: [
Container(
margin: EdgeInsets.all(5),
width: 80,
child: Text('${MyApp.createdDate?[index].replaceFirst(RegExp('T'), '')}', style: TextStyle(fontSize: 15),),
)
],
),
Column(
children: [
Container(
margin: EdgeInsets.all(5),
child: Column(
children: [
Text('${MyApp.walletName?[index]}', style: TextStyle(fontSize: 15),),
Text('${MyApp.payerPhoneNumber?[index]}', style: TextStyle(fontSize: 15),),
],
),
)
],
),
Column(
children: [
Container(
margin: EdgeInsets.all(5),
child: Text('${MyApp.amount?[index]}', style: TextStyle(fontSize: 15),),
)
],
)
],
),
),
],
)
);
} else {
return Padding(
padding: EdgeInsets.symmetric(vertical: 10),
child: Center(
child: hasMore
? const CircularProgressIndicator()
: const Text('Список полностью загружен')
,),
);
}
}
)
UPD: I clarify the question: My first request was sent with a limit of 9 entries, however, if there are less than 9 entries, then there will be an endless download. How to fix it?

Answer 1

you are not setting isLoading as false for HTTP request's response other than 200 and for error.
Future fetch() async {
if(isLoading) return;
isLoading = true;
var token = LoginClass.resJson;
const limit = 9;
try {
final response = await http.post(
Uri.parse(Config.urlReport),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
"Authorization": "Bearer $token"
},
body: json.encode({
"Filters": {
"DateFrom" : MyApp.dateFrom,
"DateTo" : MyApp.dateEnd,
"AmountFrom": MyApp.sumFrom,
"AmountTo": MyApp.sumTo,
"SenderPaymentSystemId": MyApp.dropdownvalue,
"SenderRequisite": MyApp.phoneNum},
"Sorting": {
"Field": MyApp.isCheckedFieldPicker,
"Order": MyApp.isCheckedOrderPicker},
"Pagination": {
"PageNumber": page,
"PageSize": limit
}
})
);
if (response.statusCode == 200) {
var reportResult = (response.body);
print(reportResult);
final List ress = json.decode(reportResult)['Transactions'];
setState(() {
page++;
isLoading = false;
if(MyApp.rowNumber!.length < limit) {
hasMore = false;
}
MyApp.rowNumber?.addAll(ress.map<String>((item) {
final rowNumber = item['RowNumber'].toString();
return rowNumber;
}));
MyApp.walletName?.addAll(ress.map<String>((item) {
final walletName = item['WalletName'].toString();
return walletName;
}));
MyApp.payerPhoneNumber?.addAll(ress.map<String>((item) {
final phoneNumber = item['SenderRequisite'].toString();
return phoneNumber;
}));
MyApp.createdDate?.addAll(ress.map<String>((item) {
final createdDate = item['CreatedDate'].toString();
return createdDate;
}));
MyApp.amount?.addAll(ress.map<String>((item) {
final amount = item['Amount'].toString();
return amount;
}));
});
print(MyApp.createdDate.runtimeType);
} else {
var res = response.statusCode;
isLoading = false;
setState(() {});
print(res);
}
} catch (error) {
isLoading = false;
setState(() {});
print(error);
}
}