How to disable checkbox flutter

user_2554745 0
Viewed 16757

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.

flutter-layout dart flutter
4 Answers

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

user_7934770 
Checkbox(value: false, onChanged: null)
user_77394260

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.

user_86381530

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