Flutter Mobile Development · Lesson

HTTP Requests & JSON

Learn to make HTTP GET, POST, PUT, and DELETE requests to REST APIs and parse JSON responses into Dart objects.

HTTP Requests & JSON is a free Flutter Mobile Development lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Flutter Mobile Development learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Connect to the Web!

Modern mobile apps constantly interact with the internet to fetch and send data. This is often done using HTTP requests to communicate with web services, also known as APIs (Application Programming Interfaces).

APIs provide a way for different software systems to talk to each other. For example, a weather app uses an API to get the latest forecast.

Get the `http` Package

In Flutter and Dart, the easiest way to make HTTP requests is by using the official http package. First, you need to add it to your project's pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0 # Add this line

Making a GET Request

After adding the package, import it into your Dart file. The most common request is GET, used to retrieve data from a server. Let's fetch some dummy post data from a public API:

import 'package:http/http.dart' as http;
import 'dart:convert'; // Needed for JSON

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

  if (response.statusCode == 200) {
    print('Response body: ${response.body}');
  } else {
    print('Request failed with status: ${response.statusCode}.');
  }
}

What is JSON?

Most web APIs return data in JSON (JavaScript Object Notation) format. It's a lightweight, human-readable way to organize data.

JSON data looks like key-value pairs, similar to Dart maps. Here's what our previous GET request might return:

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere...",
  "body": "quia et suscipit..."
}

Parsing JSON to Dart

To work with JSON data in Dart, we need to decode it. Dart's dart:convert library provides the jsonDecode() function, which converts a JSON string into a Dart Map.

Let's update our GET example to parse the response:

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

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

  if (response.statusCode == 200) {
    var jsonBody = jsonDecode(response.body);
    print('User ID: ${jsonBody['userId']}');
    print('Title: ${jsonBody['title']}');
  } else {
    print('Request failed with status: ${response.statusCode}.');
  }
}

Structured Data with Models

While using Map is okay for simple cases, creating a dedicated Dart model class for your JSON data offers better type safety and code readability.

A common pattern is to have a factory constructor that takes a JSON map and creates an instance of your model.

class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

  Post({required this.userId, required this.id, required this.title, required this.body});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      userId: json['userId'] as int,
      id: json['id'] as int,
      title: json['title'] as String,
      body: json['body'] as String,
    );
  }
}

Fetching Data into a Model

Now, let's combine our GET request, JSON decoding, and the Post model to fetch a post and convert it into a strongly-typed Dart object. This makes accessing data much safer and clearer!

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

class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

  Post({required this.userId, required this.id, required this.title, required this.body});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      userId: json['userId'] as int,
      id: json['id'] as int,
      title: json['title'] as String,
      body: json['body'] as String,
    );
  }
}

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

  if (response.statusCode == 200) {
    var jsonBody = jsonDecode(response.body);
    Post post = Post.fromJson(jsonBody);
    print('Fetched Post ID: ${post.id}');
    print('Post Title: ${post.title}');
  } else {
    print('Failed to load post: ${response.statusCode}.');
  }
}

Sending Data with POST

To send new data to a server, you typically use a POST request. This involves providing a request body, usually in JSON format. Remember to set the 'Content-Type' header!

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

void main() async {
  var url = Uri.parse('https://jsonplaceholder.typicode.com/posts');
  var response = await http.post(
    url,
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'title': 'foo',
      'body': 'bar',
      'userId': '1',
    }),
  );

  if (response.statusCode == 201) { // 201 Created
    print('Created Post: ${response.body}');
  } else {
    print('Failed to create post: ${response.statusCode}.');
  }
}

Updating & Deleting Data

Besides GET and POST, you'll also encounter PUT and DELETE requests:

PUT: Used to update an existing resource on the server. Similar to POST, it typically includes a request body.
DELETE: Used to remove a resource from the server. It usually doesn't require a request body.

The http package provides http.put() and http.delete() functions, used similarly to http.post() and http.get() respectively.

Robust Request Handling

Network requests can fail for many reasons (no internet, server down, invalid data). Always prepare for these scenarios:

Use try-catch for network-related exceptions (e.g., SocketException).
Check response.statusCode to understand the server's reply (e.g., 200 OK, 404 Not Found, 500 Server Error).

This ensures your app remains stable even when things go wrong.

HTTP Request Check

Which HTTP method(s) are typically used to send new data to a server and retrieve existing data from a server, respectively?

Recap: HTTP & JSON

Great job! You've learned the fundamentals of making HTTP requests and handling JSON data:

The http package is essential for network calls.
GET retrieves data, POST sends new data, PUT updates, and DELETE removes data.
JSON is the standard format for API data.
Use dart:convert to jsonDecode responses and jsonEncode request bodies.
Dart model classes improve type safety and organization.

Next, you'll dive deeper into handling errors robustly in asynchronous operations!

Frequently asked questions

Is the “HTTP Requests & JSON” lesson free?

Yes — the full text of “HTTP Requests & JSON” is free to read here on the web, and the Flutter Mobile Development course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Flutter Mobile Development course, upgrade to CoddyKit PRO.

What will I learn in “HTTP Requests & JSON”?

Learn to make HTTP GET, POST, PUT, and DELETE requests to REST APIs and parse JSON responses into Dart objects. You practise Flutter Mobile Development with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Flutter Mobile Development?

No prior experience is required. Flutter Mobile Development on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “HTTP Requests & JSON” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Flutter Mobile Development lesson?

Yes. Every Flutter Mobile Development lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Flutter Mobile Development