How to manage/save state for a widget with many checkboxes? - checkbox

Question

I'm creating a Flutter app to store progress for board game characters, I want to allow a user to check up to 18 checkboxes, where the checkboxes are grouped in threes:
My first approach was to code this widget such that I have as little code reused as possible.
CheckboxGroup is a Row widget with a checkmark icon, ":", and three checkboxes as children.
CheckboxGridRow is a Row widget with two CheckboxGroups as children.
CheckboxGrid is a Column widget with three CheckboxGridRows as children.
-> CheckboxGrid
-> CheckboxGridRow
-> CheckboxGroup
-> CheckboxGroup
-> CheckboxGridRow
-> CheckboxGroup
-> CheckboxGroup
-> CheckboxGridRow
-> CheckboxGroup
-> CheckboxGroup
This works fine for UI purposes, but I'm struggling to wrap my head around how to manage/store state for it. I expect that I will use a List<bool> to store true/false for state, but where should the state change and database logic be for this setup?

Answer 1

In Flutter, the state only goes down the tree. So there aren't many solutions:
The state must be stored by a common ancestor of all of your checkboxes.
From there, it's fairly easy to deduce what "checkbox" and "checkbox group" should do: UI
The checkbox widget
Nothing special. Any checkbox will do, as long as it has:
a "checked" boolean
an "onChanged" callback.
The default Checkbox or Switch should do just fine.
The checkbox group
This widget will map a list of options into a list of checkboxes and determine if they are checked or not.
It'll have usually three parameters:
The list of all options
The list of selected options
an "onChanged" callback
Here's a typical implementation:
#immutable
class Option<T> {
Option({#required this.value, #required this.label});
final T value;
final Widget label;
}
class CheckboxGroup<T> extends StatelessWidget {
CheckboxGroup({
Key key,
#required this.options,
#required this.selectedValues,
#required this.onChange,
}) : super(key: key);
final List<Option<T>> options;
final List<T> selectedValues;
final ValueChanged<List<T>> onChange;
#override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
for (final option in options) ...[
Checkbox(
key: ObjectKey(option.value),
value: selectedValues.contains(option.value),
onChanged: (res) {
if (res) {
onChange([...selectedValues, option.value]);
} else {
onChange([...selectedValues]..remove(option.value));
}
},
),
option.label,
]
],
);
}
}
The state
Compared to the previous snippet, it's dead simple:
It simply declared a bunch of fields, sends them to CheckboxGroup, and call setState when needed.
enum Foo { a, b, c }
enum Bar { a, b, c }
class Example extends StatefulWidget {
#override
_ExampleState createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
List<Foo> foo = const [];
List<Bar> bar = const [];
#override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
CheckboxGroup<Foo>(
selectedValues: foo,
options: [
for (final value in Foo.values)
Option(value: value, label: Text(value.toString()))
],
onChange: (value) => setState(() => foo = value),
),
CheckboxGroup<Bar>(
selectedValues: bar,
options: [
for (final value in Bar.values)
Option(value: value, label: Text(value.toString()))
],
onChange: (value) => setState(() => bar = value),
),
],
);
}
}