Introducción

Cuando los usuarios usan una aplicación Flutter, a menudo presionan el botón de retroceso para volver a la pantalla anterior. Sin embargo, si la pantalla actual no ha guardado sus datos o si hay algún proceso en curso, este botón puede provocar la pérdida de información y la frustración del usuario. Es por eso que es importante mostrar una alerta al presionar el botón de retroceso para evitar estos problemas.

Widget WillPopScope

En Flutter, podemos utilizar la clase WillPopScope para mostrar una alerta cuando el usuario pulsa el botón de retroceso. Esta clase nos permite manejar el evento cuando el usuario intenta retroceder y tomar una decisión en función de si deseamos mostrar o no la alerta.

Para mostrar una alerta, podemos utilizar el widget showDialog, que nos permite mostrar un cuadro de diálogo con opciones para el usuario. Podemos personalizar el cuadro de diálogo según nuestras necesidades y añadir botones para que el usuario pueda tomar una decisión.

En el código, podemos crear una función para mostrar la alerta y utilizarla en el widget WillPopScope para manejar el evento de retroceso. En la función, podemos crear un cuadro de diálogo personalizado y añadir botones para que el usuario pueda decidir si desea retroceder o quedarse en la pantalla actual.

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime currentBackPressTime;

  Future<bool> _onBackPressed() {
    return showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text('¿Desea salir de la aplicación?'),
            content: Text('Presione "Salir" para salir de la aplicación'),
            actions: <Widget>[
              ElevatedButton(
                onPressed: () => Navigator.of(context).pop(false),
                child: Text('Cancelar'),
              ),
              ElevatedButton(
                onPressed: () => Navigator.of(context).pop(true),
                child: Text('Salir'),
              ),
            ],
          ),
        ) ??
        false;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mostrar alerta al pulsar el botón de retroceso'),
      ),
      body: WillPopScope(
        onWillPop: _onBackPressed,
        child: Center(
          child: Text('Presione el botón de retroceso'),
        ),
      ),
    );
  }
}

En este ejemplo, estamos utilizando la clase WillPopScope para manejar el evento de retroceso. La función _onBackPressed() se ejecutará cuando el usuario presione el botón de retroceso y mostrará una alerta utilizando el widget AlertDialog. La alerta tendrá dos botones, uno para cancelar y otro para salir de la aplicación.

Si el usuario presiona el botón «Salir», la función _onBackPressed() devolverá true, lo que hará que la aplicación cierre. Si el usuario presiona el botón «Cancelar», la función _onBackPressed() devolverá false, lo que hará que la aplicación vuelva a la pantalla actual.

Conclusión

Mostrar una alerta al pulsar el botón de retroceso es una práctica importante en cualquier aplicación Flutter para evitar la pérdida de información y mejorar la experiencia del usuario. Utilizando la clase WillPopScope y el widget showDialog, podemos personalizar fácilmente la alerta y añadir opciones para que el usuario pueda tomar una decisión informada. Implementar esta funcionalidad en nuestras aplicaciones nos asegura de brindar una mejor experiencia para nuestros usuarios y mejorar la calidad de nuestra aplicación.