Adding a POST Request in Flutter (Dart)

Tiempo de lectura: 4 minutos

Reading Time: 2 minutes

Hello, today we are going to learn how to make a POST request with Flutter using Dart.

With this request, we will be able to make remote calls to our server-side resources using a REST API.

We will use the http package to perform the network request.

Step 1: Add Dependencies

In the pubspec.yaml file, make sure you have the following dependency:

dependencies:
  http: ^0.13.4

Then, run flutter pub get to download the dependency.

Step 2: Import the http package

In the file where you want to make the API call, import the http package (in my case, I created a util/network/ route and created a file called user.dart where I’ll add all the calls related to users, login, registration, etc.):

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

Step 3: Create the API call function

Create a function that will make the API call. In this example, we will use the POST method to send data to the server:

Future<void> postData() async {
  final url = 'https://api.example.com/endpoint'; // Replace with the correct URL of your API

  final body = {
    'key1': 'value1',
    'key2': 'value2',
  };

  final headers = {
    'Content-Type': 'application/json',
  };

  final jsonBody = jsonEncode(body);

  final response = await http.post(Uri.parse(url), headers: headers, body: jsonBody);

  if (response.statusCode == 200) {
    // Logic when the response is successful
    print('Successful response: ${response.body}');
  } else {
    // Logic when there is an error in the request
    print('Request error: ${response.statusCode}');
  }
}

Make sure to replace the URL with the correct address of your API. Also, customize the request body according to your needs.

It looks like this:

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

// Class to make user requests
class UserUtil {

Future<void> postData(data1, data2) async {
  final url = 'https://api.example.com/endpoint'; // Replace with the correct URL of your API

  final body = {
    'key1': 'value1',
    'key2': 'value2',
  };

  final headers = {
    'Content-Type': 'application/json',
  };

  final jsonBody = jsonEncode(body);

  final response = await http.post(Uri.parse(url), headers: headers, body: jsonBody);
  return response;
}

}

Step 4: Call the function from your screen

In your screen where you want to make the API call, you can invoke the postData() function in response to an event, such as pressing a button:

import 'package:flutter/material.dart';
import 'package:<your_project_package_name>/util/network/user.dart';

class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('API Call Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
             final response = await UserUtil.postData("value_1", "value_2");
             if (response.statusCode == 200) {
              // Logic when the response is successful
              print('Successful response: ${response.body}');
             } else {
              // Logic when there is an error in the request
              print('Request error: ${response.statusCode}');
             }
          },
          child: Text('Make API Call'),
        ),
      ),
    );
  }
}

We imported import ‘package:/util/network/user.dart’;

And then we call the function within the UserUtil class: await UserUtil.postData(“value_1”, “value_2”);

And the response is received in the response variable.

And that’s it! Now you have a basic example of how to make a POST request to a REST API using the http package in Flutter. You can customize and expand this code according to your specific needs. Remember to handle errors and responses properly for a better user experience.