In our previous post we’ve seen how we can use checkbox in Flutter. However, we’ve not discussed another handy widget.
Checkbox list tile widget, in many ways, plays the similar role as a checkbox. In addition, it acquires many properties from ListTile widget in flutter.
Therefore, we can say, CheckboxListTile is a mixture of Checkbox and ListTile widgets.
In this article, we’ll see how we can use checkbox and check box list tile side by side. So that we can compare these two widgets.
In every way, the value, onChanged, activeColor and checkColor properties of CheckboxListTile widget play the same role as Checkbox does.
On the other hand, properties like title, subtitle, isThreeLine, dense, and contentPadding of ListTIle are also there.
Let us first take a look at these two widgets.
The following image shows one checkbox and two check box list tiles widgets side by side.
Let’s see the code of checkbox, so that we can have idea about the similar properties these two widgets share.
Row(
children: [
const SizedBox(
width: 10,
),
Text(
'A Checkbox Example: ',
style: TextStyle(fontSize: 17.0),
),
Checkbox(
checkColor: Colors.greenAccent,
activeColor: Colors.red,
value: this.valuefirst,
onChanged: (bool? value) {
setState(() {
this.valuefirst = value!;
});
},
),
Checkbox(
value: this.valuesecond,
onChanged: (bool? value) {
setState(
() {
this.valuesecond = value!;
},
);
},
),
],
),
// code is incomplete for brevity, for full code please visit the respective GitHub repositoryThe first checkbox example shares the same properties that a checkbox list tile does have. In the first checkbox sample, we have seen the above mentioned value, onChanged, activeColor and checkColor properties.
Checkbox(
checkColor: Colors.greenAccent,
activeColor: Colors.red,
value: this.valuefirst,
onChanged: (bool? value) {
setState(() {
this.valuefirst = value!;
});
},
),Now, we can have a look at the checkbox list tile code example, so that we can compare them side by side.
Column(
children: [
Text(
'CheckboxListTile Example',
style: TextStyle(fontSize: 20.0),
),
CheckboxListTile(
secondary: const Icon(Icons.home_outlined),
title: const Text('This is header'),
subtitle: const Text('This is subtitle'),
value: this.valuefirst,
onChanged: (bool? value) {
setState(
() {
this.valuefirst = value!;
},
);
},
),
CheckboxListTile(
controlAffinity: ListTileControlAffinity.trailing,
secondary: const Icon(Icons.home_filled),
title: const Text('This is header'),
subtitle: Text('This is subtitle'),
value: this.valuesecond,
onChanged: (bool? value) {
setState(
() {
this.valuesecond = value!;
},
);
},
),
],
),
// code is incomplete for brevity, for full code please visit the respective GitHub repositoryBy default the value is set to false as this is a Boolean value and takes three values. True, false and null.
class _CheckboxListtileExampleState extends State<CheckboxListtileExample> {
bool valuefirst = false;
bool valuesecond = false;
...Since in our example the checkbox and checkbox list tile have the similar values, when we select one, another gets selected automatically.
As the value changes from false to true, the active color property changes. In checkbox widget we’ve mentioned it explicitly. However, in checkbox list tile widget we’ve not mentioned it.
That means active color is null in the checkbox list tile widget.
Due to that reason, it enables the ThemeData.toggleableActiveColor and makes it blue.
If we want to show the CheckboxListTile as disabled, we can pass null as the onChanged callback.
Leave a Reply