How do you add a label (title text) to a Checkbox in Flutter?

Question

I am playing with Checkbox to see how it works, but I don't see a title option with it.

Checkbox(
  title: Text("Checkbox label"),  // The named parameter 'title' isn't defined.
  value: true,
  onChanged: (newValue) { },
);

Do I have to create my own widget to add a title to it?

Solution 1

If you need a Checkbox with a label then you can use a CheckboxListTile.

  CheckboxListTile(
    title: Text("title text"), //    <-- label
    value: checkedValue,
    onChanged: (newValue) { ... },
  )

If you want the checkbox on the left of the text then you can set the controlAffinity parameter.

  CheckboxListTile(
    title: Text("title text"),
    value: checkedValue,
    onChanged: (newValue) { ... },
    controlAffinity: ListTileControlAffinity.leading,  //  <-- leading Checkbox
  )

Notes

• Since it is a ListTile, clicking anywhere on the row activates the onChanged() callback. You need to rebuild it with the correct checked values yourself, though. See this answer.
• An alternate solution would be to make your own widget using a Row with a Checkbox and a Text widget. You would probably want to wrap it in a gesture detector, though, so that taps on the text would also trigger an onChanged() callback. You could start with the CheckboxListTile source code as a reference.

Solution 2

The CheckboxListTile wasn't quite right for my use case, so I took the LabeledCheckbox class from the docs and modified it a little:

import 'package:flutter/material.dart';

class LabeledCheckbox extends StatelessWidget {
  const LabeledCheckbox({
    Key? key,
    required this.label,
    required this.value,
    required this.onChanged,
  }) : super(key: key);

  final String label;
  final bool value;
  final Function onChanged;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        onChanged(!value);
      },
      child: Row(
        children: <Widget>[
          Checkbox(
            value: value,
            onChanged: (bool? newValue) {
              onChanged(newValue);
            },
          ),
          Text(label),
        ],
      ),
    );
  }
}