CheckboxListTile widget and Attributes

CheckboxListTile widget and Attributes

ยท

3 min read

The CheckboxListTile widget in Flutter is a combination of a ListTile and a Checkbox. It is commonly used when you want to represent a list of items with an accompanying checkbox for each item. The widget is part of the material design framework and provides an easy way to manage the state of multiple checkboxes.

Here are the primary attributes of the CheckboxListTile widget along with examples:

  1. value (bool):

    • Represents the current state of the checkbox (checked or unchecked).

      Example:

        CheckboxListTile(
          value: true,
          onChanged: (value) {
            // Handle checkbox state changes
          },
          title: Text('Item 1'),
        ),
      
  2. onChanged (Function(bool)?):

    • Callback function triggered when the checkbox state changes.

      Example:

        CheckboxListTile(
          value: true,
          onChanged: (value) {
            // Handle checkbox state changes
          },
          title: Text('Item 1'),
        ),
      
  3. title (Widget):

    • The primary title of the ListTile.

      Example:

        CheckboxListTile(
          value: true,
          onChanged: (value) {
            // Handle checkbox state changes
          },
          title: Text('Item 1'),
        ),
      
  4. subtitle (Widget?):

    • An optional subtitle displayed beneath the title.

      Example:

        CheckboxListTile(
          value: true,
          onChanged: (value) {
            // Handle checkbox state changes
          },
          title: Text('Item 1'),
          subtitle: Text('Subtitle for Item 1'),
        ),
      
  5. secondary (Widget?):

    • An optional widget placed on the trailing side of the list tile.

      Example:

        CheckboxListTile(
          value: true,
          onChanged: (value) {
            // Handle checkbox state changes
          },
          title: Text('Item 1'),
          secondary: Icon(Icons.check),
        ),
      
  6. activeColor (Color?):

    • The color to use when the checkbox is checked.

      Example:

        CheckboxListTile(
          value: true,
          onChanged: (value) {
            // Handle checkbox state changes
          },
          title: Text('Item 1'),
          activeColor: Colors.green,
        ),
      
  7. checkColor (Color?):

    • The color to use for the check icon when the checkbox is checked.

      Example:

        CheckboxListTile(
          value: true,
          onChanged: (value) {
            // Handle checkbox state changes
          },
          title: Text('Item 1'),
          checkColor: Colors.white,
        ),
      

Full Example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('CheckboxListTile Example'),
        ),
        body: MyCheckboxList(),
      ),
    );
  }
}

class MyCheckboxList extends StatefulWidget {
  @override
  _MyCheckboxListState createState() => _MyCheckboxListState();
}

class _MyCheckboxListState extends State<MyCheckboxList> {
  bool _item1Checked = false;
  bool _item2Checked = false;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CheckboxListTile(
          value: _item1Checked,
          onChanged: (value) {
            setState(() {
              _item1Checked = value!;
            });
          },
          title: Text('Item 1'),
          subtitle: Text('Subtitle for Item 1'),
          secondary: Icon(Icons.check),
          activeColor: Colors.green,
          checkColor: Colors.white,
        ),
        CheckboxListTile(
          value: _item2Checked,
          onChanged: (value) {
            setState(() {
              _item2Checked = value!;
            });
          },
          title: Text('Item 2'),
          subtitle: Text('Subtitle for Item 2'),
          secondary: Icon(Icons.check),
          activeColor: Colors.green,
          checkColor: Colors.white,
        ),
      ],
    );
  }
}

In this example, the MyCheckboxList widget contains two CheckboxListTile widgets with different attributes. The state of each checkbox is managed using the _item1Checked and _item2Checked variables, and the checkboxes can be toggled by the user. Customize the attributes according to your specific design requirements.

Did you find this article valuable?

Support Vinit Mepani (Flutter Developer) by becoming a sponsor. Any amount is appreciated!

ย