The ChromiaCheckbox widget provides binary and tristate selection controls that follow the Chromia design system.
Basic Usage
import 'package:chromia_ui/chromia_ui.dart';
bool isChecked = false;
ChromiaCheckbox(
value: isChecked,
onChanged: (value) {
setState(() => isChecked = value ?? false);
},
)
With Label
Add a label next to the checkbox:
ChromiaCheckbox(
value: isChecked,
onChanged: (value) => setState(() => isChecked = value ?? false),
label: 'Accept terms and conditions',
)
Tristate Checkbox
Support three states: checked, unchecked, and indeterminate:
bool? isChecked = null; // null = indeterminate
ChromiaCheckbox(
value: isChecked,
tristate: true,
onChanged: (value) => setState(() => isChecked = value),
label: 'Select all',
)
false → true → null → false
Custom Colors
Customize the checkbox colors:
ChromiaCheckbox(
value: isChecked,
onChanged: (value) => setState(() => isChecked = value ?? false),
activeColor: Colors.green,
checkColor: Colors.white,
)
Custom Size
Adjust the checkbox size:
ChromiaCheckbox(
value: isChecked,
onChanged: (value) => setState(() => isChecked = value ?? false),
size: 24.0,
)
Custom Icons
Change the check and tristate icons:
ChromiaCheckbox(
value: isChecked,
onChanged: (value) => setState(() => isChecked = value ?? false),
checkIcon: Icons.done,
tristateIcon: Icons.horizontal_rule,
)
Disabled State
Disable the checkbox by setting onChanged to null:
ChromiaCheckbox(
value: isChecked,
onChanged: null,
label: 'Disabled checkbox',
)
ChromiaCheckbox Parameters
Whether the checkbox is checked. Can be null for tristate.
onChanged
ValueChanged<bool?>?
required
Called when the value changes. Set to null to disable.
Optional label text displayed next to the checkbox.
Whether the checkbox can be in an indeterminate state.
The color of the check mark.
The size of the checkbox.
checkIcon
IconData
default:"Icons.check"
The icon to display when the checkbox is checked.
tristateIcon
IconData
default:"Icons.remove"
The icon to display when the checkbox is null.
ChromiaListTileCheckbox
A checkbox with a tile layout, similar to Flutter’s CheckboxListTile.
Basic Usage
ChromiaListTileCheckbox(
value: isChecked,
title: Text('Enable notifications'),
subtitle: Text('Receive updates about your account'),
onChanged: (value) => setState(() => isChecked = value ?? false),
)
With Secondary Widget
Add an icon or widget before the content:
ChromiaListTileCheckbox(
value: isChecked,
title: Text('Wi-Fi'),
subtitle: Text('Connected to Home Network'),
secondary: Icon(Icons.wifi),
onChanged: (value) => setState(() => isChecked = value ?? false),
)
With Custom Padding
ChromiaListTileCheckbox(
value: isChecked,
title: Text('Remember me'),
contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
onChanged: (value) => setState(() => isChecked = value ?? false),
)
Tristate List Tile
bool? selectAll = null;
ChromiaListTileCheckbox(
value: selectAll,
tristate: true,
title: Text('Select All'),
subtitle: Text('Select all items in the list'),
onChanged: (value) => setState(() => selectAll = value),
)
ChromiaListTileCheckbox Parameters
Whether the checkbox is checked.
onChanged
ValueChanged<bool?>?
required
Called when the value changes.
Additional content displayed below the title.
A widget to display before the checkbox.
Whether the checkbox can be in an indeterminate state.
The color of the check mark.
checkIcon
IconData
default:"Icons.check"
The icon to display when checked.
tristateIcon
IconData
default:"Icons.remove"
The icon to display when null.
Use Cases
Form Agreement
bool agreedToTerms = false;
ChromiaCheckbox(
value: agreedToTerms,
onChanged: (value) => setState(() => agreedToTerms = value ?? false),
label: 'I agree to the Terms and Conditions',
)
Settings Panel
Column(
children: [
ChromiaListTileCheckbox(
value: notificationsEnabled,
title: Text('Push Notifications'),
subtitle: Text('Receive push notifications'),
secondary: Icon(Icons.notifications),
onChanged: (value) => setState(() => notificationsEnabled = value ?? false),
),
ChromiaListTileCheckbox(
value: emailEnabled,
title: Text('Email Updates'),
subtitle: Text('Receive email notifications'),
secondary: Icon(Icons.email),
onChanged: (value) => setState(() => emailEnabled = value ?? false),
),
],
)
Select All with Tristate
bool? selectAll;
List<bool> items = [false, false, false];
void updateSelectAll() {
if (items.every((item) => item)) {
selectAll = true;
} else if (items.every((item) => !item)) {
selectAll = false;
} else {
selectAll = null; // Some selected
}
}
ChromiaCheckbox(
value: selectAll,
tristate: true,
label: 'Select All',
onChanged: (value) {
setState(() {
selectAll = value ?? false;
items = items.map((_) => selectAll ?? false).toList();
});
},
)
