Saltar al contenido

¿Cómo crear un CheckBox redondo en Flutter? ¿O cambiar el estilo de CheckBox, como la imagen seleccionada en Flutter?

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).

ingrese la descripción de la imagen aquí

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)



Utiliza Nuestro Buscador

Deja una respuesta

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