Belajar REST API dengan Flutter: Konsep, Ilustrasi, Praktik, hingga Menghadapi Error

Halo teman-teman, di postingan kali ini saya ingin berbagi pengalaman belajar REST API bersama siswa menggunakan pendekatan yang sederhana namun aplikatif. Materi ini saya angkat dari obrolan dan praktik langsung saat mencoba membuat aplikasi kecil dengan Dart Flutter melalui platform online zapp.run.

Apa itu REST API?

REST API (Representational State Transfer – Application Programming Interface) adalah cara sebuah aplikasi berkomunikasi dengan aplikasi lain melalui internet.
Singkatnya, REST API seperti jembatan penghubung agar aplikasi kita bisa mengambil atau mengirim data ke server.

Metode HTTP yang sering digunakan:

1. GET → mengambil data dari server.

2. POST → mengirim data baru ke server.

3. PUT → memperbarui data yang sudah ada.

4. DELETE → menghapus data dari server.

Ilustrasi Sederhana: Warung Makan

Agar siswa mudah paham, saya menggunakan analogi warung makan:

• GET = pembeli meminta daftar menu.

• POST = pembeli memesan makanan baru.

• PUT = pembeli mengganti pesanan yang salah.

• DELETE = pembeli membatalkan pesanan.

Dengan ilustrasi ini, siswa lebih cepat mengingat peran masing-masing metode HTTP.

Mencoba REST API dengan Flutter

Setelah paham konsep, kami lanjut mencoba di Flutter (via zapp.run).
Aplikasi ini sederhana: menampilkan data dari server palsu (dummy API) dan memungkinkan pengguna menambahkan data.

File pubspec.yaml

Kami menambahkan dependency http agar bisa melakukan request ke server.

name: rest_api_demo
description: A simple REST API demo with Flutter
publish_to: 'none'
version: 1.0.0+1

environment:
  sdk: ">=2.17.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.5

dev_dependencies:
  flutter_test:
    sdk: flutter

File main.dart

Kami menuliskan kode dasar Flutter untuk melakukan request API dan menampilkan data di layar.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'REST API Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: ApiDemoPage(),
    );
  }
}

class ApiDemoPage extends StatefulWidget {
  @override
  _ApiDemoPageState createState() => _ApiDemoPageState();
}

class _ApiDemoPageState extends State<ApiDemoPage> {
  List data = [];

  Future<void> fetchData() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
    if (response.statusCode == 200) {
      setState(() {
        data = json.decode(response.body);
      });
    } else {
      throw Exception('Gagal mengambil data');
    }
  }

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("REST API Demo")),
      body: data.isEmpty
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: data.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(data[index]['title']),
                  subtitle: Text(data[index]['body']),
                );
              },
            ),
    );
  }
}

Menghadapi Error

Namanya belajar coding, tentu ada saja error. Berikut beberapa error yang muncul saat praktik:

1. Error Null Safety pada Timer

   Error: Method 'cancel' cannot be called on 'Timer?' because it is potentially null.
   Try calling using ?. instead.
   

   ✅ Solusi: tambahkan ? agar sesuai dengan sistem null safety:

   gameTimer?.cancel();
   

2. Error pada DateTime nullable

   Error: The argument type 'DateTime?' can't be assigned to the parameter type 'DateTime'
   

   ✅ Solusi: gunakan operator ! untuk memastikan data tidak null:

   TimeOfDay.fromDateTime(selectedTime!)
   

3. Error getter ‘width’ bukan milik double (saat mencoba game lain di Flutter).
   ✅ Solusi: pastikan variabel didefinisikan dengan benar dan bukan tipe double ketika ingin akses .width.

Dengan adanya error ini, siswa belajar debugging: tidak hanya menyalin kode, tetapi juga paham bagaimana memperbaiki masalah sesuai pesan error.

Kesimpulan

Belajar REST API tidak harus rumit. Dengan:

• Ilustrasi sederhana (seperti warung makan),

• Praktik langsung di Flutter,

• Menghadapi error nyata,

siswa bisa memahami alur komunikasi aplikasi dengan server sekaligus mengasah keterampilan problem solving.

---

✍️ Tulisan ini dibuat berdasarkan pengalaman praktik REST API dengan Flutter di zapp.run, lengkap dengan error-error yang muncul dan solusinya.

---

mau coba aplikasi yg sudah jadi ?
ikuti link ini : https://z313y06jq313z.zapp.page/#/