Flutter - CheckboxListTile

Last Updated : 26 Sep, 2022

CheckboxListTile is a built-in widget in flutter. We can say it a combination of CheckBox with a ListTile. Its properties such as value, activeColor, and checkColor are similar to the CheckBox widget, and title, subtitle, contentPadding, etc are similar to the ListTile widget. We can tap anywhere on the CheckBoxListTile to Google the checkbox. Below we will see all the properties of this widget along with an example.

Constructor Of CheckboxListTile Class:

const CheckboxListTile(
{Key key,
@required bool value,
@required ValueChanged<bool> 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}
)

Properties of CheckboxListTile Widget:

activeColor: This widget takes in the Color class as the object to assign the checkbox a color when it is checked.
autofocus: This property takes in a boolean as the value to divide whether the widget will be selected on the initial focus or not.
checkColor: This property assigns a color to the check icon by taking in the Color class as the object.
contentPadding: This property is responsible to assign empty space inside the widget by taking in EdgeInsetsGeometry class as the object.
controlAffinity: The controlAffinity property holds the ListTileControlAffinity class as the object to decide the location of action in respect to text inside the widget.
dense: The dense property takes in a boolean as the object whether is associated with the vertical dense list.
isThreeLine: This property also takes in a boolean as the object to decide whether the text in the widget will be printed till the third line.
onChanged: This property takes in Valuechanged<bool> as the object. This property is responsible for the change in the checkbox.
secondary: The secondary property holds a widget as the object to be displayed on the opposite side of the checkbox.
selected: This property takes in a boolean value as the object to decide whether the checkbox will be already selected or not.
subtitle: The subtitle property holds a widget as the object to be displayed below the title. Usually, this widget is Text.
title: This property also takes in a widget as the object to be displayed as the title of the CheckBoxListTile, usually, it is Text widget.
tristate: This property holds a boolean as the object. If it is set to true the values in the checkbox can either true, false, or null.
value: This property also takes in a boolean as the object to control whether the checkbox is selected or not.

Example 1:

Dart

import 'package:flutter/material.dart';

// importing material design library
void main() {
  runApp(MaterialApp(
    
    // runApp method
    home: HomePage(),
  )); //MaterialApp
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  // value set to false
  bool _value = false;

  // App widget tree
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ), //IconButton
        ), //AppBar
        body: SizedBox(
          width: 400,
          height: 400,
          child: Center(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.greenAccent),
                  borderRadius: BorderRadius.circular(20),
                ), //BoxDecoration
                
                /** CheckboxListTile Widget **/
                child: CheckboxListTile(
                  title: const Text('GeeksforGeeks'),
                  subtitle: const Text('A computer science portal for geeks.'),
                  secondary: const Icon(Icons.code),
                  autofocus: false,
                  activeColor: Colors.green,
                  checkColor: Colors.white,
                  selected: _value,
                  value: _value,
                  onChanged: (bool value) {
                    setState(() {
                      _value = value;
                    });
                  },
                ), //CheckboxListTile
              ), //Container
            ), //Padding
          ), //Center
        ), //SizedBox
      ), //Scaffold
    ); //MaterialApp
  }
}

Output:

Explanation: In the body of this flutter app the hierarchy till the CheckBoxListTile is SizedBox > Center > Padding > Container > CheckBoxListTile. All the widget above the CheckBoxListTile is mainly to put it in the center of the screen. In the CheckBoxListTile widget or title, the property is holding Text('GeeksforGeeks'), and the subtitle is also a Text widget. On the extreme left, we have the checkbox and on the extreme right, we have a material design code icon. The active color in the widget is green and the check icon color is white. The control of the state of this widget is taken by the value property. And the green-colored border is painted by the BoxDecoration widget with a 20 px curve on the edges. The combined result of all these is a nice looking checkbox tile, it can be used in many applications like to-do list or scheduler app.

Example 2:

Dart

import 'package:flutter/material.dart';

// importing material design library
void main() {
  runApp(MaterialApp(
    
    // runApp method
    home: HomePage(),
  )); //MaterialApp
}

// Creating a stateful widget to manage 
// the state of the app
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  
  // value set to false
  bool _value = false;
  bool _valu = false;
  

  // App widget tree
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ), //IconButton
        ), //AppBar
        body: Center(
          child: SizedBox(
            width: 400,
            height: 400,
            child: Center(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        border: Border.all(color: Colors.greenAccent),
                        borderRadius: BorderRadius.circular(20),
                      ), //BoxDecoration
                      
                      /** CheckboxListTile Widget **/
                      child: CheckboxListTile(
                        title: const Text('GeeksforGeeks'),
                        subtitle:
                            const Text('A computer science portal for geeks. '),
                        secondary: CircleAvatar(
                          backgroundImage: NetworkImage(
                              "https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"), //NetworkImage
                          radius: 20,
                        ),
                        autofocus: false,
                        activeColor: Colors.green,
                        checkColor: Colors.white,
                        selected: _value,
                        dense: true,
                        value: _value,
                        onChanged: (bool value) {
                          setState(() {
                            _value = value;
                          });
                        },
                      ), //CheckboxListTile
                    ),
                    SizedBox(
                      height: 30,
                    ),
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black,
                            offset: const Offset(
                              3.0,
                              3.0,
                            ), //Offset
                            blurRadius: 10.0,
                            spreadRadius: 2.0,
                          ), //BoxShadow
                          BoxShadow(
                            color: Colors.white,
                            offset: const Offset(0.0, 0.0),
                            blurRadius: 0.0,
                            spreadRadius: 0.0,
                          ), //BoxShadow
                        ],
                      ), //BoxDecoration
                      
                      /** CheckboxListTile Widget **/
                      child: CheckboxListTile(
                        title: const Text('GeeksforGeeks'),
                        subtitle: const Text(
                            'A computer science portal for geeks. Here you will find articles on all the technologies.'),
                        secondary: CircleAvatar(
                          backgroundImage: NetworkImage(
                              "https://pbs.twimg.com/profile_images/1304985167476523008/QNHrwL2q_400x400.jpg"), //NetworkImage
                          radius: 20,
                        ),
                        autofocus: false,
                        isThreeLine: true,
                        activeColor: Colors.green,
                        checkColor: Colors.white,
                        selected: _valu,
                        value: _valu,
                        onChanged: (bool value) {
                          setState(() {
                            _valu = value;
                          });
                        },
                      ), //CheckboxListTile
                    ),
                  ],
                ), //Container
              ), //Padding
            ), //Center
          ),
        ), //SizedBox
      ),
      debugShowCheckedModeBanner: false, //Scaffold
    ); //MaterialApp
  }
}

Output:

Explanation: In this example displaying the use of CheckBoxTile widget we have modified the looks of the CheckBoxTile by employing its different parameters along with the BoxDecoration widget. By taking a look at the app we can notice an image has replaced that code icon. In both that CheckBoxTiles the secondary parameter is taking CircleAvatar widget as the object which is taking in NetworkImage. The size of the image is 20 px. In the first tile, the dense property is also set to true, which makes the tile bit small compared to the original size. Both tiles, separated by a SizedBox widget of height 30 px. In the second tile, the border parameter is removed from the BoxDecoration and the boxShadow has been added, which is giving a nice black shadow around the edges. In addition, the isThreeLine property is also set to true which some additional height to the tile, to accommodate more text in the subtitle parameter.

Container class in Flutter

ankit_kumar_

Improve

Article Tags :

Flutter - CheckboxListTile

Constructor Of CheckboxListTile Class:

Similar Reads

Thank You!

What kind of Experience do you want to share?