🌐 REST API Flutter SharedPreferences Artikel 14 dari 16

Konsumsi REST API & Simpan Data Lokal di Flutter

Dari ambil data internet sampai menyimpannya di perangkat — panduan lengkap http, json, dan SharedPreferences untuk pemula.

#FlutterHTTP #SharedPreferences #RESTAPI #BelajarDart #DartFromZeroToZorro

⏱️

Estimasi Baca

12 Menit

📶

Level

Lanjut

📅

Tahun

2026

🔢

Seri

14 / 16

Pernah nggak kamu pakai aplikasi cuaca, buka harga saham real-time, atau scroll feed berita yang terus update — lalu bertanya-tanya: "Data ini dari mana, sih?" Jawabannya: dari REST API. Nah, di artikel ke-14 seri Dart from Zero to Zorro ini, kita akan belajar cara Flutter berkomunikasi dengan dunia luar lewat REST API Flutter SharedPreferences — mulai dari mengambil data dari internet, mengolah JSON, sampai menyimpannya secara lokal agar aplikasimu tetap responsif meski tanpa koneksi. Topik ini adalah jantung dari hampir semua aplikasi modern, jadi siapkan kopi dan editor kamu!

📚

Bagian dari Seri

Dart from Zero to Zorro

Artikel ini adalah bagian ke-14 dari 16 artikel seri belajar Dart & Flutter lengkap — dari nol sampai bisa bikin aplikasi sungguhan.

🗂️ Lihat Daftar Isi Lengkap Seri

🌐 Apa Itu REST API dan Kenapa Flutter Butuh Ini?

Bayangkan kamu lapar dan pesan makanan lewat ojek online. Kamu (aplikasi) meminta makanan (data) ke restoran (server) melalui kurir (HTTP request). Restoran menyiapkan pesanan dan mengirimkannya kembali (HTTP response). Itulah cara kerja REST API — sebuah protokol komunikasi berbasis HTTP yang memungkinkan aplikasi berbicara dengan server.

Di Flutter, kita menggunakan package http untuk mengirim request ke server dan menerima respons dalam format JSON (JavaScript Object Notation) — format data ringan yang mirip Map di Dart.

💡 Formula Konsep

    Flutter App → HTTP Request → REST API Server

    REST API Server → JSON Response → Flutter App

    JSON Response → Dart Object → SharedPreferences (simpan lokal)

💡

Tips Pemula

JSON itu essentially String terstruktur. Di Dart, kita decode-nya jadi Map<String, dynamic> menggunakan jsonDecode(). Gampang kan?

Method	Fungsi	Analogi
GET	Ambil data dari server	Baca menu restoran
POST	Kirim data baru ke server	Pesan makanan baru
PUT	Update data yang ada	Ubah pesanan
DELETE	Hapus data di server	Batalkan pesanan

🔧 Praktik REST API Flutter: Fetch & Tampilkan Data JSON

Cukup teorinya — mari kita langsung coding! Kita akan membuat fitur yang mengambil data user dari API publik JSONPlaceholder (https://jsonplaceholder.typicode.com) — API gratis yang sempurna untuk belajar.

Tambahkan Package http ke pubspec.yaml

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.0
  shared_preferences: ^2.2.2

Jalankan flutter pub get setelah menyimpan file ini.

Buat Model Class User

lib/models/user.dart

class User {
  final int id;
  final String name;
  final String email;

  User({required this.id, required this.name, required this.email});

  // Buat objek User dari JSON (Map)
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
      email: json['email'],
    );
  }

  // Ubah objek User jadi JSON String (untuk disimpan)
  Map<String, dynamic> toJson() => {
    'id': id,
    'name': name,
    'email': email,
  };
}

Buat Service: Fetch Data dari REST API

lib/services/api_service.dart

import 'dart:convert';
import 'package:http/http.dart' as http;
import '../models/user.dart';

class ApiService {
  static const String baseUrl =
      'https://jsonplaceholder.typicode.com';

