GET and POST requests in Flutter

Introduction

GET and POST requests let your app talk to the internet. GET asks for data, POST sends data.

When you want to load a list of items from a website or server.

When you need to send a form or user input to a server.

When your app needs to update information on a remote database.

When fetching user profile details from an online service.

When submitting feedback or comments from your app.

Syntax

Flutter

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

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

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

Use http.get to fetch data without changing anything on the server.

Use http.post to send data to the server, like submitting a form.

Examples

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

Flutter

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

This POST request sends a new post with title and body to the server.

Flutter

var response = await http.post(
  Uri.parse('https://jsonplaceholder.typicode.com/posts'),
  body: {'title': 'Hello', 'body': 'World'},
);

Sample App

This Flutter app has two buttons. One button fetches data from the internet using a GET request and shows the title of a post. The other button sends data using a POST request and shows a success or failure message.

Flutter

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

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

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

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

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

  Future<void> sendData() async {
    final response = await http.post(
      Uri.parse('https://jsonplaceholder.typicode.com/posts'),
      body: json.encode({'title': 'Flutter', 'body': 'POST request example'}),
      headers: {'Content-Type': 'application/json; charset=UTF-8'},
    );
    if (response.statusCode == 201) {
      setState(() {
        _data = 'Data sent successfully!';
      });
    } else {
      setState(() {
        _data = 'Failed to send data';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('GET and POST Requests')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(_data, textAlign: TextAlign.center),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: fetchData,
                child: Text('GET Data'),
              ),
              SizedBox(height: 10),
              ElevatedButton(
                onPressed: sendData,
                child: Text('POST Data'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Important Notes

Always check the response status code to know if the request worked.

Use Uri.parse to convert the URL string to a Uri object.

Network calls are asynchronous, so use await inside async functions.

Summary

GET requests fetch data from a server without changing it.

POST requests send data to a server to create or update something.

Use the http package in Flutter to make these requests easily.

Practice

1. What is the main purpose of a GET request in Flutter when using the http package?

easy

A. To send data to a server to create or update something

B. To delete data from a server

C. To fetch data from a server without changing it

D. To authenticate a user

Solution

1. Step 1: Understand GET request purpose

   GET requests are used to retrieve or fetch data from a server without modifying it.

2. Step 2: Compare with other request types

   POST requests send data to create or update, DELETE removes data, and authentication is separate.

3. Final Answer:

   To fetch data from a server without changing it -> Option C

4. Quick Check:

   GET = fetch data [OK]

Hint: GET fetches data, POST sends data [OK]

Common Mistakes:

• Confusing GET with POST requests
• Thinking GET modifies server data
• Mixing GET with DELETE or authentication

2. Which of the following is the correct syntax to make a POST request using the http package in Flutter?

easy

A. http.post(Uri.parse(url), body: {"key": "value"});

B. http.get(Uri.parse(url), body: {"key": "value"});

C. http.post(url, {"key": "value"});

D. http.sendPost(Uri.parse(url), body: {"key": "value"});

Solution

1. Step 1: Identify correct method and parameters

   The http.post method requires a Uri object and an optional body map for data.

2. Step 2: Check syntax correctness

   http.post(Uri.parse(url), body: {"key": "value"}); uses Uri.parse(url) and passes body correctly. Others use wrong methods or parameters.

3. Final Answer:

   http.post(Uri.parse(url), body: {"key": "value"}); -> Option A

4. Quick Check:

   POST syntax = http.post(Uri.parse(url), body) [OK]

Hint: Use Uri.parse() and http.post() with body map [OK]

Common Mistakes:

• Passing URL as string instead of Uri
• Using http.get instead of http.post for POST
• Wrong method name like sendPost

3. What will be the output of this Flutter code snippet using the http package?

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

medium

A. 200 and false

B. 404 and false

C. 500 and false

D. 200 and true

Solution

1. Step 1: Understand the GET request URL

   The URL points to a valid post resource, so the server should respond with status 200 (OK).

2. Step 2: Check response body content

   The JSON response includes a 'userId' field, so response.body.contains('userId') returns true.

3. Final Answer:

   200 and true -> Option D

4. Quick Check:

   Status 200 and body contains 'userId' = true [OK]

Hint: Valid URL returns 200 and expected JSON content [OK]

Common Mistakes:

• Assuming 404 for valid URL
• Not checking response body content
• Confusing status codes

4. Identify the error in this Flutter code that tries to send a POST request:

var response = await http.post('https://example.com/api', body: {"name": "John"});
print(response.statusCode);

medium

A. Body should be a JSON string, not a map

B. URL should be wrapped with Uri.parse()

C. http.post cannot be awaited

D. Missing headers for content type

Solution

1. Step 1: Check URL parameter type

   The http.post method requires the URL as a Uri object, not a plain string.

2. Step 2: Confirm correct usage

   Wrapping the URL string with Uri.parse() fixes the error. Other options are not mandatory errors here.

3. Final Answer:

   URL should be wrapped with Uri.parse() -> Option B

4. Quick Check:

   URL must be Uri.parse(string) [OK]

Hint: Always wrap URL string with Uri.parse() [OK]

Common Mistakes:

• Passing URL as plain string
• Assuming body must be JSON string always
• Forgetting to await async calls

5. You want to send a POST request with JSON data and receive a JSON response in Flutter. Which code snippet correctly handles this scenario using the http package?

hard

A. var response = await http.post(Uri.parse(url), headers: {"Content-Type": "application/json"}, body: jsonEncode({"name": "Alice"}));
var data = jsonDecode(response.body);

B. var response = await http.post(Uri.parse(url), body: {"name": "Alice"});
var data = response.body;

C. var response = await http.get(Uri.parse(url), headers: {"Content-Type": "application/json"});
var data = jsonDecode(response.body);

D. var response = await http.post(url, body: jsonEncode({"name": "Alice"}));
var data = jsonDecode(response.body);

Solution

1. Step 1: Set headers and encode body correctly

   To send JSON data, set header "Content-Type" to "application/json" and encode body with jsonEncode.

2. Step 2: Parse JSON response properly

   Use jsonDecode on response.body to convert JSON string to Dart object.

3. Step 3: Check URL parameter type

   URL must be wrapped with Uri.parse() for correct request.

4. Final Answer:

   Use http.post with Uri.parse, headers, jsonEncode body, and jsonDecode response -> Option A

5. Quick Check:

   POST JSON = headers + jsonEncode + jsonDecode [OK]

Hint: Use headers and jsonEncode for POST JSON, decode response [OK]

Common Mistakes:

• Not setting Content-Type header
• Passing body as map without encoding
• Using http.get instead of post for sending data
• Passing URL as string without Uri.parse