Flutter – Checkbox Widget

Checkbox in flutter is a material design widget. It is always used in the Stateful Widget as it does not maintain a state of its own. We can use its onChanged property to interact or modify other widgets in the flutter app. Like most of the other flutter widgets, it also comes with many properties like activeColor, checkColor, mouseCursor, etc, to let developers have full control over the widget’s look and feel.

Constructor of Checkbox Widget:

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

Properties of Checkbox Widget:

• activeColor: This property takes the Color class as the object to fill in the ChechBox when it is checked.
• autofocus: This property takes in a boolean value as the object. If it is set to true the CheckBox gets selected at the initial focus.
• checkColor:  This property also takes in Color class as the object. It assigns color to the check icon.
• focusColor: This property also takes in Color class as the object to give color to the checkbox when it is in focus.
• focusNode: It sets an additional focus node to get the focus of the cursor. It takes in FocusNode as the object.
• hoverColor: The hoverColor property takes in Color class as the object. It controls the color of the checkbox at the time of hover.
• materialTapTargetSize: It controls the size of the tapped area. It takes MaterialTapTargetSize enum as the object.
• mouseCursor: This determines the cursor type at the time of the pointer event. It holds MouseCursor class as the object.
• onChanged: ValueChanged<T> typedef is the object given to this property. It is called when the value in the CheckBox widget should be changed.
• tristate: Usually checkbox is either checked or not checked. If this property which takes a boolean as the object is set to true then it can set to null also.
• value: This property takes in a boolean value as the object to determine whether the CheckBox is checked or not.
• visualDensity: It controls the compactness of CheckBox widget, by taking in the VisualDensity class as the object.

Example: 

Dart

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
  }
}

Output: 

Explanation: The value property of the CheckBox is set to false at the starting of _HomePageState class. The CheckBox widget is pace in the front of a Text widget separated by a SizedBox inside a Row. The first thing inside the CheckBox widget is calling of the value property. Then we have onChanged property which holding a function to change the state of CheckBox, which makes the CheckBox checked on click. Doing all this we have got a task which can be checked.