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.