GET and POST requests in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when this Flutter code runs?

This Flutter widget fetches data from a URL using a GET request and displays the result. What will the UI show after the data is successfully fetched?

Flutter

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

class DataFetcher extends StatefulWidget {
  @override
  State<DataFetcher> createState() => _DataFetcherState();
}

class _DataFetcherState extends State<DataFetcher> {
  String data = 'Loading...';

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  Future<void> fetchData() async {
    final response = await http.get(Uri.parse('https://example.com/data'));
    if (response.statusCode == 200) {
      setState(() {
        data = response.body;
      });
    } else {
      setState(() {
        data = 'Error fetching data';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text(data)),
    );
  }
}

A The screen shows the text content fetched from https://example.com/data.

B The screen shows the text 'Loading...' indefinitely.

C The screen shows a blank white screen with no text.

D The app crashes with a runtime error due to missing internet permission.

💡 Hint

Think about what happens after the HTTP GET request completes successfully.

The widget starts with 'Loading...'. After the GET request completes with status 200, it updates the state to show the response body text on screen.

📝 Syntax

intermediate

Which option correctly sends a POST request with JSON body in Flutter?

You want to send a POST request with JSON data {'name': 'Alice'} to https://example.com/api. Which code snippet is correct?

A await http.post(Uri.parse('https://example.com/api'), body: jsonEncode({'name': 'Alice'}), headers: {'Content-Type': 'text/plain'});

B await http.post(Uri.parse('https://example.com/api'), body: {'name': 'Alice'});

C await http.post('https://example.com/api', body: jsonEncode({'name': 'Alice'}));

D await http.post(Uri.parse('https://example.com/api'), headers: {'Content-Type': 'application/json'}, body: jsonEncode({'name': 'Alice'}));

💡 Hint

Remember to set the content type header to 'application/json' and encode the body as JSON string.

Option D correctly sets the header and encodes the body as JSON string. Option D sends a Map as body without encoding. Option D misses Uri.parse. Option D sets wrong content type.

❓ lifecycle

advanced

What is the problem with this Flutter GET request code inside build()?

Consider this Flutter widget code snippet that fetches data inside the build method. What issue will it cause?

Flutter

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    http.get(Uri.parse('https://example.com/data')).then((response) {
      print(response.body);
    });
    return Text('Fetching data...');
  }
}

A The GET request runs only once and works fine.

B The GET request runs repeatedly causing performance issues and multiple prints.

C The code causes a compile-time error because http.get is not allowed in build.

D The app crashes because build method cannot have async calls.

💡 Hint

Think about how often build() runs in Flutter widgets.

The build method can be called many times, so placing http.get inside it causes repeated network calls and prints, hurting performance.

🔧 Debug

advanced

Why does this POST request fail with a 415 Unsupported Media Type error?

This Flutter code sends a POST request but the server responds with 415 error. What is the cause?

Flutter

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

A The Content-Type header is missing or incorrect.

B The URL is invalid and causes server error.

C The body is not encoded as JSON string.

D The http.post method requires a GET request instead.

💡 Hint

Check what header tells the server the data format.

Without setting 'Content-Type' to 'application/json', the server rejects the JSON body causing 415 error.

🧠 Conceptual

expert

What is the best way to handle errors in Flutter async HTTP requests?

You want to fetch data with GET and handle possible errors like network failure or bad response. Which approach is best?

A Use only .then() without error handling callbacks.

B Ignore errors and assume the request always succeeds.

C Use try-catch around await http.get and check response status code inside try block.

D Call http.get without await and do not check response.

💡 Hint

Think about catching exceptions and validating responses.

Using try-catch with await allows catching exceptions like network errors, and checking status code ensures response is valid.