Integrasi REST API Flutter: HTTP vs Dio Lengkap

Pengantar: Mengapa Integrasi REST API Penting di Aplikasi Flutter Anda?

Selamat datang di AnakInformatika! Jika Anda seorang developer Flutter yang ingin menciptakan aplikasi yang dinamis, interaktif, dan selalu up-to-date, maka Tutorial Mengintegrasikan REST API dengan HTTP / Dio di Flutter adalah bekal wajib yang harus Anda kuasai. Aplikasi modern hampir selalu bergantung pada data yang berasal dari server eksternal, dan di sinilah peran REST API menjadi sangat krusial.

REST (Representational State Transfer) API memungkinkan aplikasi kita berkomunikasi dengan server, mengambil data (GET), mengirim data baru (POST), memperbarui data (PUT/PATCH), atau menghapus data (DELETE). Dalam ekosistem Flutter, ada dua library populer yang menjadi pilihan utama untuk menangani permintaan HTTP ini: package http dan Dio. Keduanya memiliki kelebihan dan kekurangannya masing-masing, dan tutorial ini akan membahas keduanya secara mendalam, memberikan Anda pemahaman komprehensif serta contoh kode yang siap Anda terapkan.

Mari kita selami bagaimana cara membuat aplikasi Flutter Anda "hidup" dengan kemampuan berinteraksi dengan dunia luar!

Prasyarat

Sebelum memulai petualangan integrasi API ini, pastikan Anda memiliki prasyarat berikut:

Flutter SDK: Terinstal dan terkonfigurasi dengan baik di sistem Anda.
IDE: Visual Studio Code atau Android Studio dengan plugin Flutter yang terinstal.
Pengetahuan Dasar Dart & Flutter: Anda sudah familiar dengan konsep dasar seperti Widget, State, StatelessWidget/StatefulWidget, dan Future.
Koneksi Internet: Untuk mengunduh package dan mengakses API.

Persiapan Proyek Flutter

Pertama, mari kita buat proyek Flutter baru dan tambahkan dependensi yang dibutuhkan. Buka terminal atau command prompt Anda dan jalankan perintah berikut:


flutter create rest_api_integration_demo
cd rest_api_integration_demo

Selanjutnya, buka file pubspec.yaml dan tambahkan package http dan dio di bagian dependencies:. Kita akan menggunakan JSONPlaceholder sebagai REST API publik gratis untuk contoh ini.


dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.1 # Versi terbaru saat tutorial ini dibuat
  dio: ^5.4.3+1 # Versi terbaru saat tutorial ini dibuat
  # Tambahkan package lain jika diperlukan

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

Simpan file pubspec.yaml dan jalankan flutter pub get untuk mengunduh package.

Membuat Model Data (Serialization)

Untuk mengelola data yang diterima dari API (biasanya dalam format JSON), sangat penting untuk membuat model data (Dart class). Ini membantu dalam deserialisasi JSON menjadi objek Dart dan sebaliknya (serialisasi). Kita akan menggunakan data "Posts" dari JSONPlaceholder.

Buat folder models di dalam folder lib, lalu buat file post.dart:


// lib/models/post.dart
import 'dart:convert';

class Post {
  final int? userId;
  final int? id;
  final String title;
  final String body;

  Post({
    this.userId,
    this.id,
    required this.title,
    required this.body,
  });

  // Factory constructor untuk membuat instance Post dari JSON (deserialization)
  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,
    );
  }

  // Method untuk mengubah instance Post menjadi JSON (serialization)
  Map<String, dynamic> toJson() {
    return {
      'userId': userId,
      'id': id,
      'title': title,
      'body': body,
    };
  }
}

Penjelasan Kode Model:

Post.fromJson(Map<String, dynamic> json): Ini adalah factory constructor yang digunakan untuk mengonversi data JSON (dalam bentuk Map<String, dynamic>) menjadi objek Post. Ini sangat penting saat Anda menerima respons dari API.
toJson(): Method ini berfungsi kebalikannya, yaitu mengonversi objek Post menjadi Map<String, dynamic> yang bisa di-encode menjadi string JSON untuk dikirim ke API (misalnya, untuk permintaan POST atau PUT).

Mengintegrasikan REST API dengan HTTP Package

Package http adalah klien HTTP bawaan Dart yang ringan dan mudah digunakan. Cocok untuk proyek sederhana atau ketika Anda tidak membutuhkan fitur-fitur canggih seperti interceptors atau caching yang ada di Dio.

