User Interaction – Menggunakan SnackBar

Masih menggunakan contoh project shopping app sebelumnya, kita akan bahas penggunaan SnackBar.

SnackBar adalah bar notifikasi yang tampil dibagian bawah aplikasi. Selain notifikasi, dapat juga ditambahkan action. SnackBar harus digunakan didalam widget dimana parentnya adalah Widget Scaffold.

Untuk lebih jelasnya, kita akan tampilkan SnackBar pada saat user menambahkan produk kedalam cart. Kita tampilkan bahwa product sudah ditambahkan, serta ada link yang dapat ditap untuk membatalkan penambahan. File yang digunakan adalah product_item.dart

Scaffold.of(context).hideCurrentSnackBar();
Scaffold.of(context).showSnackBar(
  SnackBar(
    content: Text('Product added to cart'),
    duration: Duration(seconds: 2),
    action: SnackBarAction(
        label: 'UNDO',
        onPressed: () {
          cart.undoAddProd(product.id);
        }),
  ),
);

Pada file cart_provider, kita tambahkan method untuk melakukan proses membatalkan penambahan product. Ada 3 kondisi yang akan diperiksa, jika produk tidak ada maka fungsi tidak melakukan tindakan. Jika qty dari produk <= 1, maka product dibuang dari cart. Dan jika qty dari produk > 1, maka qty akan dikurangi 1.

void undoAddProd(String pid) {
  if (!_cartItem.containsKey(pid)) {
    return;
  }
  if (_cartItem[pid].qty <= 1) {
    _cartItem.remove(pid);
  } else {
    _cartItem.update(
        pid,
        (crt) => CartItem(
            id: crt.id,
            title: crt.title,
            price: crt.price,
            qty: crt.qty - 1));
  }
  notifyListeners();
}

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

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

class ProductItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final product = Provider.of<Product>(context, listen: false);
    final cart = Provider.of<Cart>(context);

    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: () {
              cart.addItem(product.id, product.title, product.price);
              Scaffold.of(context).hideCurrentSnackBar();
              Scaffold.of(context).showSnackBar(
                SnackBar(
                  content: Text('Product added to cart'),
                  duration: Duration(seconds: 2),
                  action: SnackBarAction(
                      label: 'UNDO',
                      onPressed: () {
                        cart.undoAddProd(product.id);
                      }),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

import 'package:flutter/foundation.dart';

class CartItem {
  final String id;
  final String title;
  final double price;
  final int qty;

  CartItem({
    @required this.id,
    @required this.title,
    @required this.price,
    @required this.qty,
  });
}

class Cart with ChangeNotifier {
  Map<String, CartItem> _cartItem = {};

  Map<String, CartItem> get cartItem {
    return {..._cartItem};
  }

  int get totalItem {
    return _cartItem.length;
  }

  double get totalAmount {
    var total = 0.0;
    _cartItem.forEach((key, value) {
      total += value.price * value.qty;
    });
    return total;
  }

  void addItem(String pid, String title, double price) {
    if (_cartItem.containsKey(pid)) {
      _cartItem.update(
          pid,
          (ccart) => CartItem(
              id: ccart.id,
              title: ccart.title,
              price: ccart.price,
              qty: ccart.qty + 1));
    } else {
      _cartItem.putIfAbsent(
          pid,
          () => CartItem(
              id: DateTime.now().toString(),
              title: title,
              price: price,
              qty: 1));
    }
    notifyListeners();
  }

  void undoAddProd(String pid) {
    if (!_cartItem.containsKey(pid)) {
      return;
    }
    if (_cartItem[pid].qty <= 1) {
      _cartItem.remove(pid);
    } else {
      _cartItem.update(
          pid,
          (crt) => CartItem(
              id: crt.id,
              title: crt.title,
              price: crt.price,
              qty: crt.qty - 1));
    }
    notifyListeners();
  }
}

Kesimpulan

Dengan menambahkan snackbar, aplikasi akan lebih interaktif. User mengetahui bahwa produk sedang ditambahkan, dan dapat melakukan pembatalan. Pendekatan sederhana yang menambah kaya user experience.