Pengenalan State Management Provider

---

Tujuan Pembelajaran

Setelah mengikuti pertemuan ini, siswa mampu:
1. Memahami apa itu state dan mengapa state penting
2. Menjelaskan keterbatasan penggunaan setState
3. Menggunakan Provider sebagai solusi state management
4. Memisahkan logic data dan tampilan (UI)
5. Menulis kode state management yang rapi dan mudah dikembangkan

---

Pertanyaan Pemantik

• Pernahkah kalian membuat aplikasi yang datanya dipakai di banyak halaman?
• Apa yang terjadi jika data tersebut berubah di satu halaman tapi tidak di halaman lain?

---

1. Masalah Nyata dalam Pengelolaan State

State adalah data yang bisa berubah dan memengaruhi tampilan aplikasi.

Contoh state:
- jumlah barang di keranjang
- status login
- data produk

Pada aplikasi kecil, state sering diletakkan langsung di halaman dan diubah dengan setState.

Masalah muncul ketika:
- data dipakai lebih dari satu halaman
- logic mulai banyak
- aplikasi semakin besar

Kalimat penting:

Masalahnya bukan di kodingnya, tapi di di mana data disimpan.

---

2. Studi Kasus Masalah (Tanpa Provider)

Bayangkan:
- jumlah item keranjang (cartCount)
- ditampilkan di Home dan Detail

Jika cartCount disimpan di HomePage:
- Detail tidak tahu perubahan
- data harus dikirim manual
- kode menjadi tidak rapi

Ini tanda bahwa:
- state tidak cocok hidup di halaman
- dibutuhkan tempat khusus untuk menyimpan data

---

3. Kenalan dengan Provider (Solusi)

Provider adalah:
- tempat menyimpan state
- bisa diakses banyak widget
- memberi tahu UI saat data berubah

Provider bukan untuk tampilan, tapi untuk mengelola data.

Perumpamaan:

Provider seperti TU sekolah
data disimpan di satu tempat, bukan di masing-masing kelas

---

4. ChangeNotifier dan notifyListeners

Provider biasanya dipadukan dengan ChangeNotifier.

Makna penting:
- Provider → tempat menyimpan state
- ChangeNotifier → kelas yang menyimpan data dan memberi tahu UI saat data berubah
- notifyListeners() → untuk mentrigger perubahan

---

5. Praktik Inti: Provider Dasar

A. Install Provider

Tambahkan di pubspec.yaml:

dependencies:
  provider: ^6.0.5

Jalankan:

flutter pub get

---

B. Membuat Provider

Buat folder dan file:

lib/
 └── providers/
     └── product_provider.dart

import 'package:flutter/material.dart';
import '../data/dummy_products.dart';
import '../models/product.dart';

class ProductProvider extends ChangeNotifier {
  // Sumber data utama (dummy)
  final List<Product> _allProducts = dummyProducts;

  // State untuk search
  String _query = "";

  String get query => _query;

  // Produk yang sudah ter-filter (hasil yang akan ditampilkan UI)
  List<Product> get products {
    final q = _query.trim().toLowerCase();
    if (q.isEmpty) return _allProducts;

    return _allProducts.where((p) {
      return p.name.toLowerCase().contains(q) ||
          p.category.toLowerCase().contains(q) ||
          p.description.toLowerCase().contains(q);
    }).toList();
  }

  // Update query search
  void setQuery(String value) {
    _query = value;
    notifyListeners();
  }

  // Ambil 1 produk berdasarkan id (untuk Detail)
  Product? getById(String id) {
    for (final p in _allProducts) {
      if (p.id == id) return p;
    }
    return null;
  }
}

Makna penting:
- _allProducts = sumber data
- _query = state search
- products = hasil filter yang siap ditampilkan
- notifyListeners() = memberi tahu UI untuk update

---

C. Daftarkan Provider di main.dart

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (_) => ProductProvider()),
  ],
  child: const MyApp(),
),

Makna:
- ProductProvider tersedia untuk semua halaman
- UI cukup “membaca” dan “memanggil method” dari Provider

---

D. HomePage: Menampilkan Produk dari Provider + Search

File: lib/pages/home_page.dart

•󠁏 Import Provider

Tambahkan:

import 'package:provider/provider.dart';
import '../providers/product_provider.dart';

•󠁏 Search mengubah state di Provider

Pada TextField, ubah onChanged menjadi:

onChanged: (v) {
  context.read<ProductProvider>().setQuery(v);
},

•󠁏 Ambil list produk dari Provider untuk Grid

Saat membuat list/grid, ambil dari Provider:

final filtered = context.watch<ProductProvider>().products;

Lalu gunakan products sebagai sumber data grid.

Makna: - Ketika query berubah, Provider memanggil notifyListeners() - watch() membuat Home otomatis rebuild dengan data yang sudah terfilter

---

E. DetailPage: Ambil Produk Berdasarkan ID dari Provider

File: lib/pages/detail_page.dart

•󠁏 Import Provider

Tambahkan:

import 'package:provider/provider.dart';
import '../providers/product_provider.dart';

•󠁏 Ambil produk dari Provider

Di dalam build():

final product = context.read<ProductProvider>().getById(productId);

Lalu: - Jika product == null, tampilkan pesan “Produk tidak ditemukan” - Jika ada, tampilkan UI detail seperti biasa

Makna: - Detail tidak perlu membawa object besar - Detail cukup membawa id, lalu mengambil data dari sumber pusat (Provider)

---

Refleksi

Hari ini kalian sudah memakai pola yang sama seperti API: - Provider menyimpan data - UI menampilkan data - Search mengubah state - Detail mengambil data berdasarkan id

Saat nanti API: - _allProducts = dummyProducts diganti jadi hasil fetch API - UI tidak perlu dirombak besar

---