Flutter – CheckboxListTile

CheckboxListTile in Flutter is a widget that displays a checkbox and a text. It allows the user to select one or more options from a list.

Usage

To use a CheckboxListTile, simply create a ListTile widget and wrap it in a CheckboxListTile. The value parameter determines if the checkbox is checked or unchecked. The onChanged parameter is fired when the user taps the checkbox.

CheckboxListTile(
  title: Text('Checkbox 1'),
  value: _checked,
  onChanged: (bool value) {
    setState(() {
      _checked = value;
    });
  },
);

Properties

• value: A boolean value that determines if the checkbox is checked or unchecked.
• onChanged: A function that is fired when the user taps the checkbox.
• title: A widget that displays the title of the checkbox.
• subtitle: An optional widget that displays a subtitle for the checkbox.
• dense: A boolean that determines if the checkbox is dense or not.
• secondary: An optional widget that displays a leading icon or image.
• controlAffinity: An enum that determines if the checkbox is displayed on the left or right of the title.
• contentPadding: The padding between the checkbox and the title.
• selected: A boolean that determines if the checkbox is selected.

Example

Here's an example of a CheckboxListTile with multiple options.

class _MyAppState extends State<MyApp> {
  bool _checked1 = false;
  bool _checked2 = false;
  bool _checked3 = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CheckboxListTile Example'),
      ),
      body: ListView(
        children: [
          CheckboxListTile(
            title: Text('Checkbox 1'),
            value: _checked1,
            onChanged: (bool value) {
              setState(() {
                _checked1 = value;
              });
            },
          ),
          CheckboxListTile(
            title: Text('Checkbox 2'),
            value: _checked2,
            onChanged: (bool value) {
              setState(() {
                _checked2 = value;
              });
            },
          ),
          CheckboxListTile(
            title: Text('Checkbox 3'),
            value: _checked3,
            onChanged: (bool value) {
              setState(() {
                _checked3 = value;
              });
            },
          ),
        ],
      ),
    );
  }
}

This example creates a simple list of three CheckboxListTile widgets. When the user taps on a checkbox, it updates the state of the MyAppState class and redraws the UI to reflect the changes.

And that's all there is to it! With CheckboxListTile, you can easily add checkboxes to your app and provide your users with an intuitive way to select options.