Department of Computing
EC-303: Mobile Application Development
Class: BESE 9AB + BSCS 8ABC
Lab 09: Asynchronous programming:
futures, async, await , error handling in
asynchronous code.
Date: 19-April-2022
Time: 09:00 AM - 11:10 AM
&
12:00 PM - 02:25 PM
Name: Muhammad Umer Farooq
Class: BESE 9A
CMS ID: 266086
Instructor: Dr. Hasan Ali khattak
Dr. Yasir Faheem
Lab Engineer: Mr. Aftab Farooq
EC303: Mobile Application Development Page 1
Lab 09: Asynchronous programming:
futures, async, await, error handling in
asynchronous code
Objectives
This lab will get students familiar with Asynchronous programming: futures, async, await ,
error handling in asynchronous code and handling API responses received from server in
JSON format.
Topics to be Covered
Asynchronous programming
Using a Future
Using async/await to remove callbacks
Completing Futures
Resolving errors in asynchronous code
Handling API responses received from server
Tools/Software Requirement
Flutter SDK
Android Studio
VS Code
FlutLab
Lab Tasks :
Future :
A Future addresses a computation that doesn’t finish right away. Though a typical function
returns the outcome, an asynchronous function returns a Future, which will ultimately
contain the outcome. The Future will reveal to you when the outcome is prepared.
So, a Future can be in one of three states:
Uncompleted: You called a Future, but the response isn’t available yet.
Completed with value: The output is open, and data is ready (The then () function is
called).
Completed with an error: The output is open, but something went wrong (The catch
Error () function is called.)
EC303: Mobile Application Development Page 2
Task # 1
Follow the guidelines mentioned in https://dart.dev/codelabs/async-await
and try solving the example problems in Flutter. (ETA 30 – 60 minutes)
Note : This task is supposed to be completed in the Lab.
1.
Future<String> reportUserRole() async {
var username = await fetchRole();
return 'User role: $username';
Future<String> reportLogins() async {
var logins = await fetchLoginAmount();
return 'Total number of logins: $logins';
EC303: Mobile Application Development Page 3
}
2.
Future<String> changeUsername() async {
try {
return await fetchNewUsername();
} catch (err) {
return err.toString();
Output:
3.
String addHello(String user) => 'Hello $user';
Future<String> greetUser() async {
var username = await fetchUsername();
return addHello(username);
}
EC303: Mobile Application Development Page 4
Future<String> sayGoodbye() async {
try {
var result = await logoutUser();
return '$result Thanks, see you next time';
} catch (e) {
return 'Failed to logout user: $e';
Task # 2
This task is based on asynchronous programming. Before Implementing You need to go
through these two helping link for better understating of asynchronous programming.
o https://medium.flutterdevs.com/exploring-asynchronous-programming-in-dart-
flutter-25f341af32f
o https://medium.flutterdevs.com/explore-futures-in-flutter-
50ea5b91fc2#:~:text=To%20perform%20such%20tasks%20in,Like%20the%20UI
%20thread.
1. Make a network request using the http package and call the below API.
https://jsonplaceholder.typicode.com/todos
o Install the Postman or add Rest let Client chrome extension to test the above.
o Check the response of above API by using postman or Rest let Client.
2. Write your model class to store the contents of the JSON file.
EC303: Mobile Application Development Page 5
3. Write code to receive and parse response from the APIs in a JSON format.
4. You should also write code for initializing your model classes from JSON object(s).
5. Create a List view widget to display the data that you get in API response (as shown
below).
o Show id and title from json response. (screen shot 1)
EC303: Mobile Application Development Page 6
I have attached the zip file for task2 and task 3 please review them
Output Screenshots:
Task # 3 : Error Handling using Asynchronous Programming
Reuse the above code.
1 Show an the circularProgessIndicator before calling an above API (screen shot 1)
o https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html
o https://codesinsider.com/flutter-circular-progress-indicator-example-
tutorial/
2 Hide circular progress indicator on response of API.
3 Check Internet availability before calling an API. Show proper message to user
if internet is unavailable.
4 If API throw any server error show that error in alert dialog. (screen shot 2)
5 Add a retry button when due to any reason server fails to respond hit the
retry button and call the API again.
EC303: Mobile Application Development Page 7
Screenshot 1: Progress Dialog Screenshot 2: Server Error
Output Screenshot:
EC303: Mobile Application Development Page 8
EC303: Mobile Application Development Page 9
Useful Resources
Below is the list of useful resources to help you in solving this task:
1. Asynchronous Programming : https://dart.dev/codelabs/async-await
2. Asynchronous Programming : https://medium.flutterdevs.com/exploring-
asynchronous- programming-in-dart-flutter-25f341af32f
3. JSON Parsing gist: https://gist.github.com/bizz84/798c1c5a69690af54d09ca6e8469faec
4. Package Loading: https://dart.dev/guides/packages
5. http Library: https://pub.dev/packages/http
6. JSON Parsing Tutorial: https://codewithandrea.com/articles/parse-json-dart/
7. Circular Progress Indicator :
https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html
Deliverables and other information:
All tasks are ideally supposed to be finished in the lab.
Each folder should contain fully working and compliable code.
Consult the screenshot below to get an idea about folder structuring
for all the deliverables.
Add all lab tasks in a single folder, zip them, and upload the zip file on LMS.
The name of the zip file should be: your-name_class_cms-id_lab-
6.zip
(example: Muhammad-Farooq_bscs-8_200213_lab-6.zip)
This lab is graded between 0 to 10 marks.
Marks will be deducted in case if any functionality is
incomplete, missing, or codeis not compiling.
2 marks will be deducted in case the deliverables are uploaded in
an unacceptable format.
Late submissions will also result in deducting 2 marks.
You will be awarded a zero if you fail to submit the task.
At the end of each lab or in the next lab, there will be a viva/quiz related to
the tasks.
In case of any problems with submissions on LMS, submit your
Lab assignments by emailing it to Mr. Aftab Farooq:
[email protected].
EC303: Mobile Application Development Page
10
Structure for submitting the lab task
EC303: Mobile Application Development Page
11
