Pendahuluan

Dalam membuat aplikasi modern, kita sering butuh data dari internet. Misalnya: aplikasi cuaca, berita, atau e-commerce. Nah, agar aplikasi Flutter bisa berkomunikasi dengan server, kita perlu menggunakan API (Application Programming Interface).

Apa itu API?

API adalah jembatan komunikasi antara aplikasi dengan server.

• API biasanya mengembalikan data dalam format JSON.
• Contoh API publik:
  • https://jsonplaceholder.typicode.com/users
  • https://jsonplaceholder.typicode.com/posts

Jika kita akses URL di atas, kita akan mendapat data JSON yang bisa dipakai di aplikasi Flutter.

Mengapa Flutter Butuh API?

Karena aplikasi tanpa API hanya menampilkan data statis. Dengan API, aplikasi:

• Bisa menampilkan data real-time.
• Bisa membaca data dari server.
• Bisa mengirim data (POST) ke server.

Persiapan Project Flutter

1. Buat project baru:

flutter create flutter_api_app
cd flutter_api_app

Menambahkan Dependency HTTP

Flutter tidak bisa ambil data internet langsung, jadi kita perlu library http.

Edit file pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.6

Lalu jalankan:

flutter pub get

Membuat Model Data

Misalnya kita ingin ambil data users dari JSON Placeholder. JSON-nya seperti ini.

{
  "id": 1,
  "name": "Leanne Graham",
  "email": "Sincere@april.biz"
}

Kita buat model user.dart:

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'],
    );
  }
}

Mengambil Data dari API

Buat file api_service.dart:

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'user.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 jsonResponse = json.decode(response.body);
      return jsonResponse.map((data) => User.fromJson(data)).toList();
    } else {
      throw Exception("Gagal mengambil data");
    }
  }
}

Menampilkan Data JSON ke Flutter

Sekarang kita tampilkan data ke UI. Buka main.dart:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter API Demo",
      home: UserPage(),
    );
  }
}

class UserPage extends StatefulWidget {
  @override
  _UserPageState createState() => _UserPageState();
}

class _UserPageState extends State<UserPage> {
  late Future<List<User>> futureUsers;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Daftar User")),
      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("Data kosong"));
          } else {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                final user = snapshot.data![index];
                return ListTile(
                  leading: CircleAvatar(child: Text(user.id.toString())),
                  title: Text(user.name),
                  subtitle: Text(user.email),
                );
              },
            );
          }
        },
      ),
    );
  }
}

Contoh Project Sederhana

Dengan kode di atas, aplikasi Flutter akan menampilkan daftar user yang diambil langsung dari internet (API JSON Placeholder).
Tampilannya berupa ListView dengan nama dan email setiap user.

Kesimpulan

• API adalah cara aplikasi berkomunikasi dengan server.
• Flutter bisa mengambil data API dengan http package.
• Gunakan FutureBuilder untuk menampilkan data yang datang dari internet.
• Project contoh di atas menampilkan daftar user dari API publik.