WillPopScope es un widget en Flutter que permite controlar el comportamiento cuando un usuario presiona el botón de retroceso en un dispositivo móvil. Es especialmente útil cuando se desea realizar una acción personalizada en lugar de simplemente cerrar la aplicación por completo. Por ejemplo, puedes utilizar WillPopScope para mostrar un diálogo de confirmación antes de que el usuario abandone una pantalla o para realizar alguna otra acción específica.
Al utilizar el widget WillPopScope, debes proporcionar un parámetro onWillPop que es una función que devuelve un Future<bool>. Este método se invoca automáticamente cuando el usuario presiona el botón de retroceso. Si la función devuelve true, la aplicación se cerrará, mientras que devuelve false, la navegación se detendrá y no se cerrará la aplicación.
Por ejemplo, podrías utilizar WillPopScope para mostrar un diálogo de confirmación antes de que el usuario abandone una pantalla. Aquí hay un ejemplo de cómo esto podría verse en el código:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Mi pantalla"),
),
body: WillPopScope(
onWillPop: () async {
bool confirm = await showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("¿Desea salir de esta pantalla?"),
actions: <Widget>[
FlatButton(
onPressed: () => Navigator.of(context).pop(false),
child: Text("No"),
),
FlatButton(
onPressed: () => Navigator.of(context).pop(true),
child: Text("Sí"),
),
],
);
},
);
return confirm;
},
child: Text("Contenido de mi pantalla..."),
),
);
}En este ejemplo, el método onWillPop muestra un diálogo de confirmación con dos botones. Si el usuario selecciona "No", el diálogo se cierra y la aplicación permanece en la misma pantalla. Si el usuario selecciona "Sí", el diálogo se cierra y la aplicación regresa a la pantalla anterior. Siempre que se devuelve un valor booleano del método onWillPop, el WillPopScope tomará la decisión de navegar o cerrar la aplicación.
Cuando desde la ruta hacemos un back para volver a la página anterior, en Flutter es probable que requieras mostrar alguna advertencia previa para evitar que el usuario pierda alguna información allí importante en la cual trabajaba el usuario. Esto es muy fácil de hacer en Flutter empleando un widget que nos permite interceptar en este tipo de comportamientos; el mismo se conoce como WillPopScope y funciona de la siguiente manera.
Widget WillPopScope en la práctica
Emplear este widget es muy sencillo, solamente lo tenemos que colocar de nivel superior en nuestro árbol de widget y el que teníamos de nivel superior lo indicamos directamente en la propiedad child de este widget.
Antes de WillPopScope:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Guardar"),
),
body: Container(
child: _buildForm(note),
),
);
}
Después de WillPopScope:
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: _onWillPopScope,
child: Scaffold(
appBar: AppBar(
title: Text("Guardar"),
),
body: Container(
child: _buildForm(note),
),
),
);
}
Como puedes ver, simplemente embebemos al widget superior o padre de nuestra página con el WillPopScope y listo; este fragmento de código es parte de mi curso gratis en Flutter en YouTube:
Propiedad onWillPop para definir el comportamiento al hacer el back
Finalmente, tenemos que definir otra propiedad más, que viene siendo realmente una función la cual devuelve un Future de tipo booleano.
Esto es excelente ya que podemos emplearla para hacer lo que vamos a hacer con este widget en el 99.9 por ciento de los casos que sería, construir un Diálogo:
WillPopScope(onWillPop: _onWillPopScope, child: _buildForm(note)),La función de _buildForm puede ser cualquier cosa que retorne un widget o un árbol de widget; básicamente sería nuestra página en Flutter; en nuestro caso es un formulario siguiendo con el desarrollo que hacemos en nuestro mini curso de Flutter en YouTube.
Future<bool> _onWillPopScope() {
return showDialog<bool>(
context: context,
child: AlertDialog(
title: Text("¿Seguro que quieres regresar a la página anterior?"),
content: Text('Tiene data sin guardar'),
actions: [
FlatButton(
onPressed: () => Navigator.of(context).pop(false), child: Text("No"),),
FlatButton(
onPressed: () => Navigator.of(context).pop(true), child: Text("Si"),)
],
));
}
}
Allí construimos un diálogo de ejemplo, que se va a mostrar cuando demos un click ya sea el la barra o en el botón de back o retroceso:
Lo más interesante esto, es que creamos un proceso que se va a ejecutar cuando intentemos caer el back o retroceso en una app en Flutter; ya sea mediante el botón de back de Android o por el icono en el toolbar.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter