Flutter Checkbox Widget (original) (raw)
Last Updated : 17 Mar, 2025
**Checkbox in Flutter is a material design widget. It is always used in the Stateful Widget as it does not maintain its **own state. We can use its **onChanged property to interact with 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
Checkbox Checkbox({
Key? key,
required bool? value,
bool tristate = false,
required void Function(bool?)? onChanged,
MouseCursor? mouseCursor,
Color? activeColor,
WidgetStateProperty<Color?>? fillColor,
Color? checkColor,
Color? focusColor,
Color? hoverColor,
WidgetStateProperty<Color?>? overlayColor,
double? splashRadius,
MaterialTapTargetSize? materialTapTargetSize,
VisualDensity? visualDensity,
FocusNode? focusNode,
bool autofocus = false,
OutlinedBorder? shape,
BorderSide? side,
bool isError = false,
String? semanticLabel,
})
**Properties of Checkbox Widget
| **Property | **Description |
|---|---|
| activeColor | This property takes the **Color class as the object to fill in the CheckBox 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 **hoverColorproperty 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 typedef is the object given to this property. It is called when the value in the **CheckBoxwidget 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 **CheckBoxis checked or not. |
| visualDensity | It controls the compactness of CheckBox widget, by taking in the **VisualDensityclass as the object. |
| fillColor | Provides control over **Checkbox background color. |
| shape | To customize the shape of the checkbox, you can use the **shape property, which takes RoundedRectangleBorder or other shapes. |
**Example of Checkbox Widget
**main.dart:
main.dart `
import 'package:flutter/material.dart';
void main() { runApp(const MyApp()); }
class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);
@override Widget build(BuildContext context) { return MaterialApp( home: HomePage(), ); } }
class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); }
class _HomePageState extends State { bool? value = false; // Initialize as nullable bool for null safety
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('GeeksforGeeks'), backgroundColor: Colors.greenAccent[400], leading: IconButton( icon: const Icon(Icons.menu), tooltip: 'Menu', onPressed: () {}, ), ), body: Center( 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), ), const SizedBox(height: 10), Row( children: [ const SizedBox(width: 10), const Text( 'Library Implementation Of Searching Algorithm: ', style: TextStyle(fontSize: 17.0), ), const SizedBox(width: 10), Checkbox( tristate: true, // Example with tristate value: value, onChanged: (bool? newValue) { setState(() { value = newValue; }); }, ), ], ), ], ), ), ), ), ), ); } }
`
**Output:
**Explanation of the above Program:
The **valueproperty of the **CheckBoxis set to false at the starting of **_HomePageStateclass. The **CheckBoxwidget is pace in the front of a **Textwidget separated by a **SizedBoxinside a **Row. The first thing inside the CheckBox widget is calling of the **valueproperty. Then we have **onChangedproperty 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.