Menggunakan HTTP Package untuk Fetch Data dari API di Flutter

Thu, April 2025 22:18:46

Flutter menyediakan paket http untuk mengambil data dari API. Berikut langkah-langkahnya:

1. Instalasi Paket HTTP

Tambahkan dependensi http pada pubspec.yaml:

dependencies:
  http: ^0.13.6

Lalu jalankan flutter pub get untuk menginstal paketnya.

2. Membuat Model Data

Misalnya, kita ingin mengambil daftar pengguna dari API JSONPlaceholder:

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

3. Fetch Data dari API

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

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

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

4. Menampilkan Data dalam UI

import 'package:flutter/material.dart';

class UserScreen extends StatefulWidget {
  @override
  _UserScreenState createState() => _UserScreenState();
}

class _UserScreenState extends State<UserScreen> {
  late Future<List<User>> futureUsers;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Users')),
      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) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(snapshot.data![index].name),
                  subtitle: Text(snapshot.data![index].email),
                );
              },
            );
          } else {
            return Center(child: Text('No data available'));
          }
        },
      ),
    );
  }
}

CRUD Firebase Firestore di Flutter

Firestore adalah database NoSQL dari Firebase yang sering digunakan dalam aplikasi Flutter.

1. Instalasi Firebase

Tambahkan dependensi berikut ke pubspec.yaml:

dependencies:
  firebase_core: latest_version
  cloud_firestore: latest_version

Konfigurasi Firebase menggunakan FlutterFire CLI.

2. Konfigurasi Firebase

Tambahkan kode berikut di main.dart:

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

3. Operasi CRUD dengan Firestore

Menambahkan Data

import 'package:cloud_firestore/cloud_firestore.dart';

void addUser(String name, String email) {
  FirebaseFirestore.instance.collection('users').add({
    'name': name,
    'email': email,
  });
}

Mengambil Data

Stream<List<Map<String, dynamic>>> getUsers() {
  return FirebaseFirestore.instance.collection('users').snapshots().map(
      (snapshot) =>
          snapshot.docs.map((doc) => doc.data()).toList());
}

Mengupdate Data

void updateUser(String userId, String newName) {
  FirebaseFirestore.instance
      .collection('users')
      .doc(userId)
      .update({'name': newName});
}

Menghapus Data

void deleteUser(String userId) {
  FirebaseFirestore.instance.collection('users').doc(userId).delete();
}

Menyimpan Data Lokal di Flutter dengan SharedPreferences dan Hive

SharedPreferences (Penyimpanan Key-Value Sederhana)

Instalasi Tambahkan di pubspec.yaml:

dependencies:
  shared_preferences: latest_version

Simpan dan Ambil Data

import 'package:shared_preferences/shared_preferences.dart';

Future<void> saveData(String key, String value) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.setString(key, value);
}

Future<String?> getData(String key) async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  return prefs.getString(key);
}

Hive (Database Lokal NoSQL, Lebih Cepat dari SharedPreferences)

Instalasi Tambahkan di pubspec.yaml:

dependencies:
  hive: latest_version
  hive_flutter: latest_version

dev_dependencies:
  hive_generator: latest_version
  build_runner: latest_version

Konfigurasi Hive

import 'package:hive_flutter/hive_flutter.dart';

void main() async {
  await Hive.initFlutter();
  await Hive.openBox('myBox');
  runApp(MyApp());
}

Menyimpan dan Mengambil Data

var box = Hive.box('myBox');

// Simpan data
box.put('username', 'JohnDoe');

// Ambil data
String username = box.get('username', defaultValue: 'Guest');
print(username);

Kesimpulan

• http digunakan untuk mengambil data dari API.
• Firestore cocok untuk aplikasi yang membutuhkan penyimpanan database real-time.
• SharedPreferences berguna untuk penyimpanan ringan, sedangkan Hive lebih optimal untuk penyimpanan data model dalam jumlah besar.

Mana yang ingin Anda bahas lebih dalam? 😊