GET and POST requests in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the package needed for HTTP requests in Flutter.

Flutter

import [1];

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

Apackage:flutter/material.dart

Bpackage:flutter/widgets.dart

C'package:http/http.dart' as http

Dpackage:async/async.dart

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Flutter UI packages instead of the HTTP package.

Forgetting to alias the package as 'http' for easier use.

The http package is used to make GET and POST requests in Flutter.

2fill in blank

medium

Complete the code to send a GET request to the given URL.

Flutter

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

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

Adelete

Bpost

Cput

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

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

Not wrapping the URL string with Uri.parse().

The get method sends a GET request to fetch data from the server.

3fill in blank

hard

Fix the error in the POST request code by completing the missing method.

Flutter

final response = await http.[1](Uri.parse('https://example.com/post'), body: {'key': 'value'});

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

Apost

Bget

Cpatch

Dhead

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' method with a body parameter, which is invalid.

Confusing HTTP methods and their purposes.

The post method is used to send data to the server.

4fill in blank

hard

Fill both blanks to check if the GET request was successful and print the response body.

Flutter

if (response.statusCode [1] 200) {
  print(response.[2]);
}

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

A==

BstatusCode

Cbody

D!=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '!=' instead of '==' to check status code.

Printing 'statusCode' instead of 'body'.

We check if the status code equals 200, which means success, then print the response body.

5fill in blank

hard

Fill all three blanks to send a POST request with JSON headers and body.

Flutter

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

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

Apost

Bapplication/json

CjsonEncode({'name': 'John'})

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' instead of 'post' for sending data.

Forgetting to set 'Content-Type' header.

Sending body as a Dart map instead of JSON string.

Use post to send data, set header to application/json, and encode the body as JSON.

Practice

1. What is the main purpose of a GET request in Flutter when using the http package?

easy

A. To send data to a server to create or update something

B. To delete data from a server

C. To fetch data from a server without changing it

D. To authenticate a user

Solution

1. Step 1: Understand GET request purpose

   GET requests are used to retrieve or fetch data from a server without modifying it.

2. Step 2: Compare with other request types

   POST requests send data to create or update, DELETE removes data, and authentication is separate.

3. Final Answer:

   To fetch data from a server without changing it -> Option C

4. Quick Check:

   GET = fetch data [OK]

Hint: GET fetches data, POST sends data [OK]

Common Mistakes:

• Confusing GET with POST requests
• Thinking GET modifies server data
• Mixing GET with DELETE or authentication

2. Which of the following is the correct syntax to make a POST request using the http package in Flutter?

easy

A. http.post(Uri.parse(url), body: {"key": "value"});

B. http.get(Uri.parse(url), body: {"key": "value"});

C. http.post(url, {"key": "value"});

D. http.sendPost(Uri.parse(url), body: {"key": "value"});

Solution

1. Step 1: Identify correct method and parameters

   The http.post method requires a Uri object and an optional body map for data.

2. Step 2: Check syntax correctness

   http.post(Uri.parse(url), body: {"key": "value"}); uses Uri.parse(url) and passes body correctly. Others use wrong methods or parameters.

3. Final Answer:

   http.post(Uri.parse(url), body: {"key": "value"}); -> Option A

4. Quick Check:

   POST syntax = http.post(Uri.parse(url), body) [OK]

Hint: Use Uri.parse() and http.post() with body map [OK]

Common Mistakes:

• Passing URL as string instead of Uri
• Using http.get instead of http.post for POST
• Wrong method name like sendPost

3. What will be the output of this Flutter code snippet using the http package?

var response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
print(response.statusCode);
print(response.body.contains('userId'));

medium

A. 200 and false

B. 404 and false

C. 500 and false

D. 200 and true

Solution

1. Step 1: Understand the GET request URL

   The URL points to a valid post resource, so the server should respond with status 200 (OK).

2. Step 2: Check response body content

   The JSON response includes a 'userId' field, so response.body.contains('userId') returns true.

3. Final Answer:

   200 and true -> Option D

4. Quick Check:

   Status 200 and body contains 'userId' = true [OK]

Hint: Valid URL returns 200 and expected JSON content [OK]

Common Mistakes:

• Assuming 404 for valid URL
• Not checking response body content
• Confusing status codes

4. Identify the error in this Flutter code that tries to send a POST request:

var response = await http.post('https://example.com/api', body: {"name": "John"});
print(response.statusCode);

medium

A. Body should be a JSON string, not a map

B. URL should be wrapped with Uri.parse()

C. http.post cannot be awaited

D. Missing headers for content type

Solution

1. Step 1: Check URL parameter type

   The http.post method requires the URL as a Uri object, not a plain string.

2. Step 2: Confirm correct usage

   Wrapping the URL string with Uri.parse() fixes the error. Other options are not mandatory errors here.

3. Final Answer:

   URL should be wrapped with Uri.parse() -> Option B

4. Quick Check:

   URL must be Uri.parse(string) [OK]

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

Common Mistakes:

• Passing URL as plain string
• Assuming body must be JSON string always
• Forgetting to await async calls

5. You want to send a POST request with JSON data and receive a JSON response in Flutter. Which code snippet correctly handles this scenario using the http package?

hard

A. var response = await http.post(Uri.parse(url), headers: {"Content-Type": "application/json"}, body: jsonEncode({"name": "Alice"}));
var data = jsonDecode(response.body);

B. var response = await http.post(Uri.parse(url), body: {"name": "Alice"});
var data = response.body;

C. var response = await http.get(Uri.parse(url), headers: {"Content-Type": "application/json"});
var data = jsonDecode(response.body);

D. var response = await http.post(url, body: jsonEncode({"name": "Alice"}));
var data = jsonDecode(response.body);

Solution

1. Step 1: Set headers and encode body correctly

   To send JSON data, set header "Content-Type" to "application/json" and encode body with jsonEncode.

2. Step 2: Parse JSON response properly

   Use jsonDecode on response.body to convert JSON string to Dart object.

3. Step 3: Check URL parameter type

   URL must be wrapped with Uri.parse() for correct request.

4. Final Answer:

   Use http.post with Uri.parse, headers, jsonEncode body, and jsonDecode response -> Option A

5. Quick Check:

   POST JSON = headers + jsonEncode + jsonDecode [OK]

Hint: Use headers and jsonEncode for POST JSON, decode response [OK]

Common Mistakes:

• Not setting Content-Type header
• Passing body as map without encoding
• Using http.get instead of post for sending data
• Passing URL as string without Uri.parse