En este artículo veremos otros tipos de botones de acción que tiene Material para Flutter, en esta ocasión los widgets IconButton y SegmentedButton.
IconButton
Un botón de ícono, básicamente es una imagen dentro de un widget que ejecuta una acción al ser presionada. Su uso común es en las acciones de los AppBar, pero se puede usar en otras partes de ser requerido.
Características y recomendaciones
- Seleccionar un ícono que sea acorde a la acción que va a representar.
- Utilizar íconos sin relleno inicial y al ser seleccionados cambiar a su versión con relleno.
- Al pasar el mouse por encima del ícono mostrar información sobre la acción que representa más no el nombre del ícono.
Estilos de botones
- Filled icon button: es un botón con un contenedor circular de fondo y un ícono en medio relleno.
- Filled tonal icon button: es un botón con un contenedor circular de fondo y un ícono con un color y tono de relleno.
- Outlined icon button: Es un ícono con un contenedor circular de fondo con borde y el ícono delineado.
- Standard icon button: Es un ícono que no muestra el contenedor de fondo circular como los demás.
Propiedades
- emptySelectionAllowed: propiedad de tipo bool, si es true, permite no tener segmentos u opciones seleccionadas, si es false, debe tener al menos una opción seleccionada.
- multiSelectionEnabled: propiedad de tipo bool, si es true, permite seleccionar varias opciones. Si es false, solo permite seleccionar una opción.
- onSelectionChanged: propiedad de tipo Function, que se ejecuta cuando se selecciona un segmento.
- segments: propiedad obligatoria donde van los segmentos.
- selected: propiedad que contiene el valor seleccionado.
SegmentedButton
Los botones segmentados ayudan a que el usuario pueda seleccionar varias opciones dentro de un botón. Se pueden agregar ícono en la parte izquierda seguido de un texto, cuando se selecciona alguna de las opciones el ícono cambia a un ícono de comprobación (√) para indicar la opción seleccionada. Es muy útil para ordenar listas por medio de filtros, también como especies de pestañas para cambiar de vistas.
Hay dos tipos de SegmentedButton:
- Los de selección única, son los que se pueden seleccionar una única opción de varias que podríamos tener. Por ejemplo, una talla de camiseta (S, M, L, etc).
- Los de selección múltiple, son los que se pueden seleccionar varias opciones. Por ejemplo, filtros para tipos de transporte, donde se puedan combinar varias opciones, dependiendo de lo que queramos filtrar.
Otras características
- Se pueden usar íconos solos o acompañados de un texto.
- Cuando se utilice un ícono son texto es importante que sea un ícono que comunique su representación.
- Los botones segmentados pueden tener de 2 a 5 opciones o segmentos.
Constructores
- IconButton: constructor por defecto.
- IconButton.filled: constructor para botón con relleno.
- IconButton.filledTonal: constructor para botón con relleno y tonal.
- IconButton.outlined: constructor para botón con delineado.
Propiedades
- alignment: propiedad para definir dónde colocar el ícono dentro de IconButton.
- autofocus: propiedad de tipo bool, en caso de ser true, el foco estará en este botón.
- color: propiedad donde se puede colocar el color que tendrá el ícono dentro del botón.
- icon: propiedad donde va el ícono que se mostrará dentro del botón.
- iconSize: propiedad para el tamaño que tendrá el ícono dentro del botón.
- onPressed: propiedad que se ejecuta cuando se presiona el botón.
- padding: propiedad donde va el relleno alrededor del ícono.
- tooltip: propiedad donde va la descripción de la acción del botón.
Ejemplo
Código fuente: https://github.com/jaimetellezb/flutter_widgets_app
Conclusión
En conclusión, tenemos un par de opciones para elegir tipos de botones para íconos y selección múltiple que nos brinda Material como widgets en Flutter.
¡¡¡Gracias por leer este artículo!!!