Como crear un Cupertino ActionSheet en Flutter

Una de las mejores funcionalidades que nos proporciona Flutter es la de poder utilizar componentes visuales que se asemejan totalmente a los componentes visuales que poseen los sistemas operativos nativos con los que se puede desarrollar en este framework.

Es decir, si creamos una aplicación con Flutter que sea compatible con Android y IOS podemos hacer que las vistas que interactúan con el usuario luzcan igual que si estuviesen realizadas con los SDKs nativos respectivos de cada plataformas.

Uno de estos componentes “nativos” es el <a href="https://api.flutter.dev/flutter/cupertino/CupertinoActionSheet-class.html" target="_blank" rel="noreferrer noopener">CupertinoActionSheet</a>, que nos permite hacer una lista de opciones con la apariencia que se puede ver en la captura que acompaña este post.

Este tipo de listas es bastante habitual encontrarla en las aplicaciones IOS y gracias a Flutter y su librería Cupertino de Widgets podemos hacerlo en nuestros desarrollos en Flutter.

Creando un Cupertino ActionSheet

La creación de este tipo de widget es bastante fácil y podríamos descomponerlo en dos partes:

  • 1.- Creación de propiamente hablando del Cupertino ActionSheet.
Widget _buildCupertinoActionSheet(BuildContext context) {
 return CupertinoActionSheet(
   title: Text("¿Te gustan las publicaciones de Compilación Movil?"), //1
   actions: [ //2
     _buildActionSheet(context, _options[0]),
     _buildActionSheet(context, _options[1]),
     _buildActionSheet(context, _options[2])
   ],
   cancelButton: CupertinoActionSheetAction( //3
       isDestructiveAction: true,
       onPressed: () {
         _dismiss(context);
       },
       child: Text("Cancelar")),
 );
}

//1 – En la primera línea lo que hacemos es setear el título que mostraremos en la parte superior del listado de opciones.

//2 – Construimos un array con todas las opciones de nuestra lista. Cada una de estas opciones es un CupertinoActionSheetAction

Este tipo de widget, CupertinoActionSheetAction, requiere una serie de parámetros tales como:

  • isDestructiveAction: Un booleano donde indicamos si es un botón normal o de tipo destructivo. En este segundo caso, el texto aparecerá en rojo, de lo contrario aparecerá con un estilo normal.
  • child: Aquí podemos añadir el widget que queramos, lo habitual es añadir un texto o un icono junto a un texto.
  • onPressed: Aquí tendremos que setear una acción a realizar cuando se pulse la opción de la lista.

//3 – la opción de cancelButton no da la oportunidad de añadir a nuestra lista de opciones, una opción más al final de todas mediante la cual el usuario puede cerrar este ActionSheet sin seleccionar ninguna de las opciones disponibles.

  • 2.- Mostrar un popup con el ActionSheet
showCupertinoModalPopup(
   context: context,
   builder: (context) => _buildCupertinoActionSheet(context));

Para mostrar el CupertinoActionSheet tenemos que llamar al método showCupertinoModalPopup donde en el builder debemos de pasarle el CupertinoActionSheet antes creado.

Y nada más, con esto tendremos listo nuestro CupertinoActionSheetAction.

El código lo tenéis como siempre en Github.

Comparte si lo consideras interesante
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.