State Management Part 1

Sampai sejauh ini, bila memerlukan data pada widget berikutnya, kita melakukan passing parameter melalui constructor. Pendekatan ini cocok untuk aplikasi sederhana, jika aplikasi sudah terlalu besar, kita akan kesulitan untuk keep track.

Untuk aplikasi yang kompleks, pendekatan state management lebih tepat. Untuk menggunakan state management, kita perlu tambahkan package provider pada pubsec.yaml.

Pada contoh digunakan versi 4.3.1 keatas. Untuk informasi instalasi terbaru silakan kunjungi https://pub.dev/packages/provider

dependencies:
  flutter:
    sdk: flutter
  provider: ^4.3.1

Untuk menjelaskan state management, kita akan buat aplikasi shopping sederhana. Dimana kita akan list product dalam bentuk grid. Product dapat kita tandai favorite atau tidak. Jika produk di tap, aplikasi akan menampilkan info detail dari produk.

JIka Anda tidak ingin mengetik code pada tutorial, silakan download file tutorial final di https://drive.google.com/file/d/19fb3OSOFLTP9FcaR–6sgRiCqbeuBuII/view?usp=sharing

Pertama buat model dari produk, buat file product.dart, dengan code dibawah. Model dari product.dat akan digunakan untuk membuat data dummy.

Pada class Product digunakan mixin ChangeNotifier. Ini berguna agar kita dapat melakukan state management.

method toggleFav() adalah method yang nanti akan digunakan pada tutorial ini untuk mengubah status favorite suatu produk.

Perhatian untuk memberikan notifikasi pada listener gunakan perintah notifyListener(). Dengan ini listener tahu bahwa ada perubahan data, hingga method build akan dipanggil ulang.

//file product.dart

import 'package:flutter/foundation.dart';

class Product with ChangeNotifier {
  final String id;
  final String title;
  final String desc;
  final double price;
  final String imgURL;
  bool isFav;

  Product(
      {@required this.id,
      @required this.title,
      @required this.desc,
      @required this.price,
      @required this.imgURL,
      this.isFav = false});

  void toggleFav() {
    isFav = !isFav;
    notifyListeners();
  }
}

Kita juga akan membuat provider untuk menangani data produk secara masal. Disini kita akan membuat data dummy, membuat method untuk mengembalikan seluruh data product dan mencari product berdasar id.

// untuk mengembalikan seluruh data product
List<Product> get productsList {
  return [..._products];
}

// untuk mengembalikan prodcut berdasarkan id tertentu
Product findById(String pid) {
  return _products.firstWhere((el) => el.id == pid);
}

//file products_provider.dart

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

class ProductsProvider with ChangeNotifier {
  List<Product> _products = [
    Product(
      id: 'p1',
      title: 'Red Shirt',
      desc: 'A red shirt - it is pretty red!',
      price: 29.99,
      imgURL:
          'https://cdn.pixabay.com/photo/2020/05/07/07/25/woman-5140454_960_720.jpg',
    ),
    Product(
      id: 'p2',
      title: 'Sport Wear',
      desc: 'A good sport',
      price: 59.99,
      imgURL:
          'https://cdn.pixabay.com/photo/2017/12/17/08/01/asia-3023824_960_720.jpg',
    ),
    Product(
      id: 'p3',
      title: 'MackBook',
      desc: 'MacBook not Surface',
      price: 1000.99,
      imgURL:
          'https://cdn.pixabay.com/photo/2014/05/02/21/47/workstation-336369_960_720.jpg',
    ),
    Product(
      id: 'p4',
      title: 'Royal Enfield',
      desc: 'Born to ride..',
      price: 3049.99,
      imgURL:
          'https://cdn.pixabay.com/photo/2015/08/27/09/06/bike-909690_960_720.jpg',
    ),
  ];

  List<Product> get productsList {
    return [..._products];
  }

  Product findById(String pid) {
    return _products.firstWhere((el) => el.id == pid);
  }

  void addProduct() {
    //_products.add('a');
    notifyListeners();
  }
}

Pada modul berikutnya kita akan bahas penerapannya pada widget.