Flutter – Checkbox Widget

22 Feb, 2022
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.
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}
)
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 libraryvoid 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.
simmytarika5
surinderdawra388
simranarora5sos
arorakashish0911
Flutter-widgets
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.