http package in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output of this Flutter code using http package?

Consider this Flutter code snippet that fetches data from a URL and displays the response body in a Text widget. What will the UI show after a successful fetch?

Flutter

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

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  String data = 'Loading...';

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

  Future<void> fetchData() async {
    final response = await http.get(Uri.parse('https://example.com'));
    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 UI shows the full HTML content of https://example.com as text.

B The UI shows the text 'Loading...' forever because fetchData is never called.

C The UI shows 'Error fetching data' because the URL is invalid.

D The UI shows a blank screen because setState is not called.

💡 Hint

Look at when fetchData is called and what happens on a successful response.

The fetchData function is called in initState, so the HTTP GET request runs once the widget loads. If the response status is 200, the response body is saved in the state variable 'data' and displayed in the Text widget. So the UI will show the full content fetched from the URL.

📝 Syntax

intermediate

Which option correctly creates a POST request with JSON body using http package?

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

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

B ;))}'ecilA' :'eman'{(edocnEnosj :ydob ,)'resu/moc.elpmaxe.ipa//:sptth'(esrap.irU(tsop.ptth tiawa

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

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

💡 Hint

Remember to set the content type header when sending JSON data.

Option D correctly sets the 'Content-Type' header to 'application/json' and sends the JSON string as the body. Option D sends a Map without encoding, which is invalid. Option D misses headers. Option D misses headers, so the server may not recognize the body as JSON.

❓ lifecycle

advanced

What happens if you call http.get inside build() method directly?

In a Flutter widget, what is the effect of calling http.get inside the build() method without caching or state management?

A The HTTP request runs repeatedly causing performance issues and possible infinite loops.

B The HTTP request runs once and the UI updates correctly.

C The HTTP request is ignored by Flutter and does not run.

D The app crashes with a runtime error.

💡 Hint

Think about how often build() runs and what happens if you do async calls there.

The build() method can be called many times during widget lifecycle. Calling http.get inside build() causes repeated network requests, leading to performance problems and possibly infinite loops if setState is called after each fetch.

🔧 Debug

advanced

Why does this http.get code throw a FormatException?

This code throws a FormatException: Invalid argument(s): Invalid URL. What is the cause?

Flutter

final response = await http.get(Uri.parse('htp://invalid-url'));

A Uri.parse cannot parse URLs with 'http' scheme.

B The URL scheme 'htp' is invalid; it should be 'http' or 'https'.

C http.get requires a String, not a Uri object.

D The URL is missing a trailing slash.

💡 Hint

Check the URL scheme spelling carefully.

The URL scheme 'htp' is misspelled. Uri.parse throws FormatException because it expects 'http' or 'https' schemes.

🧠 Conceptual

expert

Which option best describes how to handle HTTP errors gracefully in Flutter using http package?

You want your app to show a friendly message if the HTTP request fails due to network issues or server errors. Which approach is best?

A Use http.get without await to avoid exceptions.

B Ignore errors; Flutter will automatically retry failed HTTP requests.

C Wrap the http call in try-catch, check response status, and update UI accordingly.

D Only check response status code; no need for try-catch.

💡 Hint

Think about network failures and how exceptions are handled in Dart async code.

Network calls can fail with exceptions or return error status codes. Wrapping calls in try-catch and checking status codes lets you handle errors gracefully and update the UI with friendly messages.