APIs (Application Programming Interfaces) allow a Flutter application to communicate with external servers and services. Through APIs, a mobile, web, or desktop Flutter application can fetch data, send user information, authenticate users, update records, delete data, and communicate with backend systems.
Flutter's official networking documentation recommends the http package as a simple way to make HTTP requests. The package supports Flutter applications across Android, iOS, desktop, and web platforms. Flutter Networking Documentation
API stands for Application Programming Interface. An API provides a defined way for one software application to communicate with another application or server.
For example, a Flutter weather application may request weather information from a weather server. The Flutter app sends a request to an API, the server processes the request, and the server returns data, commonly in JSON format.
Flutter App
|
| HTTP Request
v
Backend API / Server
|
| JSON Response
v
Flutter App
|
v
Display DataSuppose an e-commerce Flutter application needs to display products. Instead of storing thousands of products directly inside the application, the app can request product data from a backend API.
GET https://example.com/api/productsThe server might return:
{
"products": [
{
"id": 1,
"name": "Laptop",
"price": 65000
},
{
"id": 2,
"name": "Mobile Phone",
"price": 30000
}
]
}Most real-world Flutter applications need data from external systems. APIs make it possible to connect the user interface with a backend.
API communication generally follows a request-response process.
User Action
|
v
Flutter Widget
|
v
API Service
|
v
HTTP Request
|
v
Backend Server
|
v
JSON Response
|
v
Dart Model
|
v
Flutter UIHTTP stands for Hypertext Transfer Protocol. It is one of the primary protocols used for communication between applications and web servers.
Flutter applications commonly use HTTP requests to communicate with REST APIs.
| Method | Purpose | Typical Example |
|---|---|---|
| GET | Retrieve data | Get products |
| POST | Create or submit data | Create user |
| PUT | Replace or update data | Update profile |
| PATCH | Partially update data | Update email |
| DELETE | Delete data | Delete account |
REST stands for Representational State Transfer. A REST API organizes backend resources and allows applications to interact with those resources using HTTP methods.
For example:
GET /users
GET /users/10
POST /users
PUT /users/10
DELETE /users/10Here, users is a resource and 10 identifies a particular user.
JSON stands for JavaScript Object Notation. It is one of the most common formats used to transfer data between Flutter applications and APIs.
{
"id": 101,
"name": "Rahul",
"email": "[email protected]",
"age": 25
}Flutter can decode this JSON into Dart objects using the dart:convert library.
The http package provides convenient APIs for making HTTP requests from Flutter. Flutter's documentation demonstrates adding it with flutter pub add http. http Package on pub.dev
flutter pub add httpThen import the package:
import 'package:http/http.dart' as http;A GET request is used when the application wants to retrieve information from a server.
import 'package:http/http.dart' as http;
Future fetchData() async {
final response = await http.get(
Uri.parse('https://jsonplaceholder.typicode.com/posts/1'),
);
print(response.statusCode);
print(response.body);
}
The http.get() method returns a Future containing an HTTP response. Flutter's official example uses the same basic approach for fetching remote data. Fetch Data from the Internet
Network requests take time because data must travel between the application and server. Dart uses Future, async, and await to work with asynchronous operations.
Future loadData() async {
print('Request started');
final response = await http.get(
Uri.parse('https://jsonplaceholder.typicode.com/posts/1'),
);
print(response.body);
print('Request completed');
}
async allows a function to perform asynchronous work, while await waits for the asynchronous operation to complete.
An HTTP response contains information returned by the server.
statusCode - HTTP status code returned by the server.body - Response data, usually a String containing JSON.headers - Metadata about the response.request - Information about the original request where available.final response = await http.get(
Uri.parse('https://jsonplaceholder.typicode.com/posts/1'),
);
print(response.statusCode);
print(response.body);
print(response.headers);
Status codes help Flutter understand whether an API request succeeded or failed.
| Status Code | Meaning |
|---|---|
| 200 | OK - request succeeded |
| 201 | Created - new resource created |
| 204 | No Content |
| 400 | Bad Request |
| 401 | Unauthorized |
| 403 | Forbidden |
| 404 | Not Found |
| 422 | Validation or semantic error |
| 500 | Internal Server Error |
| 503 | Service Unavailable |
if (response.statusCode == 200) {
print('Request successful');
} else {
print('Request failed');
}The dart:convert library provides jsonDecode() for converting a JSON string into Dart data structures.
import 'dart:convert';
final data = jsonDecode(response.body);
print(data);
If the JSON contains an object, it can commonly be represented as Map.
final Map data =
jsonDecode(response.body) as Map;
print(data['title']);
Using model classes makes API data easier to manage and provides better type safety than working with raw maps throughout the application.
{
"id": 1,
"name": "Flutter Course",
"price": 9999
}class Course {
final int id;
final String name;
final double price;
Course({
required this.id,
required this.name,
required this.price,
});
factory Course.fromJson(Map json) {
return Course(
id: json['id'] as int,
name: json['name'] as String,
price: (json['price'] as num).toDouble(),
);
}
}
import 'dart:convert';
import 'package:http/http.dart' as http;
class Post {
final int id;
final String title;
final String body;
Post({
required this.id,
required this.title,
required this.body,
});
factory Post.fromJson(Map json) {
return Post(
id: json['id'] as int,
title: json['title'] as String,
body: json['body'] as String,
);
}
}
Future fetchPost() async {
final response = await http.get(
Uri.parse('https://jsonplaceholder.typicode.com/posts/1'),
);
if (response.statusCode == 200) {
final data = jsonDecode(response.body) as Map;
return Post.fromJson(data);
}
throw Exception('Failed to load post');
}
FutureBuilder is useful for displaying asynchronous API data because the UI can react to loading, success, and error states. Flutter's official networking recipe uses this pattern. Flutter FutureBuilder API Example
FutureBuilder(
future: fetchPost(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const CircularProgressIndicator();
}
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
if (snapshot.hasData) {
return Column(
children: [
Text(snapshot.data!.title),
Text(snapshot.data!.body),
],
);
}
return const Text('No data available');
},
)
An API call should generally not be created directly inside the build() method because Flutter may rebuild widgets many times. Creating a new Future during every build can cause repeated network requests.
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: fetchPost(),
builder: (context, snapshot) {
return const Text('Data');
},
);
}late Future postFuture;
@override
void initState() {
super.initState();
postFuture = fetchPost();
}
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: postFuture,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data!.title);
}
if (snapshot.hasError) {
return Text('Error: ${snapshot.error}');
}
return const CircularProgressIndicator();
},
);
}
A POST request is commonly used when an application needs to send data to a server or create a resource.
import 'dart:convert';
import 'package:http/http.dart' as http;
Future createPost() async {
final response = await http.post(
Uri.parse('https://jsonplaceholder.typicode.com/posts'),
headers: {
'Content-Type': 'application/json',
},
body: jsonEncode({
'title': 'Flutter API',
'body': 'Learning API integration',
'userId': 1,
}),
);
print(response.statusCode);
print(response.body);
}
Flutter's official networking documentation demonstrates using http.post() together with jsonEncode() for sending JSON data. Send Data to the Internet
PUT is commonly used to update an existing resource.
Future updatePost() async {
final response = await http.put(
Uri.parse('https://jsonplaceholder.typicode.com/posts/1'),
headers: {
'Content-Type': 'application/json',
},
body: jsonEncode({
'title': 'Updated Flutter Post',
'body': 'Updated content',
'userId': 1,
}),
);
print(response.statusCode);
print(response.body);
}
Flutter Update Data Documentation
DELETE is used to request deletion of a resource on the server.
Future deletePost() async {
final response = await http.delete(
Uri.parse('https://jsonplaceholder.typicode.com/posts/1'),
);
if (response.statusCode == 200 || response.statusCode == 204) {
print('Post deleted');
} else {
print('Delete failed');
}
}
Flutter Delete Data Documentation
Headers provide additional information about an HTTP request. Common headers include Content-Type, Accept, and Authorization.
final response = await http.get(
Uri.parse('https://example.com/api/users'),
headers: {
'Accept': 'application/json',
},
);headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
}Many APIs require authentication before allowing access to protected resources. A common approach is to send an access token through the Authorization header.
final response = await http.get(
Uri.parse('https://example.com/api/profile'),
headers: {
'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
'Accept': 'application/json',
},
);The exact authentication mechanism depends on the backend API. Flutter's official documentation demonstrates adding authorization headers to requests. Authenticated Requests in Flutter
Query parameters are commonly used to filter, search, sort, or paginate API results.
https://example.com/products?category=mobile&page=1final uri = Uri.https(
'example.com',
'/products',
{
'category': 'mobile',
'page': '1',
},
);
final response = await http.get(uri);
Network operations can fail for many reasons, including unavailable servers, invalid requests, authentication failures, connection problems, and malformed responses.
Future fetchPost() async {
try {
final response = await http.get(
Uri.parse('https://jsonplaceholder.typicode.com/posts/1'),
);
if (response.statusCode == 200) {
final json = jsonDecode(response.body);
return Post.fromJson(json);
}
throw Exception(
'Server returned status ${response.statusCode}',
);
} catch (e) {
throw Exception('Unable to fetch post: $e');
}
}
A good Flutter application should clearly handle different API states.
| State | UI Example |
|---|---|
| Loading | CircularProgressIndicator |
| Success | Display API data |
| Error | Show error message and retry button |
| Empty | Show "No data found" |
if (loading) {
return const CircularProgressIndicator();
}
if (errorMessage != null) {
return Text(errorMessage!);
}
if (items.isEmpty) {
return const Text('No data found');
}
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Text(items[index].name);
},
);
Many APIs return arrays containing multiple objects.
[
{
"id": 1,
"name": "Laptop"
},
{
"id": 2,
"name": "Mobile"
},
{
"id": 3,
"name": "Tablet"
}
]Future> fetchProducts() async {
final response = await http.get(
Uri.parse('https://example.com/api/products'),
);
if (response.statusCode == 200) {
final List data = jsonDecode(response.body);
return data
.map((item) => Product.fromJson(item))
.toList();
}
throw Exception('Failed to load products');
}
FutureBuilder>(
future: fetchProducts(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(
child: CircularProgressIndicator(),
);
}
if (snapshot.hasError) {
return Center(
child: Text('Error: ${snapshot.error}'),
);
}
final products = snapshot.data ?? [];
if (products.isEmpty) {
return const Center(
child: Text('No products found'),
);
}
return ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
final product = products[index];
return ListTile(
title: Text(product.name),
subtitle: Text('₹${product.price}'),
);
},
);
},
)
For larger applications, API-related code should be separated from UI code. An API service class can contain network operations.
class ApiService {
final String baseUrl = 'https://example.com/api';
Future> getProducts() async {
final response = await http.get(
Uri.parse('$baseUrl/products'),
);
if (response.statusCode != 200) {
throw Exception('Failed to load products');
}
final List data = jsonDecode(response.body);
return data
.map((item) => Product.fromJson(item))
.toList();
}
}
This approach keeps networking logic separate from widgets and makes the project easier to maintain.
lib/
├── models/
│ └── product.dart
├── services/
│ └── api_service.dart
├── screens/
│ └── products_screen.dart
├── widgets/
│ └── product_card.dart
└── main.dartWhen an application uses many endpoints from the same backend, define a base URL.
class ApiConstants {
static const String baseUrl = 'https://example.com/api';
static const String products = '$baseUrl/products';
static const String users = '$baseUrl/users';
static const String login = '$baseUrl/login';
}
This avoids repeating URLs throughout the application.
Network requests can take longer than expected. A timeout can prevent the application from waiting indefinitely.
final response = await http
.get(Uri.parse('https://example.com/api/products'))
.timeout(
const Duration(seconds: 10),
);try {
final response = await http
.get(Uri.parse('https://example.com/api/products'))
.timeout(const Duration(seconds: 10));
print(response.body);
} catch (e) {
print('Request failed or timed out');
}
Android applications that access the internet need the appropriate internet permission in the Android manifest. Flutter's official documentation shows the following permission for Android networking. Flutter Networking
For a standard Flutter Android project, check the Android manifest configuration if network requests are not working as expected.
API integration should be designed with security in mind.
When an API contains thousands of records, loading everything at once can be inefficient. APIs often provide pagination.
GET /products?page=1&limit=20The Flutter application can request the next page when the user scrolls near the bottom of a list.
Page 1 → Products 1-20
Page 2 → Products 21-40
Page 3 → Products 41-60
Page 4 → Products 61-80Search functionality can be implemented by passing the search keyword to the API.
final uri = Uri.https(
'example.com',
'/api/products',
{
'search': 'laptop',
},
);
final response = await http.get(uri);
Filtering allows users to request only specific data.
final uri = Uri.https(
'example.com',
'/api/products',
{
'category': 'electronics',
'minPrice': '10000',
'maxPrice': '50000',
},
);
final response = await http.get(uri);
A common Flutter pattern is RefreshIndicator, which allows users to pull down to refresh content.
RefreshIndicator(
onRefresh: () async {
setState(() {
productsFuture = apiService.getProducts();
});
await productsFuture;
},
child: ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
return Text(products[index].name);
},
),
)
For applications making multiple requests, an http.Client can be useful instead of creating isolated requests everywhere. The official http package documentation describes Client as a way to keep a persistent connection and improve organization for repeated requests. Dart HTTP API Documentation
final client = http.Client();
try {
final response = await client.get(
Uri.parse('https://example.com/api/products'),
);
print(response.body);
} finally {
client.close();
}
User
|
v
Flutter Screen
|
v
API Service
|
v
HTTP Request
|
v
Backend API
|
v
Database
|
v
Backend API
|
v
JSON Response
|
v
Dart Model
|
v
State Management
|
v
Flutter UIimport 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
class Post {
final int id;
final String title;
Post({
required this.id,
required this.title,
});
factory Post.fromJson(Map json) {
return Post(
id: json['id'] as int,
title: json['title'] as String,
);
}
}
Future> fetchPosts() async {
final response = await http.get(
Uri.parse('https://jsonplaceholder.typicode.com/posts'),
);
if (response.statusCode != 200) {
throw Exception('Failed to load posts');
}
final List data = jsonDecode(response.body);
return data
.map((item) => Post.fromJson(item))
.toList();
}
class PostsScreen extends StatefulWidget {
const PostsScreen({super.key});
@override
State createState() => _PostsScreenState();
}
class _PostsScreenState extends State {
late Future> postsFuture;
@override
void initState() {
super.initState();
postsFuture = fetchPosts();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('API Posts'),
),
body: FutureBuilder>(
future: postsFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const Center(
child: CircularProgressIndicator(),
);
}
if (snapshot.hasError) {
return Center(
child: Text('Error: ${snapshot.error}'),
);
}
final posts = snapshot.data ?? [];
if (posts.isEmpty) {
return const Center(
child: Text('No posts available'),
);
}
return ListView.builder(
itemCount: posts.length,
itemBuilder: (context, index) {
final post = posts[index];
return ListTile(
leading: CircleAvatar(
child: Text('${post.id}'),
),
title: Text(post.title),
);
},
);
},
),
);
}
}
build().async and await for asynchronous operations.http package.| Concept | Purpose |
|---|---|
| API | Allows applications to communicate with external systems |
| HTTP | Protocol used for web communication |
| GET | Retrieve data |
| POST | Create/send data |
| PUT | Update/replace data |
| PATCH | Partially update data |
| DELETE | Delete data |
| JSON | Common format for API data |
| Future | Represents asynchronous work |
| async | Marks a function as asynchronous |
| await | Waits for an asynchronous operation |
| jsonDecode() | Converts JSON text into Dart data |
| FutureBuilder | Builds UI based on asynchronous Future state |
| http.Client | Reusable HTTP client for multiple requests |
| Status Code | Indicates the result of an HTTP request |
fromJson().ListView.builder.An API is an interface that allows different software systems to communicate with each other.
The http package is a commonly used package for making HTTP requests in Flutter.
GET is generally used to retrieve data, while POST is generally used to send data or create a resource.
JSON is a lightweight text-based data format commonly used for exchanging structured data between applications and servers.
Because widgets can rebuild frequently, creating a new API Future during every build can cause repeated network requests.
Model classes provide structured, typed representations of API data and make application code easier to maintain.
FutureBuilder is a Flutter widget that builds UI based on the current state of a Future, such as loading, successful completion, or an error.
HTTP 200 generally indicates that the request was successfully processed.
For structured Flutter learning and course information, visit the JustAcademy Flutter Training Course.
You can also register for a course demo through the Register for Flutter Course Demo page.
APIs are an essential part of modern Flutter development because they connect the Flutter interface with backend services and external data sources. By learning HTTP methods, JSON parsing, Dart models, asynchronous programming, authentication, error handling, and API service architecture, developers can build Flutter applications that work with real-world data.
The basic API workflow to remember is:
Flutter UI
↓
API Service
↓
HTTP Request
↓
Backend API
↓
JSON Response
↓
Dart Model
↓
Flutter UIOnce this workflow is understood, developers can move from simple API requests to complete applications involving authentication, CRUD operations, search, filtering, pagination, and real-time backend communication.
