Flutter Refresh List From API - flutter

Question

i have a GET function in my flutter code and everytime i add a new item to the list. the list doesn't refresh and won't display the newly added item unless i refresh the whole page.
this is my POST method :
Future<http.Response> ajoutFournisseur(
String numeroFournisseur,
String addressFournisseur,
String matriculeFiscaleFournisseur,
String raisonSocialeFournisseur,
String paysFournisseur,
String villeFournisseur,
double timberFiscaleFournisseur) async {
List fournisseurs = [];
final response = await http.post(
Uri.parse('http://127.0.0.1:8000/api/fournisseur/'),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
},
body: jsonEncode(<String, dynamic>{
'tel': numeroFournisseur,
'adresse': addressFournisseur,
'mf': matriculeFiscaleFournisseur,
'raisonSociale': raisonSocialeFournisseur,
'pays': paysFournisseur,
'ville': villeFournisseur,
'timberFiscale': timberFiscaleFournisseur,
}),
);
if (response.statusCode == 200) {
return fournisseurs = jsonDecode(response.body);
} else {
throw Exception('Erreur base de données!');
}
}
Future<dynamic> future;
and this is code of the button to confirm :
ElevatedButton(
onPressed: (() {
if (_formKey.currentState.validate()) {
// If the form is valid, display a snackbar. In the real world,
// you'd often call a server or save the information in a database.
setState(() {
future = ajoutFournisseur(
numeroFournisseur.text,
addressFournisseur.text,
matriculeFiscaleFournisseur.text,
raisonSocialeFournisseur.text,
paysFournisseur.text,
villeFournisseur.text,
double.parse(timberFiscaleFournisseur.text));
});
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Ajout en cours')),
);
}
}), ...
and this is my GET methos to fetch the items from the list :
fetchFournisseurs() async {
final response =
await http.get(Uri.parse('http://127.0.0.1:8000/api/fournisseur'));
if (response.statusCode == 200) {
var items = jsonDecode(response.body);
setState(() {
fournisseurs = items;
print(fournisseurs[0]['raisonSociale']);
});
} else {
throw Exception('Error!');
}
}
.
.
.
for (var i = 0; i < fournisseurs.length; i++)
Card(
child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
ListTile(
title: Text(fournisseurs[i]['raisonSociale']), ...
how can i refresh the list everytime i add a new item without refreshing the whole page ?

Answer 1

I think you first of all need to learn some Flutter good practices.
For example, don't put your logic into the ElevatedButton, set it into a separate Widget function like below :
class Test extends StatefulWidget {
const Test({ Key? key }) : super(key: key);
#override
State<Test> createState() => _TestState();
}
class _TestState extends State<Test> {
Future<void> _handleAjout() async {
if (_formKey.currentState.validate()) {
// First, check your request succeed
try {
var fournisseurs = await ajoutFournisseur(
numeroFournisseur.text,
addressFournisseur.text,
matriculeFiscaleFournisseur.text,
raisonSocialeFournisseur.text,
paysFournisseur.text,
villeFournisseur.text,
double.parse(timberFiscaleFournisseur.text));
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Ajout en cours')),
);
// Will only update state if no error occured
setState(() => future = fournisseurs);
}
on Exception catch(e) {
// Always make sure the request went well
print("error");
}
}
#override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: (() {
_handleAjout();
}),
)
}
}
And by awaiting POST result, then you can tell your Widget to fetch data and refresh the list by making :
#override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: (() {
_handleAjout().then(() => fetchFournisseurs());
}),
)
}
The .then function tells Flutter to execute the code contained in the () => myCallbackFunction() only if the previous asynchronous function went well.
By the way, you should always check if your content looks like what you expected before calling setState and set data to your variables :)