Category: Flutter

Flutter comes with a built-in widget called CheckboxListTile. We may describe it as a CheckBox and ListTile combo. As with the CheckBox widget, it has attributes like value, activeColor, and checkColor, whereas the ListTile widget has properties like title, subtitle, and contentPadding.

To Google the checkbox, we may tap anywhere on the CheckBoxListTile. All the attributes of this widget are listed below, along with an illustration.

Below is the Checkboxlisttile’s syntax.

CheckboxListTile(
{Key key,
@required bool value,
@required ValueChanged onChanged,
Color activeColor,
Color checkColor,
Widget title,
Widget subtitle,
bool isThreeLine: false,
bool dense,
Widget secondary,
bool selected: false,
ListTileControlAffinity controlAffinity: ListTileControlAffinity.platform,
bool autofocus: false,
EdgeInsetsGeometry contentPadding,
bool tristate: false}
)

Here is the example of CheckBoxListTile. In this illustration, we create a listview with every checkbox. Make a model for that listview as well. It is a checkbox dynamic listing of data.

CheckBoxListTileDemo.dart

class CheckBoxListTileDemo extends StatefulWidget {
  @override
  CheckBoxListTileDemoState createState() => new CheckBoxListTileDemoState();
}

class CheckBoxListTileDemoState extends State<CheckBoxListTileDemo> {
  List<CheckBoxListTileModel> modelCheckBoxListTile =
      CheckBoxListTileModel.getUsers();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        backgroundColor: Colors.white,
        centerTitle: true,
        title: new Text(
          'CheckBox ListTile Demo App',
          style: TextStyle(color: Colors.black),
        ),
      ),
      body: new ListView.builder(
          itemCount: modelCheckBoxListTile.length,
          itemBuilder: (BuildContext context, int index) {
            return new Card(
              child: new Container(
                padding: new EdgeInsets.all(10.0),
                child: Column(
                  children: <Widget>[
                    new CheckboxListTile(
                        activeColor: Colors.pink[300],
                        dense: true,
                        //font change
                        title: new Text(
                          modelCheckBoxListTile[index].title,
                          style: TextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.w600,
                              letterSpacing: 0.5),
                        ),
                        value: modelCheckBoxListTile[index].isCheck,
                        secondary: Container(
                          height: 50,
                          width: 50,
                          child: Image.asset(
                            modelCheckBoxListTile[index].img,
                            fit: BoxFit.cover,
                          ),
                        ),
                        onChanged: (bool? val) {
                          setState(() {
                            modelCheckBoxListTile[index].isCheck = val!;
                          });
                        })
                  ],
                ),
              ),
            );
          }),
    );
  }

  void itemChange(bool val, int index) {
    setState(() {
      modelCheckBoxListTile[index].isCheck = val;
    });
  }
}

class CheckBoxListTileModel {
  int userId;
  String img;
  String title;
  bool isCheck;

  CheckBoxListTileModel(
      {required this.userId,
      required this.img,
      required this.title,
      required this.isCheck});

  static List<CheckBoxListTileModel> getUsers() {
    return <CheckBoxListTileModel>[
      CheckBoxListTileModel(
          userId: 1,
          img: 'assets/images/local1.png', // Need to change here Asset Image Name
          title: "JAVA",
          isCheck: true),
      CheckBoxListTileModel(
          userId: 2,
          img: 'assets/images/local2.jpeg', // Need to change here Asset Image Name
          title: "Angular JS",
          isCheck: false),
      CheckBoxListTileModel(
          userId: 3,
          img: 'assets/images/local3.webp', // Need to change here Asset Image Name
          title: "Flutter ",
          isCheck: false),
      CheckBoxListTileModel(
          userId: 4,
          img: 'assets/images/local4.png', // Need to change here Asset Image Name
          title: "Kotlin",
          isCheck: false),
      CheckBoxListTileModel(
          userId: 5,
          img: 'assets/images/local5.png', // Need to change here Asset Image Name
          title: "PHP",
          isCheck: false),
    ];
  }
}

You may have observed that this Checkbox implementation method uses less code. When this code is executed, a list of alternatives with checkboxes is displayed. A checkbox’s state can be changed by tapping on it, and the modelCheckBoxListTile will be modified as a result.

How can I change a Checkbox’s Color?

Using the activeColor and checkColor parameters of the Checkbox widget, Flutter users can alter the colour of a Checkbox.

The checkbox’s colour while it is checked can be changed using the activeColor property, and the checkmark’s colour can be changed using the checkColor property. Here is an illustration of how to apply these attributes:

Checkbox(
  value: true,
  onChanged: (newValue) {
    // Do something
  },
  activeColor: Colors.blue, // Change the color of the checkbox when it is checked
  checkColor: Colors.white, // Change the color of the checkmark inside the checkbox
)

The checkbox’s colour changes to blue when it is checked in the example above since the activeColor attribute is set to Colors.blue. Like this, the checkmark inside the checkbox transforms to white when the checkColor attribute is set to Colors.white.