  // Ambil list semua users
  Future<List<User>> fetchUsers() async {
    final response = await http.get(
      Uri.parse('$baseUrl/users'),
    );

    if (response.statusCode == 200) {
      // Decode JSON array menjadi List<Map>
      final List<dynamic> jsonList = jsonDecode(response.body);
      // Konversi tiap item jadi objek User
      return jsonList.map((json) => User.fromJson(json)).toList();
    } else {
      throw Exception('Gagal memuat data: ${response.statusCode}');
    }
  }
}

⚡

Insight Penting

Perhatikan kata kunci async dan await! HTTP request adalah operasi asynchronous — aplikasi tidak bisa "freeze" menunggu server. Dengan Future + await, Flutter bisa melakukan hal lain sambil menunggu respons.

💾 SharedPreferences: Simpan Data Lokal di Flutter

Setelah berhasil ambil data dari REST API, pertanyaan berikutnya: "Gimana caranya data ini tetap ada meski user tutup aplikasi?" Jawabannya adalah SharedPreferences — penyimpanan key-value sederhana yang disimpan di perangkat pengguna, mirip seperti "catatan tempel" di ponsel mereka.

SharedPreferences cocok untuk data kecil dan sederhana: token login, preferensi tema, data user terakhir, dan lain-lain. Bukan untuk database besar — itu tugas SQLite atau Hive.

🔍 Perbandingan Opsi Penyimpanan Lokal Flutter

Opsi	Ukuran Data	Cocok Untuk	Kompleksitas
SharedPreferences	Kecil (KB)	Settings, token, flag	Mudah ✅
SQLite / sqflite	Besar (MB)	Database relasional	Sedang ⚠️
Hive	Besar (MB)	NoSQL lokal, cepat	Kompleks 🔥

Implementasi SharedPreferences — Simpan & Baca Data

lib/services/storage_service.dart

import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart';
import '../models/user.dart';

class StorageService {
  static const String _usersKey = 'cached_users';

  // Simpan list users ke SharedPreferences
  Future<void> saveUsers(List<User> users) async {
    final prefs = await SharedPreferences.getInstance();
    // Encode list jadi JSON String
    final String jsonString = jsonEncode(
      users.map((u) => u.toJson()).toList(),
    );
    await prefs.setString(_usersKey, jsonString);
  }

  // Ambil list users dari SharedPreferences
  Future<List<User>> loadUsers() async {
    final prefs = await SharedPreferences.getInstance();
    final String? jsonString = prefs.getString(_usersKey);

    if (jsonString == null) return []; // Belum ada data tersimpan

    final List<dynamic> jsonList = jsonDecode(jsonString);
    return jsonList.map((json) => User.fromJson(json)).toList();
  }

  // Hapus data yang tersimpan
  Future<void> clearUsers() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.remove(_usersKey);
  }
}

Gabungkan di Widget — Fetch API & Cache dengan SharedPreferences

lib/screens/user_list_screen.dart

import 'package:flutter/material.dart';
import '../models/user.dart';
import '../services/api_service.dart';
import '../services/storage_service.dart';

class UserListScreen extends StatefulWidget {
  const UserListScreen({super.key});
  @override
  State<UserListScreen> createState() => _UserListScreenState();
}

class _UserListScreenState extends State<UserListScreen> {
  final ApiService _api = ApiService();
  final StorageService _storage = StorageService();
  List<User> _users = [];
  bool _isLoading = false;
  String _source = '';

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

  Future<void> _loadData() async {
    setState(() => _isLoading = true);

    // 1. Coba load dari cache dulu (lebih cepat!)
    final cached = await _storage.loadUsers();
    if (cached.isNotEmpty) {
      setState(() { _users = cached; _source = '💾 Cache Lokal'; });
    }

    // 2. Fetch dari API (update data terbaru)
    try {
      final fresh = await _api.fetchUsers();
      await _storage.saveUsers(fresh); // Simpan ke cache
      setState(() { _users = fresh; _source = '🌐 REST API'; });
    } catch (e) {
      if (cached.isEmpty) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('Gagal: $e')),
        );
      }
    }

    setState(() => _isLoading = false);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Daftar User ($_source)'),
        backgroundColor: Color(0xFF6366F1),
      ),
      body: _isLoading && _users.isEmpty
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: _users.length,
              itemBuilder: (_, i) => ListTile(
                leading: CircleAvatar(child: Text('${_users[i].id}')),
                title: Text(_users[i].name),
                subtitle: Text(_users[i].email),
              ),
            ),
      floatingActionButton: FloatingActionButton(
        onPressed: _loadData,
        child: Icon(Icons.refresh),
      ),
    );
  }
}

