http package in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the http package in Flutter.

Flutter

import 'package:[1]/http.dart' as http;

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

Amaterial

Bflutter

Chttp

Dcupertino

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flutter' or 'material' instead of 'http' in the import statement.

The http package is imported using package:http/http.dart. This allows you to use http methods like get and post.

2fill in blank

medium

Complete the code to send a GET request to fetch data from a URL.

Flutter

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

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

Apost

Bget

Cdelete

Dput

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'post' or 'put' instead of 'get' for fetching data.

The get method sends a GET request to the specified URL to retrieve data.

3fill in blank

hard

Fix the error in the code to correctly parse the response body as a string.

Flutter

if (response.statusCode == 200) {
  var data = response.[1];
}

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

Abody

BbodyBytes

Cheaders

Drequest

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bodyBytes' which returns bytes instead of a string.

Trying to access 'headers' or 'request' instead of the response content.

The body property contains the response content as a string, which is what you want to parse.

4fill in blank

hard

Fill both blanks to send a POST request with JSON data and set the correct header.

Flutter

var response = await http.post(
  Uri.parse('https://example.com/api'),
  headers: {'Content-Type': '[1]'},
  body: [2]
);

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

Aapplication/json

B{'name': 'John'}

Ctext/plain

D{"name": "John"}

Attempts:

3 left

💡 Hint

Common Mistakes

Using single quotes in JSON body which is invalid.

Setting Content-Type to 'text/plain' instead of 'application/json'.

When sending JSON data, the header must be 'application/json'. The body must be a JSON string, so use double quotes inside the string.

5fill in blank

hard

Fill all three blanks to decode JSON response and access a field named 'title'.

Flutter

import 'dart:convert';

var jsonResponse = json.[1](response.[2]);
var title = jsonResponse['[3]'];

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

Adecode

Bbody

Ctitle

Dencode

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'encode' instead of 'decode' to parse JSON.

Trying to decode 'response' instead of 'response.body'.

Accessing a wrong key name or misspelling 'title'.

Use json.decode to convert the JSON string from response.body into a Dart map. Then access the 'title' field from the map.