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.

Practice

1.

What does the http.get() function do in Flutter's http package?

easy

A. It deletes data from a server.

B. It sends data to a server.

C. It fetches data from a given URL.

D. It updates data on a server.

Solution

1. Step 1: Understand the purpose of http.get()

   The http.get() method is used to request data from a specified URL.

2. Step 2: Differentiate from other HTTP methods

   Sending data uses http.post(), deleting uses http.delete(), and updating uses http.put() or http.patch().

3. Final Answer:

   It fetches data from a given URL. -> Option C

4. Quick Check:

   http.get() = fetch data [OK]

Hint: Remember: get = fetch, post = send [OK]

Common Mistakes:

• Confusing get() with post()
• Thinking get() sends data
• Mixing HTTP methods

2.

Which of the following is the correct way to create a URI for http.get() in Flutter?

http.get(???);

easy

A. http.get(Uri.parse('https://example.com'))

B. http.get(Uri.https('example.com'))

C. http.get(Uri('https://example.com'))

D. http.get('https://example.com')

Solution

1. Step 1: Check the required argument type for http.get()

   The http.get() method requires a Uri object, not a plain string.

2. Step 2: Use Uri.parse() to convert string to Uri

   The correct way is to wrap the URL string with Uri.parse() to create a Uri object.

3. Final Answer:

   http.get(Uri.parse('https://example.com')) -> Option A

4. Quick Check:

   Use Uri.parse() for URLs in http.get() [OK]

Hint: Always wrap URL string with Uri.parse() [OK]

Common Mistakes:

• Passing URL as plain string
• Using Uri() constructor incorrectly
• Trying Uri.https() without parameters

3.

What will be printed by this Flutter code snippet?

import 'package:http/http.dart' as http;

void fetchData() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
  if (response.statusCode == 200) {
    print('Success');
  } else {
    print('Failed');
  }
}

fetchData();

medium

A. SyntaxError

B. Success

C. Failed

D. No output

Solution

1. Step 1: Analyze the HTTP GET request

   The code requests a valid URL that returns a post with status code 200 on success.

2. Step 2: Check the status code condition

   If the status code is 200, it prints 'Success'; otherwise, 'Failed'. The URL is valid and should return 200.

3. Final Answer:

   Success -> Option B

4. Quick Check:

   Status code 200 means Success [OK]

Hint: Status code 200 means success [OK]

Common Mistakes:

• Assuming any response prints 'Failed'
• Ignoring async/await usage
• Not checking statusCode properly

4.

Identify the error in this Flutter code using the http package:

import 'package:http/http.dart' as http;

void sendData() async {
  final response = await http.post('https://example.com/api/data');
  if (response.statusCode == 201) {
    print('Created');
  }
}

medium

A. No error; code is correct.

B. Incorrect status code check; should be 200.

C. http.post() cannot be awaited.

D. Missing Uri.parse() around the URL string.

Solution

1. Step 1: Check the argument type for http.post()

   The http.post() method requires a Uri object, not a plain string.

2. Step 2: Identify missing Uri.parse()

   The URL string should be wrapped with Uri.parse() to convert it to a Uri object.

3. Final Answer:

   Missing Uri.parse() around the URL string. -> Option D

4. Quick Check:

   http.post() needs Uri.parse() for URL [OK]

Hint: Always use Uri.parse() for URLs in http methods [OK]

Common Mistakes:

• Passing URL as string directly
• Confusing status codes 200 and 201
• Forgetting async/await with http calls

5.

You want to send JSON data using http.post() in Flutter. Which code snippet correctly sends a JSON body and sets the content type header?

import 'package:http/http.dart' as http;
import 'dart:convert';

void sendJson() async {
  final url = Uri.parse('https://example.com/api');
  final response = await http.post(
    url,
    headers: ???,
    body: ???,
  );
}

hard

A. {'Content-Type': 'application/json'}, jsonEncode({'key': 'value'})

B. {'content-type': 'text/plain'}, jsonEncode({'key': 'value'})

C. {'Content-Type': 'application/json'}, {'key': 'value'}

D. {'Content-Type': 'application/json'}, json.decode({'key': 'value'})

Solution

1. Step 1: Set the correct header for JSON

   The header must be {'Content-Type': 'application/json'} to tell the server the body is JSON.

2. Step 2: Encode the body as JSON string

   The body must be a string, so use jsonEncode() to convert the map to a JSON string.

3. Final Answer:

   {'Content-Type': 'application/json'}, jsonEncode({'key': 'value'}) -> Option A

4. Quick Check:

   Headers + jsonEncode() = correct JSON POST [OK]

Hint: Use jsonEncode() and set Content-Type header [OK]

Common Mistakes:

• Passing map directly as body
• Wrong content-type header
• Using json.decode() instead of jsonEncode()