Flutter – Widget de casilla de verificación

La casilla de verificación en flutter es un widget de diseño de materiales. Siempre se usa en el Stateful Widget ya que no mantiene un estado propio. Podemos usar su propiedad onChanged para interactuar o modificar otros widgets en la aplicación flutter. Como la mayoría de los otros widgets de flutter, también viene con muchas propiedades como activeColor , checkColor , mouseCursor , etc., para que los desarrolladores tengan control total sobre la apariencia del widget.

Constructor del widget de casilla de verificación:

const Checkbox(
{Key key,
@required bool value,
bool tristate: false,
@required ValueChanged<bool> onChanged,
MouseCursor mouseCursor,
Color activeColor,
Color checkColor,
Color focusColor,
Color hoverColor,
MaterialTapTargetSize materialTapTargetSize,
VisualDensity visualDensity,
FocusNode focusNode,
bool autofocus: false}
)

Propiedades del widget de casilla de verificación:

• activeColor: esta propiedad toma la clase Color como el objeto para completar el ChechBox cuando está marcado.
• enfoque automático: esta propiedad toma un valor booleano como objeto. Si se establece en verdadero, CheckBox se selecciona en el enfoque inicial.
• checkColor:  esta propiedad también toma la clase Color como objeto. Asigna color al icono de verificación.
• focusColor: esta propiedad también toma la clase Color como el objeto para dar color a la casilla de verificación cuando está enfocada.
• focusNode: establece un Node de enfoque adicional para obtener el foco del cursor. Toma FocusNode como el objeto.
• hoverColor: la propiedad hoverColor toma la clase Color como objeto. Controla el color de la casilla de verificación en el momento del desplazamiento.
• materialTapTargetSize: Controla el tamaño del área tocada. Toma la enumeración MaterialTapTargetSize como el objeto.
• mouseCursor: Esto determina el tipo de cursor en el momento del evento del puntero. Contiene la clase MouseCursor como objeto.
• onChanged: ValueChanged<T> typedef es el objeto asignado a esta propiedad. Se llama cuando se debe cambiar el valor en el widget CheckBox .
• tristate: por lo general, la casilla de verificación está marcada o no marcada. Si esta propiedad, que toma un valor booleano como objeto, se establece en verdadero, también se puede establecer en nulo.
• value: esta propiedad toma un valor booleano como objeto para determinar si CheckBox está marcado o no.
• visualDensity: controla la compacidad del widget CheckBox, tomando la clase VisualDensity como objeto.

Ejemplo: 

import 'package:flutter/material.dart';
 
//importing material design library
void main() {
  runApp(MaterialApp(
    //runApp method
    home: HomePage(),
  ));//MaterialApp
}
 
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  bool value = false;
 
  @override
  //App widget tree
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ), //IconButton
        ), //AppBar
        body: Center(
          /** Card Widget **/
          child: Card(
            child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: SizedBox(
                width: 430,
                height: 700,
                child: Column(
                  children: [
                    Text(
                      'Algorithms',
                      style: TextStyle(
                          color: Colors.greenAccent[400],
                          fontSize: 30), //TextStyle
                    ), //Text
                    SizedBox(height: 10),
                    Row(
                      children: <Widget>[
                        SizedBox(
                          width: 10,
                        ), //SizedBox
                        Text(
                          'Library Implementation Of Searching Algorithm: ',
                          style: TextStyle(fontSize: 17.0),
                        ), //Text
                        SizedBox(width: 10), //SizedBox
                        /** Checkbox Widget **/
                        Checkbox(
                          value: this.value,
                          onChanged: (bool value) {
                            setState(() {
                              this.value = value;
                            });
                          },
                        ), //Checkbox
                      ], //<Widget>[]
                    ), //Row
                  ],
                ), //Column
              ), //SizedBox
            ), //Padding
          ), //Card
        ), //Center//Center
      ), //Scaffold
    ); //MaterialApp
  }
}

Producción: 

Explicación: la propiedad de valor de CheckBox se establece en falso al comienzo de la clase _HomePageState . El widget CheckBox está ubicado al frente de un widget de texto separado por un SizedBox dentro de una fila . Lo primero dentro del widget CheckBox es llamar a la propiedad de valor . Luego tenemos la propiedad onChanged que contiene una función para cambiar el estado de CheckBox, lo que hace que CheckBox esté marcado al hacer clic. Haciendo todo esto tenemos una tarea que se puede comprobar.