State Management Part 4

Selain menggunakan provider, state management juga dapat dilakukan dengan menggunakan Consumer widget. Consumer widget cocok digunakan saat hanya bagian widget tertentu saja yang akan direbuild.

Untuk contoh, kita gunakan file product_item.dart, dimana kita akan hanya melakukan rebuild pada widget button favorite dan Provider property listen diset ke false.

Dengan pendekatan ini, widget hanya akan direbuild untuk IconButton untuk menampilkan favorite button. Sementara widget yang lainnya tidak akan direbuild.

property child dapat digunakan jika dalam widget yang di wrap oleh widget consumer ada widget atau data yang tidak perlu direbuild.

...
...
Widget build(BuildContext context) {
  final product = Provider.of<Product>(context, listen: false);
  return ClipRRect(
...
...
...
leading: Consumer<Product>(
  builder: (ctx, product, child) => IconButton(
    icon: Icon(
      product.isFav ? Icons.favorite : Icons.favorite_border,
      color: Theme.of(context).accentColor,
    ),
    onPressed: () {
      product.toggleFav();
    },
  ),
  child: Text('Digunakan untuk data yang tidak berubah'),
),
...
...
...

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

import './product_detail_scr.dart';
import '../models/product.dart';

class ProductItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final product = Provider.of<Product>(context, listen: false);
    return ClipRRect(
      borderRadius: BorderRadius.circular(4),
      child: GridTile(
        child: GestureDetector(
          onTap: () {
            Navigator.of(context)
                .pushNamed(ProductDetailScr.routeNm, arguments: product.id);
          },
          child: Image.network(
            product.imgURL,
            fit: BoxFit.cover,
          ),
        ),
        footer: GridTileBar(
          backgroundColor: Colors.black54,
          leading: Consumer<Product>(
            builder: (ctx, product, child) => IconButton(
              icon: Icon(
                product.isFav ? Icons.favorite : Icons.favorite_border,
                color: Theme.of(context).accentColor,
              ),
              onPressed: () {
                product.toggleFav();
              },
            ),
            child: Text('Tidak Berubah'),
          ),
          title: Text(product.title),
          trailing: IconButton(
            icon: Icon(
              Icons.add_shopping_cart,
              color: Theme.of(context).accentColor,
            ),
            onPressed: null,
          ),
        ),
      ),
    );
  }
}

Selain dengan cara diatas, kita pun dapat melakukan pendekatan dengan memisahkan widget button favorite ke file widget terpisah dan melakukan listening terhadap provider.