Membuat Service API dengan HTTP

Buat folder services di dalam lib, lalu buat file post_service_http.dart:


// lib/services/post_service_http.dart
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:rest_api_integration_demo/models/post.dart';

class PostServiceHttp {
  final String _baseUrl = 'https://jsonplaceholder.typicode.com';

  // --- GET Request ---
  Future<List<Post>> fetchPosts() async {
    final response = await http.get(Uri.parse('$_baseUrl/posts'));

    if (response.statusCode == 200) {
      // Jika server mengembalikan respons OK (status code 200),
      // maka parse JSON.
      List<dynamic> data = jsonDecode(response.body);
      return data.map((json) => Post.fromJson(json)).toList();
    } else {
      // Jika server tidak mengembalikan respons OK,
      // lempar exception.
      throw Exception('Gagal memuat posts: ${response.statusCode}');
    }
  }

  // --- POST Request ---
  Future<Post> createPost(Post post) async {
    final response = await http.post(
      Uri.parse('$_baseUrl/posts'),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(post.toJson()), // Mengubah objek Post menjadi JSON string
    );

    if (response.statusCode == 201) { // 201 Created
      return Post.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('Gagal membuat post: ${response.statusCode}');
    }
  }

  // --- PUT/PATCH Request (untuk update) ---
  Future<Post> updatePost(int id, Post post) async {
    final response = await http.put(
      Uri.parse('$_baseUrl/posts/$id'),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(post.toJson()),
    );

    if (response.statusCode == 200) {
      return Post.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('Gagal memperbarui post: ${response.statusCode}');
    }
  }

  // --- DELETE Request ---
  Future<void> deletePost(int id) async {
    final response = await http.delete(
      Uri.parse('$_baseUrl/posts/$id'),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
    );

    if (response.statusCode == 200) {
      print('Post dengan ID $id berhasil dihapus.');
    } else {
      throw Exception('Gagal menghapus post: ${response.statusCode}');
    }
  }
}

Penjelasan Kode Service HTTP:

_baseUrl: Mendefinisikan URL dasar API untuk kemudahan pengelolaan.
http.get(Uri.parse('$_baseUrl/posts')): Melakukan permintaan GET ke endpoint /posts. Uri.parse() mengubah string URL menjadi objek Uri yang dibutuhkan oleh metode HTTP.
jsonDecode(response.body): Mengonversi string JSON yang diterima dari server menjadi objek Dart (biasanya List<dynamic> atau Map<String, dynamic>).
data.map((json) => Post.fromJson(json)).toList(): Iterasi setiap item JSON dalam list dan mengonversinya menjadi objek Post menggunakan factory constructor Post.fromJson().
response.statusCode == 200: Mengecek apakah permintaan berhasil. Status code 200 berarti OK, 201 berarti Created (untuk POST).
http.post(...), http.put(...), http.delete(...): Mirip dengan GET, tetapi dengan metode HTTP yang berbeda.
- headers: {'Content-Type': 'application/json; charset=UTF-8'}: Penting untuk memberi tahu server bahwa kita mengirimkan data dalam format JSON.
- body: jsonEncode(post.toJson()): Mengonversi objek Post menjadi string JSON sebelum dikirim ke server.

Menggunakan Service HTTP di UI

Sekarang, mari kita gunakan service ini di UI aplikasi kita. Modifikasi file main.dart:


// lib/main.dart
import 'package:flutter/material.dart';
import 'package:rest_api_integration_demo/models/post.dart';
import 'package:rest_api_integration_demo/services/post_service_http.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter REST API HTTP Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const PostListPageHttp(),
    );
  }
}

class PostListPageHttp extends StatefulWidget {
  const PostListPageHttp({super.key});

  @override
  State<PostListPageHttp> createState() => _PostListPageHttpState();
}

class _PostListPageHttpState extends State<PostListPageHttp> {
  late Future<List<Post>> _futurePosts;
  final PostServiceHttp _postService = PostServiceHttp();

  @override
  void initState() {
    super.initState();
    _futurePosts = _postService.fetchPosts(); // Panggil API saat initState
  }

