🚀 Integrasi API di Flutter: Panduan Lengkap! 📲✨

Flutter adalah framework UI yang populer untuk membangun aplikasi mobile yang mendukung Android dan iOS dengan satu basis kode. Salah satu kebutuhan utama dalam pengembangan aplikasi adalah integrasi dengan API untuk mengambil dan mengirim data.

Artikel ini akan membahas bagaimana cara mengintegrasikan API dalam Flutter menggunakan paket http.

Instalasi Paket HTTP

Sebelum mulai menggunakan API, kita perlu menambahkan dependensi http di proyek Flutter kita. Tambahkan kode berikut ke dalam pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.5

Setelah itu, jalankan perintah berikut di terminal:

flutter pub get
Membuat Model Data

Agar data yang diambil dari API dapat digunakan dengan mudah, kita perlu membuat model untuk mengubah JSON menjadi objek Dart.

Misalnya, kita akan mengambil daftar pengguna dari API https://jsonplaceholder.typicode.com/users.

Buat file baru user_model.dart dan tambahkan kode berikut:

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

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

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

Membuat Fungsi Fetch Data

Sekarang kita buat fungsi untuk mengambil data dari API.

Buat file baru api_service.dart dan tambahkan kode berikut:

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'user_model.dart';

class ApiService {
  static Future<List<User>> fetchUsers() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));

    if (response.statusCode == 200) {
      List<dynamic> data = json.decode(response.body);
      return data.map((json) => User.fromJson(json)).toList();
    } else {
      throw Exception('Failed to load users');
    }
  }
}

Menampilkan Data di UI

Setelah mendapatkan data dari API, kita akan menampilkannya di aplikasi Flutter.

Buka main.dart dan tambahkan kode berikut:

import 'package:flutter/material.dart';
import 'api_service.dart';
import 'user_model.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter API Integration',
      home: UserListScreen(),
    );
  }
}

class UserListScreen extends StatefulWidget {
  @override
  _UserListScreenState createState() => _UserListScreenState();
}

class _UserListScreenState extends State<UserListScreen> {
  late Future<List<User>> futureUsers;

  @override
  void initState() {
    super.initState();
    futureUsers = ApiService.fetchUsers();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User List')),
      body: FutureBuilder<List<User>>(
        future: futureUsers,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return Center(child: Text('No users found'));
          }
          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              User user = snapshot.data![index];
              return ListTile(
                title: Text(user.name),
                subtitle: Text(user.email),
              );
            },
          );
        },
      ),
    );
  }
}

Penjelasan Kode

Menggunakan paket http untuk melakukan request HTTP ke API eksternal.
Membuat model User yang merepresentasikan data dari API.
Membuat ApiService.fetchUsers() untuk mengambil data dari API.
Menggunakan FutureBuilder untuk menampilkan data setelah request selesai.
Menampilkan data dalam bentuk ListView agar lebih mudah dibaca.

Kesimpulan
Dengan menggunakan paket http, kita dapat dengan mudah mengintegrasikan API ke dalam aplikasi Flutter. Model data membantu dalam mengonversi JSON menjadi objek Dart yang lebih mudah digunakan. Penggunaan FutureBuildermemungkinkan kita untuk menangani data asynchronous secara efisien.
Dengan contoh ini, Anda dapat memperluas dan menyesuaikan API lain sesuai dengan kebutuhan aplikasi Kalian.