0Pricing
Flutter Mobile Development · Lezione

Richieste HTTP e JSON

Impari a effettuare richieste GET, POST, PUT e DELETE HTTP alle API REST e a convertire le risposte JSON in oggetti Dart.

Richieste HTTP e JSON è una lezione Flutter Mobile Development gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Flutter Mobile Development, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Flutter Mobile Development include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

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!

Domande Frequenti

La lezione «Richieste HTTP e JSON» è gratuita?

Sì — il testo completo di «Richieste HTTP e JSON» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Flutter Mobile Development, passa a CoddyKit PRO. Il corso Flutter Mobile Development include 4 lezioni in totale.

Cosa imparerò in «Richieste HTTP e JSON»?

Impari a effettuare richieste GET, POST, PUT e DELETE HTTP alle API REST e a convertire le risposte JSON in oggetti Dart. Eserciti Flutter Mobile Development con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Flutter Mobile Development?

Non è richiesta alcuna esperienza precedente. Flutter Mobile Development su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Richieste HTTP e JSON»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Flutter Mobile Development?

Sì. Ogni lezione Flutter Mobile Development include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Future e async/await
  2. Richieste HTTP e JSON
  3. Gestione degli errori nelle operazioni asincrone
  4. Stream e dati reattivi
← Torna a Flutter Mobile Development