User Interaction – AlertDialog

Agar aplikasi lebih interaktif, kita dapat menggunakan AlertDialog. AlertDialog adalah widget yang akan ditampilkan modal dan dapat kita program untuk menerima input dari user.

Untuk lebih jelas, pada cart_content.dart, kita akan tambahkan AlertDialog untuk meminta konfirmasi dari user saat melakukan penghapusan product dari cart.

Widget Dismissible memiliki property confirmDismiss yang akan kita isi perintah showDialog yang akan menampilkan widget AlertDialog..

AlertDialog memiliki beberapa property penting

• title: untuk menampilkan Judul dari dialog box.
• content: untuk manampilkan isi dari dialog box.
• actions: diisi dengan widget yang digunakan untuk menerima input user, pada contoh digunakan FlatButton.

Untuk FlatButton, terdapat 2 FlatButton yes dan no. Yang masing-masing akan mengembalikan nilai true dan false.

confirmDismiss: (direction) {
  return showDialog(
    context: context,
    builder: (ctx) => AlertDialog(
      title: Text('Delete Product'),
      content: Text('Are you sure?'),
      actions: <Widget>[
        FlatButton(
            onPressed: () => Navigator.of(ctx).pop(false),
            child: Text('No')),
        FlatButton(
            onPressed: () => Navigator.of(ctx).pop(true),
            child: Text('Yes')),
      ],
    ),
  );
},

//cart_content.dart

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

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

class CartContent extends StatelessWidget {
  final String id;
  final String pid;
  final String title;
  final int qty;
  final double prc;

  CartContent(this.id, this.pid, this.title, this.prc, this.qty);

  @override
  Widget build(BuildContext context) {
    return Dismissible(
      key: ValueKey(id),
      background: Container(
        color: Theme.of(context).errorColor,
        child: Icon(
          Icons.delete,
          color: Colors.white,
        ),
        alignment: Alignment.centerRight,
        padding: EdgeInsets.only(right: 20),
        margin: EdgeInsets.symmetric(horizontal: 5, vertical: 7),
      ),
      direction: DismissDirection.endToStart,
      confirmDismiss: (direction) {
        return showDialog(
          context: context,
          builder: (ctx) => AlertDialog(
            title: Text('Delete Product'),
            content: Text('Are you sure?'),
            actions: <Widget>[
              FlatButton(
                  onPressed: () => Navigator.of(ctx).pop(false),
                  child: Text('No')),
              FlatButton(
                  onPressed: () => Navigator.of(ctx).pop(true),
                  child: Text('Yes')),
            ],
          ),
        );
      },
      onDismissed: (direction) {
        Provider.of<Cart>(context, listen: false).removeCartProduct(pid);
      },
      child: Card(
        margin: EdgeInsets.symmetric(horizontal: 5, vertical: 7),
        child: Padding(
          padding: EdgeInsets.all(8),
          child: ListTile(
            leading: CircleAvatar(child: FittedBox(child: Text('\$$prc'))),
            title: Text(title),
            subtitle: Text('Total: \$${prc * qty}'),
            trailing: Text('\$$qty x'),
          ),
        ),
      ),
    );
  }
}