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.