Reputation: 10875

How to disable checkbox flutter

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.

Upvotes: 21

Answers (5)

carloswm85

Reputation: 2397

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,

Upvotes: 0

Aman Ansari

Reputation: 139

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);
      }
    }

Upvotes: 0