What is the best way to make a network call? - flutter

Question

I am fairly new to Flutter. I would like to know what is the best way in terms of coding best practices to do a network call.
I searched on internet (including Stackoverflow) on how to make the REST call (GET, POST) and found some code samples. For example, one of them is given below.
new RaisedButton(
onPressed: () async {
Post newPost = new Post(
userId: "123", id: 0, title: titleControler.text, body: bodyControler.text);
Post p = await createPost(CREATE_POST_URL,
body: newPost.toMap());
print(p.title);
},
)
Now, I don't think it's a good idea to club everything in onPressed(). I am especially interested to know how to fit a network call before a page load (or update after the data is fetched). I know it's done by setState(). But would like to know how the different pieces are put together to write a best code.
Any help will be highly appreciated.

Answer 1

The best way is to keep every piece short and specific to one task only. This is not specific to the Flutter (and applies to any coding in general). One type of doing it is as mentioned below :
Let's say you want to fetch a list of employees from the API.
Define Employee class, specify mandatory/non-mandatory attributes etc. And also write .fromJson() to instantiate.
Start with didChangeDependencies in your Stateful widget like below.
#override
void didChangeDependencies() {
super.didChangeDependencies();
_requestEmployeeListFromAPI();
}
The _requestDataFromAPI() function will just be a pointer for the network call as follows :
Future<void> _requestEmployeeListFromAPI() async {
try {
_myList = await network.getEmployeeList();
} catch (exception) {
print(exception);
// ...
} else {
// show exception
}
} finally {
if (mounted) {
setState(() => _isLoadingCompleted = true);
}
}
}
Handle your UI based on the value of _isLoadingCompleted
Now, your network file may consists all the network calls to be done in the project. Example below :
Future<List<Employee>> getEmployeeList() async {
try {
http.Response response = await http.post(
"$getEmployeeListUrl",
);
Map<String, dynamic> decodedBody = json.decode(response.body);
print(decodedBody);
List<Employee> employeeList = (decodedBody["EmployeeList"] as List)
.map((element) => Employee.fromJson(element))
.toList();
return employeeList;
} catch (e) {
print(e);
}
}
This way, every piece is written at a different position and is very easy to enhance / debug / find bug, if any.