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:
Konsep State Management dengan Provider
Integrasi API menggunakan HTTP/Dio
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
MultiProvideruntuk 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
- Buat
TodoProvideruntuk mengelola state
- Gunakan Dio untuk fetch data dari
jsonplaceholder.typicode.com/todos
- 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
Gunakan Provider untuk state management sederhana
Pilih Dio jika butuh fitur advanced (interceptors, cancel request)
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! 🚀