http package in Flutter

Introduction

The http package helps your app talk to the internet. It lets you get or send data from websites or servers easily.

When you want to get weather data from an online service.

When your app needs to send user info to a server.

When you want to load news articles from a website.

When you need to download images or files from the internet.

When your app communicates with a backend to save or fetch data.

Syntax

Flutter

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

// To make a GET request
var response = await http.get(Uri.parse('https://example.com'));

// To make a POST request
var response = await http.post(Uri.parse('https://example.com'), body: {'key': 'value'});

Always use Uri.parse() to convert the URL string.

Use await because these calls take time and run asynchronously.

Examples

This fetches a single post from a test API using GET.

Flutter

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

This sends login data to a server using POST.

Flutter

var response = await http.post(Uri.parse('https://example.com/login'), body: {'username': 'user', 'password': 'pass'});

Check if the request was successful by looking at the status code.

Flutter

print('Status code: ' + response.statusCode.toString());

Sample App

This app shows a button. When pressed, it fetches a post from the internet and shows the text on screen.

Flutter

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String data = 'Press the button to fetch data';

  Future<void> fetchData() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
    if (response.statusCode == 200) {
      setState(() {
        data = response.body;
      });
    } else {
      setState(() {
        data = 'Failed to load data';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('HTTP Package Example')),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: Column(
            children: [
              Expanded(child: SingleChildScrollView(child: Text(data))),
              ElevatedButton(
                onPressed: fetchData,
                child: Text('Fetch Data'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Important Notes

Use async and await to handle network calls smoothly.

Check response.statusCode to know if the request worked (200 means success).

Always handle errors like no internet or bad responses to avoid app crashes.

Summary

The http package lets your app get or send data over the internet.

Use http.get() for fetching data and http.post() for sending data.

Remember to use Uri.parse() and check the response status code.

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