Learn
← Previous Next →

Hari 21: HTTP & REST API

60 min Last updated 09 Apr 2026

HTTP di Flutter

Gunakan package http (tambahkan di pubspec.yaml) atau dio untuk HTTP calls.

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

// Model
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) => Post(
    id: json["id"],
    title: json["title"],
    body: json["body"],
  );
}

// Service
class PostService {
  static const baseUrl = "https://jsonplaceholder.typicode.com";

  Future> getPosts() async {
    final response = await http.get(Uri.parse("$baseUrl/posts?_limit=10"));
    if (response.statusCode == 200) {
      List data = jsonDecode(response.body);
      return data.map((json) => Post.fromJson(json)).toList();
    }
    throw Exception("Gagal mengambil data: ${response.statusCode}");
  }

  Future createPost(String title, String body) async {
    final response = await http.post(
      Uri.parse("$baseUrl/posts"),
      headers: {"Content-Type": "application/json"},
      body: jsonEncode({"title": title, "body": body, "userId": 1}),
    );
    if (response.statusCode == 201) {
      return Post.fromJson(jsonDecode(response.body));
    }
    throw Exception("Gagal membuat post");
  }
}

JSON Parsing

import "dart:convert";

void main() {
  String jsonStr = """
  {
    "nama": "Budi",
    "umur": 25,
    "hobi": ["coding", "membaca", "gaming"],
    "alamat": {"kota": "Jakarta", "kodePos": "10110"}
  }
  """;

  Map data = jsonDecode(jsonStr);
  print(data["nama"]);                    // Budi
  print(data["hobi"][0]);                 // coding
  print(data["alamat"]["kota"]);          // Jakarta

  String encoded = jsonEncode(data);
  print(encoded);
}
💡 Notice: factory constructor fromJson adalah pola standar untuk parsing JSON di Dart/Flutter.

Assignment

Buat class User dengan fromJson dan toJson, parse JSON list dan filter berdasarkan role.

Expected output:

Semua user: 3 orang
User(2, Budi, budi@test.com, user)
User(3, Cika, cika@test.com, user)
JSON: [{"id":1,"nama":"Andi","email":"andi@test.com","role":"admin"},{"id":2,"nama":"Budi","email":"budi@test.com","role":"user"},{"id":3,"nama":"Cika","email":"cika@test.com","role":"user"}]
Dart main.dart
Solution
Output