CheckboxListTile Widget

Project Preview

  • Interested in seeing the live demo? Click here to explore.
  • Want to view the source code? Visit the project on GitHub.

Code Snippet

import 'package:flutter/material.dart';

class CheckboxListTileWidget extends StatefulWidget {
  const CheckboxListTileWidget({super.key});

  @override
  State<CheckboxListTileWidget> createState() => _CheckboxListTileWidgetState();
}

class _CheckboxListTileWidgetState extends State<CheckboxListTileWidget> {
  bool? _isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("CheckboxListTile Widget"),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            children: [
              CheckboxListTile(
                title: const Text('Checkbox List Tile'),
                value: _isChecked,
                onChanged: (bool? newValue) {
                  setState(() {
                    _isChecked = newValue;
                  });
                },
                activeColor: Colors.pinkAccent,
                checkColor: Colors.white,
                tileColor: Colors.black12,
                subtitle: const Text('This is a Subtitle'),
                controlAffinity: ListTileControlAffinity.leading,
                tristate: true,
                contentPadding: const EdgeInsets.all(30),
                hoverColor: Colors.grey,
                splashRadius: 30,
                dense: true,
                isThreeLine: true,
                // visualDensity: VisualDensity(horizontal: 0, vertical: -4),
                mouseCursor: SystemMouseCursors.copy,
                enableFeedback: false,
                selected: true,
                selectedTileColor: Colors.tealAccent,
                enabled: true,
                secondary: const Text("This is Secondary Widget"),
                onFocusChange: (newValue) {
                  print(newValue);
                  //  onFocusChange. final. Handler called when the focus changes. Called with true if this widget's node gains focus, and false if it loses focus.
                },
                checkboxShape: const CircleBorder(eccentricity: 1),
                autofocus: true,
              ),
              const SizedBox(height: 20),
              CheckboxListTile(
                title: const Text('Checkbox List Tile'),
                value: true,
                onChanged: (bool? newValue) {},
                activeColor: Colors.pinkAccent,
                checkColor: Colors.white,
                tileColor: Colors.black12,
                subtitle: const Text('This is a Subtitle'),
                controlAffinity: ListTileControlAffinity.trailing,
              ),
              const SizedBox(height: 20),
              CheckboxListTile(
                title: const Text('Checkbox List Tile'),
                value: true,
                onChanged: (bool? newValue) {},
                activeColor: Colors.pinkAccent,
                checkColor: Colors.white,
                tileColor: Colors.black12,
                subtitle: const Text('This is a Subtitle'),
                controlAffinity: ListTileControlAffinity.platform,
              ),
              const SizedBox(height: 20),
            ],
          ),
        ),
      ),
    );
  }
}