¿Para qué sirve el widget Checkbox?
El widget Checkbox en Flutter se utiliza para capturar respuestas de tipo booleano (verdadero/falso, activado/desactivado) en una interfaz de usuario. Permite al usuario seleccionar o deseleccionar opciones, comúnmente en formularios o listas de opciones múltiples.
Por ejemplo, puedes utilizarlo para crear:
- Un formulario de registro: Preguntar al usuario si acepta los términos y condiciones de uso.
- Una lista de tareas: Permitir marcar tareas como completadas o pendientes en una aplicación de gestión de tareas.
- Un sistema de filtros: Seleccionar múltiples filtros para refinar una búsqueda o resultados en una aplicación de comercio electrónico.
- Configuración de notificaciones: Activar o desactivar notificaciones para diferentes tipos de eventos.
- Selección múltiple: Ofrecer la posibilidad de seleccionar varias preferencias en encuestas o cuestionarios.
Implementación de una Checkbox
La Checkbox en Flutter es bastante sencilla de implementar. Solo necesitas crear una variable de tipo booleano, donde almacenarás el estado de la casilla (verdadero/falso, seleccionada/deseleccionada). Cuando el usuario haga clic en la casilla, el estado de esta variable puede cambiarse usando setState().
Ejemplo
El siguiente código muestra cómo implementar una Checkbox en una aplicación de Flutter.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Ejemplo de Checkbox'),
),
body: Center(
child: CheckboxWidget(),
),
),
);
}
}
class CheckboxWidget extends StatefulWidget {
@override
_CheckboxWidgetState createState() => _CheckboxWidgetState();
}
class _CheckboxWidgetState extends State<CheckboxWidget> {
bool isChecked = false;
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Aceptar los términos'),
Checkbox(
value: isChecked,
onChanged: (bool? newValue) {
setState(() {
isChecked = newValue ?? false;
});
},
),
],
);
}
}
En este ejemplo, la propiedad value del Checkbox controla si está seleccionada (true) o no (false). El método onChanged permite reaccionar a los cambios de estado y, cuando se produce un cambio, el valor de isChecked se actualiza con setState.
Propiedades principales para personalizar la Checkbox
Flutter permite personalizar el widget Checkbox a través de varias propiedades. A continuación, te muestro algunas de las más utilizadas.
activeColor
Esta propiedad permite definir el color de la Checkbox cuando está seleccionada:
Checkbox(
value: isChecked,
onChanged: (bool? newValue) {
setState(() {
isChecked = newValue ?? false;
});
},
activeColor: Colors.green, // Color activo personalizado
),checkColor
Permite cambiar el color de la «marca» (el símbolo de validación dentro de la casilla) cuando la Checkbox está seleccionada:
Checkbox(
value: isChecked,
onChanged: (bool? newValue) {
setState(() {
isChecked = newValue ?? false;
});
},
checkColor: Colors.white, // Color de la marca
),shape
La propiedad shape permite modificar la forma de la casilla. Por defecto, es un cuadrado con esquinas rectas, pero puedes personalizarlo utilizando esta propiedad para crear bordes redondeados, formas circulares, etc.:
Checkbox(
value: isChecked,
onChanged: (bool? newValue) {
setState(() {
isChecked = newValue ?? false;
});
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5), // Bordes redondeados
),
),Conclusión
El widget Checkbox es un elemento esencial en cualquier aplicación Flutter, debido a su amplia gama de usos. Ahora sabes cómo gestionar botones y casillas de verificación. Pero, ¿cómo permitir que el usuario ingrese texto? Responderé a esta pregunta en el próximo artículo:
