Flutter JSON Serialization & REST APIs: The Complete Guide
Flutter JSON serialization: fetch REST APIs with the http package, parse JSON into typed models, and render with FutureBuilder — one runnable example.
Almost every Flutter app talks to a server. Fetching a list of posts, submitting a form, loading a profile — it all comes down to Flutter JSON serialization: making an HTTP request, decoding JSON into typed Dart models with fromJson , and turning them into objects your UI can use. This guide walks you through the full cycle with the official http package: GET, POST, typed models, and rendering the results. What you'll build A GET request with Uri.parse and statusCode checks. JSON decoding with dart:convert mapped into a typed Post model. A ListView fed by a FutureBuilder — created the right way, so it doesn't refetch on every rebuild. A POST request with headers and a JSON-encoded body. One complete, runnable main.dart you can paste into a new project. Step 1 — Add the http package In pubspec.yaml : dependencies: flutter: sdk: flutter http: ^1.2.0 Then flutter pub get . Since http 1.x, http.get() takes a Uri , not a String — old tutorials that pass a raw string won't compile anymore. Step 2 — Flutter JSON serialization: the model (JSON in, typed object out) Raw Map<String, dynamic> values leak dynamic through your UI code. A model class with a factory fromJson keeps parsing in one place and gives you compile-time types everywhere else: class Post { final int id; final int userId; final String title; final String body; const Post({ required this.id, required this.userId, required this.title, required this.body, }); /// Null-safe: each `as` cast throws a clear TypeError if the /// server sends the wrong type — loud failure beats silent nulls. factory Post.fromJson(Map<String, dynamic> json) { return Post( id: json['id'] as int, userId: json['userId'] as int, title: json['title'] as String, body: json['body'] as String, ); } } Step 3 — GET: fetch, check, decode, map import…