Flutter  

How to Make HTTP API Calls in Flutter Using the http Package?

Introduction

In modern mobile app development, most apps need to connect with a server to fetch or send data. Whether it’s loading user profiles, showing products, or submitting forms, this communication happens through HTTP API calls.

In Flutter, one of the simplest and most commonly used ways to make API requests is by using the http package.

In this beginner-friendly guide, you will learn how to make HTTP API calls in Flutter step by step using simple language and practical examples.

By the end of this article, you will understand:

  • What HTTP API calls are

  • How to install the http package in Flutter

  • How to make GET and POST requests

  • How to handle JSON data

  • How to manage errors and loading states

This guide is written in a natural, human-friendly style and includes SEO-friendly keywords like Flutter API calls, http package Flutter, and Flutter REST API integration.

What Is an HTTP API Call?

An HTTP API call is a way for your Flutter app to communicate with a server over the internet.

For example:

  • Fetching data from a server β†’ GET request

  • Sending data to a server β†’ POST request

In simple words:

πŸ‘‰ Your app asks the server for data, and the server responds.

What Is the http Package in Flutter?

The http package in Flutter is a lightweight library that helps you send HTTP requests and receive responses easily.

It supports:

  • GET requests

  • POST requests

  • PUT and DELETE requests

It is widely used for Flutter REST API integration.

Step 1: Add http Package to Your Project

Open your pubspec.yaml file and add:

dependencies:
  http: ^0.13.6

Then run:

flutter pub get

This installs the package in your project.

Step 2: Import the http Package

In your Dart file, import the package:

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

This allows you to use HTTP methods in your app.

Step 3: Make a GET API Request in Flutter

A GET request is used to fetch data from a server.

Example

Future<void> fetchData() async {
  final response = await http.get(
    Uri.parse('https://jsonplaceholder.typicode.com/posts'),
  );

  if (response.statusCode == 200) {
    print(response.body);
  } else {
    throw Exception('Failed to load data');
  }
}

Explanation

  • http.get() sends a request

  • Uri.parse() converts URL into URI format

  • statusCode == 200 means success

  • response.body contains data

Step 4: Parse JSON Data in Flutter

Most APIs return data in JSON format.

To convert JSON into usable data, use dart:convert.

import 'dart:convert';

final data = jsonDecode(response.body);
print(data[0]['title']);

This helps in handling API response data in Flutter apps.

Step 5: Make a POST API Request in Flutter

A POST request is used to send data to the server.

Example

Future<void> createPost() async {
  final response = await http.post(
    Uri.parse('https://jsonplaceholder.typicode.com/posts'),
    body: {
      'title': 'Flutter API',
      'body': 'Learning HTTP calls',
      'userId': '1',
    },
  );

  if (response.statusCode == 201) {
    print('Data created successfully');
  } else {
    print('Failed to create data');
  }
}

Explanation

  • http.post() sends data

  • body contains request data

  • 201 means resource created

Step 6: Display API Data in UI

You can show API data using widgets like ListView.

Example

FutureBuilder(
  future: fetchData(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('Error');
    } else {
      return Text('Data Loaded');
    }
  },
)

This is useful for Flutter API integration with UI.

Step 7: Handle Errors Properly

Error handling is important for real-world apps.

try {
  final response = await http.get(Uri.parse('URL'));
} catch (e) {
  print('Error: $e');
}

This prevents app crashes and improves user experience.

Step 8: Add Loading Indicators

While fetching data, show a loader.

Example:

CircularProgressIndicator()

This improves UX in Flutter apps using API calls.

Step 9: Best Practices for API Calls in Flutter

  • Use async and await properly

  • Always handle errors

  • Avoid calling APIs repeatedly

  • Use models for structured data

  • Keep UI and logic separate

Common Mistakes to Avoid

  • Not checking status codes

  • Ignoring errors

  • Blocking UI during API calls

  • Hardcoding URLs everywhere

Summary

Making HTTP API calls in Flutter using the http package is a fundamental skill for building modern mobile applications. By understanding how to send GET and POST requests, parse JSON data, and handle errors, you can connect your app to real-world data sources. With proper structure and best practices, Flutter API integration becomes simple, efficient, and powerful for building scalable apps.

Membership not found