Solución:
Puedes probar y jugar con este Código: Caja de verificación redonda
bool _value = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Circle CheckBox"),
),
body: Center(
child: InkWell(
onTap: () {
setState(() {
_value = !_value;
});
},
child: Container(
decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
child: Padding(
padding: const EdgeInsets.all(10.0),
child: _value
? Icon(
Icons.check,
size: 30.0,
color: Colors.white,
)
: Icon(
Icons.check_box_outline_blank,
size: 30.0,
color: Colors.blue,
),
),
),
)),
);
}
Copie el código de Material Checkbox y cree su nuevo widget Checkbox.
En este widget cambia la variable const Radius _kEdgeRadius = Radius.circular(1.0)
para Radius.circular(100)
.
Hay un paquete simple que puede agregar que mantiene la funcionalidad y la animación de la casilla de verificación: https://pub.dev/packages/circular_check_box
Implementación después de instalar e importar el paquete:
CircularCheckBox(
value: someBooleanValue,
materialTapTargetSize: MaterialTapTargetSize.padded,
onChanged: (bool x) {
someBooleanValue = !someBooleanValue;
}
),
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)