Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter Checkbox not changing/updating/working

I am trying to learn checkboxes in Flutter.

The problem is, when I want to use checkboxes in Scaffold(body:) it is working. But I want to use it in different places like an item in ListView.

return Center(
    child: Checkbox(
  value: testValue,
  onChanged: (bool value) {
    setState() {
      testValue = value;
    }
  },
));

But it is not working, updating and changing anything.

Edit: I solved my problem with putting checkbox in a StatefulBuilder. Thanks to @cristianbregant

 return StatefulBuilder(
    builder: (BuildContext context, StateSetter setState) {
  return Center(
    child: CheckboxListTile(
      title: const Text('Animate Slowly'),
      value: _valueCheck,
      onChanged: (bool value) {
        setState(() {
          _valueCheck = value;
        });
      },
      secondary: const Icon(Icons.hourglass_empty),
    ),
  );
});
like image 259
alperen.emeksiz Avatar asked Nov 14 '19 13:11

alperen.emeksiz


2 Answers

Try these maybe:

return Center(
  child: CheckboxListTile(
    title: const Text('Animate Slowly'),
    value: _valueCheck,
    onChanged: (bool value) {
      setState(() {
       _valueCheck = value;
      });
    },
    secondary: const Icon(Icons.hourglass_empty),
  ),
);

and remember that if you are using it in a dialog or bottomsheet you need to wrap the Checkbox Widget in a Stateful builder because the state does not update.

like image 153
Cristian Bregant Avatar answered Nov 09 '22 16:11

Cristian Bregant


Checkboxes require you have a Scaffold or Material as their parent. Without either of these, you get this helpful error message:

The following assertion was thrown building Checkbox(dirty, state: _CheckboxState#1163b):
No Material widget found.

Checkbox widgets require a Material widget ancestor.
In material design, most widgets are conceptually "printed" on a sheet of material.
In Flutter's material library, that material is represented by the Material widget. It is the Material widget that renders ink splashes, for instance. Because of this, many material library widgets require that there be a Material widget in the tree above them.

Once you have a material ancestor, you can place the ListView as it's child and it should show fine:

class SettingsPage extends StatefulWidget {
  @override
  _SettingsPageState createState() => _SettingsPageState();
}

class _SettingsPageState extends State<SettingsPage> {
  var _foo = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Toggle Foo'),
              Checkbox(
                value: _foo,
                onChanged: (bool value) {
                  setState(() => _foo = value);
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

enter image description here

like image 20
Nolence Avatar answered Nov 09 '22 17:11

Nolence