  // Contoh fungsi untuk membuat post baru
  Future<void> _createPost() async {
    final newPost = Post(title: 'Judul Baru Dari HTTP', body: 'Isi post baru dari aplikasi Flutter menggunakan HTTP!');
    try {
      final createdPost = await _postService.createPost(newPost);
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Post berhasil dibuat: ${createdPost.title}')),
      );
      setState(() {
        _futurePosts = _postService.fetchPosts(); // Refresh list
      });
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Gagal membuat post: $e')),
      );
    }
  }

  // Contoh fungsi untuk menghapus post
  Future<void> _deletePost(int id) async {
    try {
      await _postService.deletePost(id);
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Post ID $id berhasil dihapus.')),
      );
      setState(() {
        _futurePosts = _postService.fetchPosts(); // Refresh list
      });
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Gagal menghapus post: $e')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Posts (HTTP Package)'),
      ),
      body: FutureBuilder<List<Post>>(
        future: _futurePosts,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          } else if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                final post = snapshot.data![index];
                return Card(
                  margin: const EdgeInsets.all(8.0),
                  child: ListTile(
                    title: Text(post.title),
                    subtitle: Text(post.body),
                    trailing: IconButton(
                      icon: const Icon(Icons.delete, color: Colors.red),
                      onPressed: () => _deletePost(post.id!), // Pastikan ID tidak null
                    ),
                    onTap: () {
                      // Contoh: Navigasi ke detail atau update post
                      print('Post ${post.id} dipilih');
                    },
                  ),
                );
              },
            );
          } else {
            return const Center(child: Text('Tidak ada data post.'));
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _createPost,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Penjelasan Kode UI HTTP:

FutureBuilder<List<Post>>: Widget yang sangat berguna untuk menangani operasi asinkron. Ia membangun UI berdasarkan status Future yang diberikan (_futurePosts).
- ConnectionState.waiting: Menampilkan indikator loading saat data masih diambil.
- snapshot.hasError: Menampilkan pesan error jika terjadi kesalahan.
- snapshot.hasData: Menampilkan data jika berhasil diambil, di sini dalam bentuk ListView.builder.
initState(): Tempat yang tepat untuk memanggil API pertama kali saat widget dibuat.
_createPost() dan _deletePost(): Contoh bagaimana memicu permintaan POST dan DELETE dari UI. Setelah operasi berhasil, setState dipanggil untuk me-refresh data dengan memanggil ulang _postService.fetchPosts().

Mengintegrasikan REST API dengan Dio Package

Dio adalah klien HTTP yang lebih canggih dan kaya fitur. Ia menawarkan interceptors, form data, request cancellation, dan banyak lagi. Ini adalah pilihan yang sangat baik untuk aplikasi yang lebih besar dan kompleks.

Membuat Service API dengan Dio

Buat file post_service_dio.dart di folder lib/services:


// lib/services/post_service_dio.dart
import 'package:dio/dio.dart';
import 'package:rest_api_integration_demo/models/post.dart';

class PostServiceDio {
  final Dio _dio = Dio(BaseOptions(
    baseUrl: 'https://jsonplaceholder.typicode.com',
    connectTimeout: const Duration(seconds: 5), // 5 detik
    receiveTimeout: const Duration(seconds: 3), // 3 detik
    headers: {
      'Content-Type': 'application/json; charset=UTF-8',
    },
  ));

  // --- GET Request ---
  Future<List<Post>> fetchPosts() async {
    try {
      final response = await _dio.get('/posts');
      if (response.statusCode == 200) {
        List<dynamic> data = response.data;
        return data.map((json) => Post.fromJson(json)).toList();
      } else {
        throw Exception('Gagal memuat posts: ${response.statusCode}');
      }
    } on DioException catch (e) { // Tangani DioException
      throw Exception('Gagal memuat posts: ${e.message}');
    } catch (e) {
      throw Exception('Terjadi error tak terduga: $e');
    }
  }

  // --- POST Request ---
  Future<Post> createPost(Post post) async {
    try {
      final response = await _dio.post(
        '/posts',
        data: post.toJson(), // Dio secara otomatis menangani JSON encoding
      );

      if (response.statusCode == 201) {
        return Post.fromJson(response.data);
      } else {
        throw Exception('Gagal membuat post: ${response.statusCode}');
      }
    } on DioException catch (e) {
      throw Exception('Gagal membuat post: ${e.message}');
    }
  }

  // --- PUT/PATCH Request (untuk update) ---
  Future<Post> updatePost(int id, Post post) async {
    try {
      final response = await _dio.put(
        '/posts/$id',
        data: post.toJson(),
      );

      if (response.statusCode == 200) {
        return Post.fromJson(response.data);
      } else {
        throw Exception('Gagal memperbarui post: ${response.statusCode}');
      }
    } on DioException catch (e) {
      throw Exception('Gagal memperbarui post: ${e.message}');
    }
  }

  // --- DELETE Request ---
  Future<void> deletePost(int id) async {
    try {
      final response = await _dio.delete(
        '/posts/$id',
      );

      if (response.statusCode == 200) {
        print('Post dengan ID $id berhasil dihapus.');
      } else {
        throw Exception('Gagal menghapus post: ${response.statusCode}');
      }
    } on DioException catch (e) {
      throw Exception('Gagal menghapus post: ${e.message}');
    }
  }

  // Contoh penggunaan Interceptor (opsional)
  void addInterceptors() {
    _dio.interceptors.add(
      InterceptorsWrapper(
        onRequest: (options, handler) {
          // Lakukan sesuatu sebelum request dikirim
          print('REQUEST[${options.method}] => PATH: ${options.path}');
          return handler.next(options); // Lanjutkan permintaan
        },
        onResponse: (response, handler) {
          // Lakukan sesuatu dengan data response
          print('RESPONSE[${response.statusCode}] => PATH: ${response.requestOptions.path}');
          return handler.next(response); // Lanjutkan response
        },
        onError: (DioException e, handler) {
          // Lakukan sesuatu dengan DioError
          print('ERROR[${e.response?.statusCode}] => PATH: ${e.requestOptions.path}');
          return handler.next(e); // Lanjutkan error
        },
      ),
    );
  }
}

Penjelasan Kode Service Dio:

final Dio _dio = Dio(...): Membuat instance Dio. Di sini kita bisa mengonfigurasi BaseOptions seperti baseUrl, connectTimeout, receiveTimeout, dan headers secara global untuk semua permintaan.
_dio.get('/posts'): Dengan baseUrl yang sudah dikonfigurasi, kita hanya perlu memberikan path relatif.
response.data: Dio secara otomatis mendekode respons JSON menjadi objek Dart (Map<String, dynamic> atau List<dynamic>), jadi kita tidak perlu lagi memanggil jsonDecode().
data: post.toJson(): Untuk permintaan POST/PUT, Dio akan secara otomatis meng-encode objek Dart yang diberikan ke dalam JSON string, jadi tidak perlu jsonEncode() manual.
on DioException catch (e): Dio memiliki tipe error khusus, DioException, yang menyediakan informasi lebih detail tentang kesalahan, seperti tipe error (koneksi, timeout, dll.) dan respons server jika ada.
addInterceptors(): Contoh bagaimana menambahkan interceptors. Interceptors memungkinkan Anda mencegat dan memodifikasi permintaan atau respons sebelum diproses, sangat berguna untuk logging, penanganan token otentikasi, atau error handling global.

Menggunakan Service Dio di UI

Kita akan membuat halaman baru untuk demo Dio agar tidak bercampur dengan HTTP. Buat file post_list_page_dio.dart di folder lib/:


// lib/post_list_page_dio.dart
import 'package:flutter/material.dart';
import 'package:rest_api_integration_demo/models/post.dart';
import 'package:rest_api_integration_demo/services/post_service_dio.dart';

class PostListPageDio extends StatefulWidget {
  const PostListPageDio({super.key});

  @override
  State<PostListPageDio> createState() => _PostListPageDioState();
}

class _PostListPageDioState extends State<PostListPageDio> {
  late Future<List<Post>> _futurePosts;
  final PostServiceDio _postService = PostServiceDio();

  @override
  void initState() {
    super.initState();
    _postService.addInterceptors(); // Aktifkan interceptors (opsional)
    _futurePosts = _postService.fetchPosts();
  }

  Future<void> _createPost() async {
    final newPost = Post(title: 'Judul Baru Dari Dio', body: 'Isi post baru dari aplikasi Flutter menggunakan Dio!');
    try {
      final createdPost = await _postService.createPost(newPost);
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Post berhasil dibuat: ${createdPost.title}')),
      );
      setState(() {
        _futurePosts = _postService.fetchPosts();
      });
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Gagal membuat post: $e')),
      );
    }
  }

  Future<void> _deletePost(int id) async {
    try {
      await _postService.deletePost(id);
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Post ID $id berhasil dihapus.')),
      );
      setState(() {
        _futurePosts = _postService.fetchPosts();
      });
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Gagal menghapus post: $e')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Posts (Dio Package)'),
      ),
      body: FutureBuilder<List<Post>>(
        future: _futurePosts,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          } else if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                final post = snapshot.data![index];
                return Card(
                  margin: const EdgeInsets.all(8.0),
                  child: ListTile(
                    title: Text(post.title),
                    subtitle: Text(post.body),
                    trailing: IconButton(
                      icon: const Icon(Icons.delete, color: Colors.red),
                      onPressed: () => _deletePost(post.id!),
                    ),
                    onTap: () {
                      print('Post ${post.id} dipilih');
                    },
                  ),
                );
              },
            );
          } else {
            return const Center(child: Text('Tidak ada data post.'));
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _createPost,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Untuk melihat halaman Dio, Anda bisa mengganti home di main.dart:


// lib/main.dart (bagian MyApp)
// ...
      home: const PostListPageDio(), // Ganti ke ini untuk melihat demo Dio
// ...

Struktur UI untuk Dio hampir identik dengan HTTP karena keduanya mengembalikan Future<List<Post>>. Perbedaan utamanya terletak pada implementasi di layer service.

Tips Praktis dan Best Practices

Pemisahan Tanggung Jawab (Separation of Concerns):
- Model: Khusus untuk definisi struktur data dan serialisasi/deserialisasi JSON.
- Service/Repository: Menangani logika pemanggilan API, error handling, dan konversi respons menjadi objek Dart. Ini menjaga UI tetap bersih dari logika API.
- UI (Widgets): Fokus pada presentasi data dan interaksi pengguna, memanggil method dari service.
Penanganan Error yang Robust:
- Selalu gunakan blok try-catch saat memanggil API.
- Periksa statusCode dari respons HTTP.
- Untuk Dio, tangani DioException untuk detail error yang lebih spesifik.
- Berikan umpan balik yang jelas kepada pengguna (misalnya, Snackbar, dialog) saat terjadi error.
Manajemen State: Gunakan FutureBuilder untuk menampilkan data asinkron dengan elegan. Untuk aplikasi yang lebih kompleks, pertimbangkan solusi manajemen state seperti Provider, Riverpod, Bloc, atau GetX untuk mengelola state loading, error, dan data.
Timeouts: Konfigurasi timeout untuk permintaan API Anda (connectTimeout, receiveTimeout). Ini mencegah aplikasi "terjebak" menunggu respons yang tidak kunjung datang. Dio mempermudah ini dengan BaseOptions.
Interceptors (khusus Dio): Manfaatkan interceptors untuk:
- Logging: Mencatat setiap permintaan dan respons untuk debugging.
- Authentication: Menambahkan token otentikasi (misalnya, Bearer Token) ke header setiap permintaan secara otomatis.
- Error Handling Global: Menangani jenis error tertentu di satu tempat.
URL Dasar (Base URL): Selalu definisikan base URL terpisah dari endpoint spesifik. Ini memudahkan perubahan jika URL API berubah atau Anda memiliki lingkungan (development, staging, production) yang berbeda.
Keamanan:
- Jangan menyimpan kunci API atau informasi sensitif langsung di kode sumber Anda. Gunakan variabel lingkungan atau solusi manajemen konfigurasi.
- Selalu gunakan HTTPS untuk komunikasi API.
Testabilitas: Dengan memisahkan logika API ke dalam service, Anda bisa lebih mudah menulis unit test untuk service tersebut.

Kesimpulan

Selamat! Anda telah berhasil mengikuti Tutorial Mengintegrasikan REST API dengan HTTP / Dio di Flutter. Anda kini memiliki pemahaman yang kuat tentang cara mengambil, membuat, memperbarui, dan menghapus data menggunakan dua library HTTP paling populer di Flutter: http dan Dio.

Baik http maupun Dio adalah alat yang ampuh, dan pilihan antara keduanya seringkali tergantung pada kebutuhan spesifik proyek Anda. Untuk proyek sederhana, http sudah cukup. Untuk proyek yang lebih besar yang membutuhkan fitur-fitur canggih seperti interceptors, timeout global, dan penanganan error yang lebih kaya, Dio adalah pilihan yang superior.

Teruslah berlatih, eksperimen dengan API yang berbeda, dan jangan ragu untuk kembali ke tutorial ini sebagai referensi. Kemampuan mengintegrasikan REST API adalah salah satu keterampilan paling fundamental yang akan membawa aplikasi Flutter Anda ke level berikutnya. Sampai jumpa di tutorial AnakInformatika lainnya!

#Flutter #mobile developer

🚀 Bongkar Rahasia! Tutorial Mengintegrasikan REST API dengan HTTP / Dio di Flutter (Anti Pusing, Langsung Jadi!)

Daftar isi