Checkbox Widget – Flutter Widget Guide By Flutter Agency

In the earlier article, we have gone through RadioButton Widget where if one radio button in a group is selected, the others are un-selected. so in this article, we learn about Checkbox Widget.

What is Checkbox Widget?

If the user needs to have an input where the user can select multiple choices, using Checkbox Widget is the common solution. Flutter has a widget called Checkbox Widget for that purpose. However, in many cases, you may also want to add text or icon to the checkbox. Using Checkbox with Icon and Text can be the solution, but Flutter provides an alternative that makes it much easier for us.

The constructor of the Checkbox Widget will look like below :

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

Simple Code Snippet will look like below :

 Checkbox(
          value: false,
          onChanged: null,
        )

User can pass value like below :

 bool _isChecked = false;
 Checkbox(
          value: _isChecked,
          onChanged: null,
        )

Simple Checkbox widget will look like below :

CheckBox in Flutter

CheckBox widget implemented above is not Clickable because we haven’t implemented anything on onChanged().

When we Implement onChanged() will look like below :

  onChanged: (bool value) {
            setState(() {
              _isChecked = value;
            });
          },

Properties :

key: The widget key, used to control if it should be replaced.

value: If true, the checkbox is checked. If false, the checkbox is unchecked.

activeColor: activeColor is color when the Checkbox is checked. Code Snippet will look like below :

activeColor: Colors.orangeAccent,

checkColor: The color of the check icon when the Checkbox widget is checked.

 checkColor: Colors.white,

autofocus: autofocus will be true if this widget will be selected as the initial focus when no other node in its scope is currently focused.

onChanged: onChanged () is called when the value of the Checkbox should change.

 onChanged: (bool value) {
            setState(() {
              _isChecked = value;
            });
          },

tristate : If true the Checkbox’s value can be true, false, or null. When a tri-state checkbox (tristate is true) is tapped, its onChanged callback will be applied to true if the current value is false, to null if a value is true, and to false if a value is null.

focusColor: The color for the checkbox’s Material when it has the input focus.

focusNode: An optional focus node to use as the focus node for this widget. If one is not supplied, then one will be automatically allocated, owned, and managed by this widget.

hoverColor: The color for the checkbox’s Material when a pointer is hovering over it.

Complete Source Code will look like below :

import 'package:flutter/material.dart';

class CheckBoxWidget extends StatefulWidget {
  CheckBoxWidget({
    Key key,
    @required bool value,
    @required ValueChanged<bool> onChanged,
    bool tristate: false,
    Color activeColor,
    Color checkColor,
    Color focusColor,
    Color hoverColor,
    MaterialTapTargetSize materialTapTargetSize,
    VisualDensity visualDensity,
    FocusNode focusNode,
    bool autofocus: false,
  });
  @override
  _CheckBoxWidgetState createState() => _CheckBoxWidgetState();
}

class _CheckBoxWidgetState extends State<CheckBoxWidget> {
  bool _isChecked = false;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Checkbox(
          value: _isChecked,
          activeColor: Colors.orangeAccent,
          checkColor: Colors.white,
          onChanged: (bool value) {
            setState(() {
              _isChecked = value;
            });
          },
        )
      ],
    );
  }
}

Thanks for reading !!
Still, needs assistance with Flutter?

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.