🔥

Fakta Menarik

Pola "load cache dulu, fetch API kemudian" ini disebut Stale-While-Revalidate. Aplikasi seperti Twitter, Instagram, dan TikTok menggunakan strategi ini supaya konten muncul instan, bahkan sebelum data baru tiba dari server!

🛡️ Error Handling & Best Practices REST API Flutter SharedPreferences

Aplikasi production-ready bukan hanya soal kode yang bisa jalan — tapi kode yang tahan banting. Koneksi internet bisa putus, server bisa down, data bisa corrupt. Berikut pola penanganan error yang wajib kamu tahu:

⚠️

Perhatian!

Jangan lupa tambahkan permission internet di Android! Buka file android/app/src/main/AndroidManifest.xml dan tambahkan baris: <uses-permission android:name="android.permission.INTERNET"/>

Error Handling Pattern

Future<List<User>> fetchUsers() async {
  try {
    final response = await http
        .get(Uri.parse('$baseUrl/users'))
        .timeout(Duration(seconds: 10)); // Timeout 10 detik

    switch (response.statusCode) {
      case 200:
        return (jsonDecode(response.body) as List)
            .map((j) => User.fromJson(j))
            .toList();
      case 404:
        throw Exception('Data tidak ditemukan (404)');
      case 500:
        throw Exception('Server bermasalah (500)');
      default:
        throw Exception('Error: ${response.statusCode}');
    }
  } on TimeoutException {
    throw Exception('Koneksi timeout — cek internet kamu!');
  } on SocketException {
    throw Exception('Tidak ada koneksi internet');
  }
}

💡

Best Practices SharedPreferences

Gunakan konstanta untuk key (bukan hardcode string di sana-sini)
SharedPreferences hanya untuk data ringan — jangan simpan list ribuan item
Selalu handle kasus data null (user baru install app)
Enkripsi data sensitif — pakai flutter_secure_storage untuk token auth

📝 Kesimpulan — Artikel 14

Yang Sudah Kamu Kuasai Hari Ini!

Di artikel ke-14 ini, kamu telah berhasil menaklukkan dua konsep vital dalam pengembangan aplikasi Flutter: berkomunikasi dengan server melalui REST API menggunakan package http, dan menyimpan data secara persisten menggunakan SharedPreferences. Kombinasi REST API Flutter SharedPreferences ini adalah fondasi dari hampir semua aplikasi mobile modern — dari e-commerce, berita, hingga media sosial.

Kamu sudah belajar: membuat model class, mem-fetch data JSON, mengolahnya menjadi objek Dart, menyimpan dan membaca dari storage lokal, hingga pola caching cache-first untuk pengalaman pengguna yang lebih mulus. Satu langkah lagi menuju developer Flutter profesional! 🚀

✅ HTTP GET Request ✅ JSON Parsing ✅ SharedPreferences ✅ Cache Strategy ✅ Error Handling

💬 Punya pertanyaan? Atau sudah berhasil coba kodenya?
Ceritain pengalamanmu di kolom komentar di bawah — siapa tahu bisa bantu teman-teman lain yang juga lagi belajar!

📤 Bagikan artikel ini ke teman yang lagi belajar Flutter — karena belajar bareng itu lebih seru! 🎉

#BelajarDart #DartFromZeroToZorro #RESTAPIFlutter #SharedPreferences #FlutterDev #HTTPDart #Mobiledev

🧭 Navigasi Artikel Seri

← Artikel Sebelumnya

Artikel 13

Navigasi & Routing — Pindah Halaman di Aplikasi Flutter

📚

Daftar Isi

Zero to Zorro

Artikel Selanjutnya →

Artikel 15

Project Akhir Bagian 1 — Bangun Aplikasi To-Do List Lengkap