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:
aftab.farooq@seecs.edu.pk.

EC303: Mobile Application Development Page

10
 Structure for submitting the lab task

EC303: Mobile Application Development Page

11