http package in Flutter - Mini App: Build & Ship

Build: Simple HTTP Fetch Screen

This screen fetches a message from a web server and displays it.

Target UI

-------------------------
| Simple HTTP Fetch     |
|-----------------------|
|                       |
| [Fetch Message]       |
|                       |
| Message:              |
|                       |
|                       |
-------------------------

Add a button labeled 'Fetch Message'.

When tapped, it sends a GET request to https://jsonplaceholder.typicode.com/posts/1.

Display the 'title' field from the JSON response below the button.

Show a loading indicator while fetching.

Show an error message if the request fails.

Starter Code

Flutter

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

class SimpleHttpFetchScreen extends StatefulWidget {
  @override
  State<SimpleHttpFetchScreen> createState() => _SimpleHttpFetchScreenState();
}

class _SimpleHttpFetchScreenState extends State<SimpleHttpFetchScreen> {
  String _message = '';
  bool _loading = false;
  String _error = '';

  // TODO: Add fetchMessage function here

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Simple HTTP Fetch')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                // TODO: Call fetchMessage here
              },
              child: const Text('Fetch Message'),
            ),
            const SizedBox(height: 20),
            if (_loading) const CircularProgressIndicator(),
            if (_error.isNotEmpty) Text(_error, style: const TextStyle(color: Colors.red)),
            if (_message.isNotEmpty) Text('Message: $_message'),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Solution

Flutter

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

class SimpleHttpFetchScreen extends StatefulWidget {
  @override
  State<SimpleHttpFetchScreen> createState() => _SimpleHttpFetchScreenState();
}

class _SimpleHttpFetchScreenState extends State<SimpleHttpFetchScreen> {
  String _message = '';
  bool _loading = false;
  String _error = '';

  Future<void> fetchMessage() async {
    setState(() {
      _loading = true;
      _error = '';
      _message = '';
    });
    try {
      final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
      if (response.statusCode == 200) {
        final data = json.decode(response.body);
        setState(() {
          _message = data['title'] ?? 'No title found';
        });
      } else {
        setState(() {
          _error = 'Error: Server returned status ${response.statusCode}';
        });
      }
    } catch (e) {
      setState(() {
        _error = 'Error: Could not fetch data';
      });
    } finally {
      setState(() {
        _loading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Simple HTTP Fetch')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            ElevatedButton(
              onPressed: fetchMessage,
              child: const Text('Fetch Message'),
            ),
            const SizedBox(height: 20),
            if (_loading) const CircularProgressIndicator(),
            if (_error.isNotEmpty) Text(_error, style: const TextStyle(color: Colors.red)),
            if (_message.isNotEmpty) Text('Message: $_message'),
          ],
        ),
      ),
    );
  }
}

This solution uses the http package to send a GET request to a sample API.

The fetchMessage function is asynchronous and updates the UI state before, during, and after the request.

It shows a loading spinner while waiting, displays the fetched title on success, and shows an error message if something goes wrong.

The button triggers this function when pressed.

Final Result

Completed Screen

-------------------------
| Simple HTTP Fetch     |
|-----------------------|
|                       |
| [Fetch Message]       |
|                       |
| Message: sunt aut ...  |
|                       |
|                       |
-------------------------

User taps 'Fetch Message' button.

A spinner appears while loading.

After loading, the message title from the API appears below the button.

If an error occurs, a red error message is shown instead.

Stretch Goal

Add a retry button that appears only when an error occurs to try fetching the message again.

💡 Hint

Show a new ElevatedButton with label 'Retry' below the error message that calls fetchMessage when tapped.

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()