Do you think IIT Guwahati certified course can help you in your career?
No
Introduction
In this article, we will learn how to use checkboxes in Flutter. In Flutter, we can have two checkboxes: a compact version of the checkbox called "checkbox" and the "CheckboxListTile" checkbox that comes with a header & subtitle. We will discuss these Flutter checkboxes in detail.
What is Flutter Checkbox?
A Flutter checkbox is a type of input component that holds the boolean value. A GUI(Graphical User Interface) element allows users to choose multiple options from many selections. Here, users can reply only with a ‘yes’ or ‘no’ value. A checked/marked checkbox means ‘yes,’ and an unmarked/unchecked checkbox means ‘no’ value. Generally, we can see the checkboxes on the screen as a square box with white space or a tick mark. A label or a caption corresponding to each checkbox explains the meaning of the checkboxes.
Attributes
Descriptions
value
We use it to check whether the checkbox is checked or not.
onChanged
We call it when the value is changed.
Tristate
False by default, its value can be true, false, or null.
activeColor
Specifies the color of the selected checkbox.
checkColor
Specifies the color of the check icon when they are selected.
materialTapTargetSize
We use it to configure the size of the tap target.
Here, we have a boolean called this.showvalue. Once a user presses the checkbox UI component in the app, it sets the state of the boolean to the changed value. If the app needs the checkbox to be flexible and toggle between “true” and “false” you can set it up so that the value changes to the opposite value every time the checkbox is pressed.
In this example, we create a simple Flutter app with a checkbox that toggles its state when pressed.
CheckboxListTile
The distinction between the two widgets is that the CheckboxListTile has the property “title”. You don’t need additional widgets to give your Flutter checkbox some identification. In the example below, you will see how to implement the exact Flutter checkbox from before, but this time in a CheckboxListTile widget:
The code demo is similar to the above one. We have CheckboxListTile having a property “controlAffinity,” which is set to “ListTileControlAffinity.trailing”, meaning the checkbox will be on the right side of the title. Secondary contains icons that we may add to the Flutter checkbox list.
Attributes
Descriptions
value
We use it whether the checkbox is checked or not.
onChanged
Called when the value is changed.
titile
Specifies the main title of the list.
subtitle
Specifies the subtitle of the list. Usually, we used it to add the description.
activeColor
Specifies the color of the selected checkbox.
activeColor
Specifies the color of the selected checkbox.
selected
False by default, highlights the text after selection.
secondary
Widget that is displayed in front of the checkbox.
Flutter is Google's portable UI toolkit for crafting attractive, natively compiled mobile, web, & desktop applications from a single codebase. The Flutter works with existing code, is used by developers and organizations worldwide, and is free and open source.
How to make a single select checkbox in Flutter?”
To create a single select checkbox in Flutter, you would use the Checkbox widget. This widget requires a bool value to represent its checked or unchecked state. You typically manage this state using a bool variable in your widget's stateful or stateless class. By updating this variable in response to user interaction (onChanged callback), you control whether the checkbox appears checked or unchecked.
How to add text next to a checkbox in Flutter?
To add text next to a checkbox in Flutter, you can use a Row widget. Inside the Row, place the Checkbox widget followed by a Text widget. This arrangement allows you to visually associate the text with the checkbox. The Row widget aligns its children in a horizontal arrangement, making it ideal for placing widgets side by side. Adjust the text style and alignment properties as needed to achieve your desired layout and appearance.
How do you add a checkbox in Flutter?
To add a checkbox in Flutter, use the Checkbox widget and manage its state with a boolean variable.
How do I make a checkbox list in Flutter?
Create a ListView with CheckboxListTile widgets, each managing a boolean value. Use a List<bool> for checkbox states.
Conclusion
This article gives information about Flutter Checkbox and its uses. Being a Flutter developer, you must be well versed with the concepts like Flutter Checkbox, which you have learned just now.