Usare i Dialog in Flutter

In questo articolo vediamo come usare Dialog in Flutter per farci confermare un'azione da parte dell'utente.

Vediamo come usarlo sia al click su un bottone, sia su un dismissible (quindi quando facciamo lo swipe su una lista).

In entrambi i casi useremo showDialog, che ritorna un Future; ma ci sono alcune differenze dovute al comportamento diverso tra un button e dismissible.

Cominciamo col primo caso:

IconButton(
  icon: const Icon(Icons.delete),
  color: Theme.of(context).errorColor,
  onPressed: () => {
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: const Text('ATTENZIONE?'),
        content: const Text(
          'Sicuro di voler cancellare il libro?',
        ),
        actions: <Widget>[
          TextButton(
            child: const Text('No'),
            onPressed: () {
              Navigator.of(context).pop(false);
            },
          ),
          TextButton(
            child: const Text('Yes'),
            onPressed: () {
              Navigator.of(context).pop(true);
            },
          ),
        ],
      ),
    ).then(
      (value) => {
        if (value)
          {
            _del(),
          },
      },
    ),
  },
),

Come vedete, usiamo then per andare a verificare cosa viene cliccato dall'utente.

Nel caso sia cliccato il tasto di conferma, allora eseguiamo l'operazione.

La scelta viene verificata dalla funzione pop di Navigator.

Per quanto riguarda invece il secondo esempio:

confirmDismiss: (direction) {
  return showDialog(
    context: context,
    builder: (ctx) => AlertDialog(
      title: const Text('ATTENZIONE?'),
      content: const Text(
        'Sicuro di voler cancellare il libro?',
      ),
      actions: <Widget>[
        TextButton(
          child: const Text('No'),
          onPressed: () {
            Navigator.of(context).pop(false);
          },
        ),
        TextButton(
          child: const Text('Yes'),
          onPressed: () {
            Navigator.of(context).pop(true);
          },
        ),
      ],
    ),
  );
},

Enjoy!