Mobiele ontwikkeling met Flutter · Les

HTTP-verzoeken en JSON

Leer GET-, POST-, PUT- en DELETE-verzoeken te versturen naar REST-API's en JSON-antwoorden te parseren naar Dart-objecten.

Les 2 van 412 stappen

HTTP-verzoeken en JSON is een gratis Mobiele ontwikkeling met Flutter-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Mobiele ontwikkeling met Flutter. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.

Maak verbinding met het web!

Moderne mobiele apps communiceren voortdurend met internet om gegevens op te halen en te verzenden. Dit gebeurt vaak met HTTP-verzoeken om te communiceren met webservices, ook wel API's (programmeerkoppelingen voor toepassingen) genoemd.

API's bieden een manier waarop verschillende softwaresystemen met elkaar kunnen communiceren. Een weer-app gebruikt bijvoorbeeld een API om de nieuwste weersvoorspelling op te halen.

Het pakket `http` ophalen

In Flutter en Dart kun je het eenvoudigst HTTP-verzoeken doen met het officiële pakket http. Eerst moet je het aan het bestand pubspec.yaml van je project toevoegen:

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

Een GET-verzoek doen

Nadat je het pakket hebt toegevoegd, importeer je het in je Dart-bestand. Het meest voorkomende verzoek is GET, dat wordt gebruikt om gegevens van een server op te halen. Laten we enkele voorbeeldgegevens van een openbaar API ophalen:

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}.');
  }
}

Wat is JSON?

De meeste web-API's retourneren gegevens in de indeling JSON (JavaScript Object Notation). Dit is een lichtgewicht, voor mensen leesbare manier om gegevens te ordenen.

JSON-gegevens zien eruit als sleutel-waardeparen, vergelijkbaar met Dart-maps. Dit is wat ons eerdere GET-verzoek mogelijk retourneert:

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

JSON naar Dart parseren

Als je in Dart met JSON-gegevens wilt werken, moet je deze decoderen. De Dart-bibliotheek dart:convert biedt de functie jsonDecode(), die een JSON-tekenreeks omzet in een Dart-Map.

Laten we ons GET-voorbeeld aanpassen om het antwoord te parseren:

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}.');
  }
}

Gestructureerde gegevens met modellen

Hoewel Map prima is voor eenvoudige gevallen, biedt het maken van een speciale Dart-modelklasse voor je JSON-gegevens een betere typeveiligheid en leesbaarheid van de code.

Een veelgebruikt patroon is een factory-constructor die een JSON-map ontvangt en een exemplaar van je model maakt.

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,
    );
  }
}

Gegevens ophalen in een model

Laten we nu ons GET-verzoek, het decoderen van JSON en het Post-model combineren om een bericht op te halen en dit om te zetten in een sterk getypeerd Dart-object. Zo wordt het openen van gegevens veel veiliger en duidelijker!

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}.');
  }
}

Gegevens verzenden met POST

Als je nieuwe gegevens naar een server wilt verzenden, gebruik je meestal een POST-verzoek. Hierbij geef je een aanvraagbody op, meestal in JSON-indeling. Vergeet niet de header 'Content-Type' in te stellen!

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}.');
  }
}

Gegevens bijwerken en verwijderen

Naast GET en POST kom je ook PUT- en DELETE-verzoeken tegen:

PUT: Wordt gebruikt om een bestaande bron op de server bij te werken. Net als bij POST bevat dit meestal een aanvraagbody.
DELETE: Wordt gebruikt om een bron van de server te verwijderen. Hiervoor is meestal geen aanvraagbody nodig.

Het pakket http biedt de functies http.put() en http.delete(), die op vergelijkbare wijze worden gebruikt als respectievelijk http.post() en http.get().

Robuuste afhandeling van verzoeken

Netwerkverzoeken kunnen om veel redenen mislukken (geen internet, server offline, ongeldige gegevens). Bereid je altijd voor op deze situaties:

Gebruik try-catch voor netwerkgerelateerde uitzonderingen (bijvoorbeeld SocketException).
Controleer response.statusCode om het antwoord van de server te begrijpen (bijvoorbeeld 200 OK, 404 Not Found, 500 Server Error).

Zo blijft je app stabiel, ook als er iets misgaat.

Controle van HTTP-verzoeken

Welke HTTP-methode(n) worden doorgaans respectievelijk gebruikt om nieuwe gegevens naar een server te verzenden en bestaande gegevens van een server op te halen?

Beantwoord dit in de interactieve les

Herhaling: HTTP en JSON

Goed gedaan! Je hebt de basis geleerd van HTTP-verzoeken doen en JSON-gegevens verwerken:

Het pakket http is essentieel voor netwerkcommunicatie.
GET haalt gegevens op, POST verzendt nieuwe gegevens, PUT werkt gegevens bij en DELETE verwijdert gegevens.
JSON is de standaardindeling voor API-gegevens.
Gebruik dart:convert om antwoorden met jsonDecode en aanvraagbody's met jsonEncode te verwerken.
Dart-modelklassen verbeteren de typeveiligheid en structuur.

Vervolgens leer je meer over het robuust afhandelen van fouten in asynchrone bewerkingen!

Gratis beginnen

Leer Dart met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 22
Lessen: 88

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “HTTP-verzoeken en JSON” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Mobiele ontwikkeling met Flutter, waaronder “HTTP-verzoeken en JSON”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.

Wat leer ik in “HTTP-verzoeken en JSON”?

Leer GET-, POST-, PUT- en DELETE-verzoeken te versturen naar REST-API's en JSON-antwoorden te parseren naar Dart-objecten. Je oefent met Mobiele ontwikkeling met Flutter door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Mobiele ontwikkeling met Flutter te beginnen?

Ervaring vooraf is niet nodig. Mobiele ontwikkeling met Flutter op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “HTTP-verzoeken en JSON”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Mobiele ontwikkeling met Flutter?

Ja. Elke les over Mobiele ontwikkeling met Flutter bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Mobiele ontwikkeling met Flutter