How to disable checkbox flutter

Question

I am using Checkbox inside a ListTile like the following:

 ListTile(
  leading: Checkbox(
  value: _isChecked,
    onChanged: (v) {
      setState(() {
          _isChecked = !_isChecked;
      });
    },
  ),
  title: Text("is Bathroom"),
);

How can I disable the checkbox. I know that the Checkbox widget is stateless. But is there any other Widget provided in material subpackage that can do this. Something like InputDecorator.

Also I have same question with DropdownButton. I am using it as following to choose an item in a form from a dropdown list.

             InputDecorator(
                decoration: InputDecoration(
                  labelText: "Type",
                  hintText: "Choose the type",
                ),
                isEmpty: _type == null,
                child: DropdownButton<int>(
                  value: _type,
                  isDense: true,
                  onChanged: (value) {
                    setState(() {
                      _type = value;
                    });
                  },
                  items: _buildDropdownItemList(),
                ),
              );

I tried the enable argument in InputDecoration but that just changes the decoration. User can still change the selection.

Decry

Answer 1

You can pass null to the onChanged property and this will disable the checkbox.

Prima

any idea how can i disable the dropdownbutton as well? – Decry

I'm not sure there is a straightforward way to do this. You may need to replicate the button with a custom widget. Or perhaps you could extend the dowdownbutton and play with the implementation. Sorry I don't have any better thoughts on that one – Prima

@HarshBhikadia not sure question is still relevant but you can clear the items. array or list to disable the dropdown button. this.itemList.clear(); – Tote

I have to say this is extremely unintuitive. Also the usage of "Null" as a programming device is awful. The guys who invented this and decided it should be this way should be ashamed of making such bad design decision. – Venusberg

Answer 2

Checkbox(value: false, onChanged: null)

Savannasavannah

Answer 3

You can make checkbox state change with a setstate inside a statefuldwiget i will leave an example i found in youtube.

Here you can watch an example about how to use it.

You also can see an example from the same guy he have a complete series about individual widgets, like Dropdown..

Hope it helps.

Persecution

The Checkbox widget itself is stateless (at least in the sense that it does not have a checked state) – Rugby

Do not understand why make Checkbox as stateless(mostly of time, you always want to trace the state). Have to wrap it in a stateful widget from which to maintains its state. Why not have Checkbox as a stateful widget to maintain state itself? – Melisenda

Answer 4

Here is the example code which can solve your problem.

    class TaskTile extends StatefulWidget {
      const TaskTile({Key? key, required this.index}) : super(key: key);
      final int index;

      @override
      State<TaskTile> createState() => _TaskTileState();
    }

    class _TaskTileState extends State<TaskTile> {
      bool isChecked = false;

      @override
      Widget build(BuildContext context) {
        return ListTile(
          trailing: TaskCheckBox(
              checkBoxState: isChecked, toggleCheckBoxState:  (bool? newCheckBoxState) {
        setState(() {
          isChecked = newCheckBoxState ?? isChecked;
        });
      }),
          title: Text(
            'Task ${widget.index}',
            style: TextStyle(
              decoration:
                  isChecked ? TextDecoration.lineThrough : TextDecoration.none,
            ),
          ),
        );
      }
    }

    class TaskCheckBox extends StatelessWidget {
      final bool checkBoxState;
      final void Function(bool?)? toggleCheckBoxState;

      const TaskCheckBox(
          {Key? key,
          required this.checkBoxState,
          required this.toggleCheckBoxState})
          : super(key: key);
      @override
      Widget build(BuildContext context) {
        return Checkbox(
            fillColor: MaterialStateProperty.all<Color>(Colors.lightBlue),
            value: checkBoxState,
            onChanged: toggleCheckBoxState);
      }
    }

Indirection

Answer 5

In case you want to disable the widget, but "preserve the looks of it" as it were enabled, you can just pass an empty callback function.

onChanged: (bool newValue) {
  if (widget.Condition) {
    setState(() {
      widget.controller.setValue(newValue);
    });
  }
  // This callback function is returning void when the condition is false
},

As you can see here in this example, the widget is not responding, but is not grayed out as when it is completely disabled.

And this is the same widget with onChanged: null,

Tadzhik