Pendahuluan

Pengembangan aplikasi mobile modern membutuhkan manajemen state yang efisien dan kemampuan untuk berkomunikasi dengan API eksternal. Pada pertemuan ke-4 praktikum Flutter ini, kita akan mendalami:

  1. Konsep State Management dengan Provider
  2. Integrasi API menggunakan HTTP/Dio
  3. Arsitektur Clean untuk skalabilitas

Bagian 1: State Management dengan Provider

Apa Itu State Management?

State adalah data yang dapat berubah selama runtime aplikasi. Tanpa manajemen yang baik, aplikasi menjadi:

  • Sulit di-debug
  • Tidak skalabel
  • Rentan performance issues

Provider: Solusi State Management Sederhana

Provider adalah wrapper di atas InheritedWidget yang menyediakan:

✔️ Mudah digunakan

✔️ Reaktivitas otomatis (dengan notifyListeners())

✔️ Dukungan untuk dependency injection

Implementasi Dasar 

class CounterProvider with ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // Memberi tahu widget untuk rebuild
  }
}

Cara Menggunakan di UI 

Consumer<CounterProvider>(
  builder: (context, provider, child) {
    return Text('${provider.count}');
  },
)

Best Practice:

  • Gunakan MultiProvider untuk banyak state
  • Pisahkan logika bisnis dari UI

Bagian 2: Integrasi API dengan HTTP/Dio

HTTP vs Dio: Mana yang Lebih Baik?

Fitur http Package dio Package
GET/POST ✔️ ✔️
Error Handling Dasar Lengkap
Interceptors ❌ ✔️
File Upload Manual Mudah
Cancel Request ❌ ✔️

Contoh GET Request dengan Dio 

final dio = Dio();
final response = await dio.get('https://api.example.com/users');

if (response.statusCode == 200) {
  return User.fromJson(response.data);
} else {
  throw Exception('Failed to load data');
}

Error Handling yang Robust 

try {
  final response = await dio.get('/users');
} on DioException catch (e) {
  if (e.response?.statusCode == 404) {
    print('Data tidak ditemukan!');
  } else {
    print('Error: ${e.message}');
  }
}

Bagian 3: Arsitektur Clean untuk Aplikasi Flutter

Struktur Folder yang Direkomendasikan 

lib/
├── core/
│   ├── constants/   # Konstanta global
│   └── utils/       # Helper functions
├── data/
│   ├── models/      # Data classes
│   └── repositories # API calls
├── presentation/
│   ├── providers/   # State management
│   └── screens/     # UI
└── main.dart

Keuntungan Arsitektur Ini

✅ Separation of Concerns (UI terpisah dari logika)

✅ Mudah di-test

✅ Skalabel untuk proyek besar

Studi Kasus: Aplikasi Todo dengan API

Langkah Implementasi

  1. Buat TodoProvider untuk mengelola state
  2. Gunakan Dio untuk fetch data dari jsonplaceholder.typicode.com/todos
  3. Tampilkan dalam ListView.builder

Contoh Code 

// 1. Model
class Todo {
  final int id;
  final String title;
  bool completed;

  Todo({required this.id, required this.title, this.completed = false});
}

// 2. Provider
class TodoProvider with ChangeNotifier {
  List<Todo> _todos = [];

  List<Todo> get todos => _todos;

  Future<void> fetchTodos() async {
    final response = await dio.get('/todos');
    _todos = response.data.map((json) => Todo.fromJson(json)).toList();
    notifyListeners();
  }
}

Kesimpulan & Rekomendasi

  1. Gunakan Provider untuk state management sederhana
  2. Pilih Dio jika butuh fitur advanced (interceptors, cancel request)
  3. Terapkan clean architecture sejak dini

"Menguasai state management dan API adalah kunci membangun aplikasi Flutter yang powerful!"

📚 Referensi Lanjutan:

Dengan materi ini, Anda sekarang siap membangun aplikasi Flutter yang terhubung dengan backend! 🚀