Why API calls fetch remote data in Flutter - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data from a remote API using Flutter's http package.

Flutter

final response = await http.[1](Uri.parse('https://api.example.com/data'));

Drag options to blanks, or click blank then click option'

Aput

Bdelete

Cget

Dpost

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'post' instead of 'get' to fetch data.

Confusing HTTP methods for fetching data.

The get method is used to fetch data from a remote API in Flutter.

2fill in blank

medium

Complete the code to decode the JSON response body after fetching remote data.

Flutter

final data = json.decode(response.[1]);

Drag options to blanks, or click blank then click option'

Abody

BstatusCode

Cheaders

Drequest

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to decode the status code or headers instead of the body.

Forgetting to decode the JSON string.

The body property contains the raw JSON string from the response, which we decode.

3fill in blank

hard

Fix the error in the code by choosing the correct way to handle asynchronous API calls in Flutter.

Flutter

void fetchData() {
  http.get(Uri.parse('https://api.example.com/data')).[1]((response) => print(response.body));
}

Drag options to blanks, or click blank then click option'

AstatusCode

Bbody

Cawait

Dthen

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to access response properties directly without waiting for the Future.

Not marking the function as async when using await.

The get method returns a Future. Use then to handle the response asynchronously.

4fill in blank

hard

Fill both blanks to create a function that fetches data asynchronously and returns the decoded JSON.

Flutter

Future<dynamic> fetchData() async {
  final response = await http.[1](Uri.parse('https://api.example.com/data'));
  return json.[2](response.body);
}

Drag options to blanks, or click blank then click option'

Aget

Bpost

Cdecode

Dencode

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST instead of GET for fetching data.

Using encode instead of decode for JSON.

Use get to fetch data and decode to convert JSON string to a Dart object.

5fill in blank

hard

Fill all three blanks to handle errors when fetching remote data and decoding JSON.

Flutter

Future<dynamic> fetchData() async {
  try {
    final response = await http.[1](Uri.parse('https://api.example.com/data'));
    if (response.statusCode == 200) {
      return json.[2](response.[3]);
    } else {
      throw Exception('Failed to load data');
    }
  } catch (e) {
    return null;
  }
}

Drag options to blanks, or click blank then click option'

Aget

Bbody

Cdecode

DstatusCode

Attempts:

3 left

💡 Hint

Common Mistakes

Checking statusCode incorrectly or decoding wrong property.

Not handling exceptions properly.

Use get to fetch, decode to parse JSON, and body to access the response content.

Practice

1. Why do Flutter apps make API calls to fetch remote data?

easy

A. To speed up the app without network

B. To store data only on the device

C. To avoid using the internet

D. To get the latest information from the internet

Solution

1. Step 1: Understand the purpose of API calls

   API calls connect to servers to get fresh data, like weather or news updates.

2. Step 2: Compare options

   Only To get the latest information from the internet explains fetching latest info from the internet, others are incorrect.

3. Final Answer:

   To get the latest information from the internet -> Option D

4. Quick Check:

   API calls fetch fresh data = A [OK]

Hint: API calls get fresh data from servers [OK]

Common Mistakes:

• Thinking API calls store data locally only
• Believing API calls avoid internet use
• Confusing API calls with offline storage

2. Which Flutter code snippet correctly starts an API call to fetch data asynchronously?

easy

A. var response = http.get(url);

B. var response = await http.get(Uri.parse(url));

C. var response = http.getSync(Uri.parse(url));

D. var response = http.fetch(url);

Solution

1. Step 1: Identify correct async syntax

   In Flutter, http.get requires Uri and await for async calls.

2. Step 2: Check each option

   var response = await http.get(Uri.parse(url)); uses await and Uri.parse correctly; others are invalid or wrong method names.

3. Final Answer:

   var response = await http.get(Uri.parse(url)); -> Option B

4. Quick Check:

   Async call with await and Uri.parse = A [OK]

Hint: Use await with http.get and Uri.parse for async calls [OK]

Common Mistakes:

• Forgetting await keyword
• Passing string URL directly without Uri.parse
• Using non-existent http.getSync or http.fetch methods

3. What will this Flutter code print if the API returns JSON {"name":"Alice"}?

var response = await http.get(Uri.parse(url));
if (response.statusCode == 200) {
  var data = jsonDecode(response.body);
  print(data['name']);
} else {
  print('Error');
}

medium

A. Alice

B. Error

C. null

D. Exception

Solution

1. Step 1: Check response status

   Status code 200 means success, so code enters the if block.

2. Step 2: Parse JSON and print value

   jsonDecode parses JSON string; data['name'] is "Alice", so it prints Alice.

3. Final Answer:

   Alice -> Option A

4. Quick Check:

   Successful API call prints JSON name value = B [OK]

Hint: Status 200 means success; print JSON key value [OK]

Common Mistakes:

• Ignoring statusCode check
• Not parsing JSON before accessing keys
• Expecting 'Error' when status is 200

4. Identify the error in this Flutter API call code:

var response = http.get(Uri.parse(url));
if (response.statusCode == 200) {
  print('Success');
}

medium

A. Incorrect statusCode property name

B. Wrong URL format

C. Missing await keyword for async call

D. No error, code is correct

Solution

1. Step 1: Check async call usage

   http.get returns a Future; must use await to get response before accessing statusCode.

2. Step 2: Identify missing await

   Code tries to access statusCode on Future, causing error; await is missing.

3. Final Answer:

   Missing await keyword for async call -> Option C

4. Quick Check:

   Async calls need await before accessing response = C [OK]

Hint: Always await async http.get before using response [OK]

Common Mistakes:

• Accessing statusCode on Future without await
• Assuming http.get is synchronous
• Ignoring async nature of API calls

5. You want your Flutter app to show a list of user names from an API. Which approach correctly fetches and uses the remote data? A) Call API once, parse JSON list, and update UI with names asynchronously. B) Store user names locally and never update from API. C) Call API without checking status code and parse JSON directly. D) Use synchronous API call to block UI until data loads.

hard

A. Call API once, parse JSON list, and update UI with names asynchronously.

B. Store user names locally and never update from API.

C. Call API without checking status code and parse JSON directly.

D. Use synchronous API call to block UI until data loads.

Solution

1. Step 1: Understand best practice for API data use

   Fetching data asynchronously and updating UI after parsing JSON is correct and user-friendly.

2. Step 2: Evaluate other options

   B ignores fresh data, C risks errors by skipping status check, D blocks UI causing bad experience.

3. Final Answer:

   Call API once, parse JSON list, and update UI with names asynchronously. -> Option A

4. Quick Check:

   Async fetch, parse, update UI = A [OK]

Hint: Fetch async, check status, parse JSON, update UI [OK]

Common Mistakes:

• Ignoring status code check before parsing
• Blocking UI with synchronous calls
• Not updating UI after data fetch