refactored GroupedCheckbox into stateless widget

Author: grundid

lib/src/widgets/grouped_checkbox.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_form_builder/flutter_form_builder.dart';
 
-class GroupedCheckbox<T> extends StatefulWidget {
+class GroupedCheckbox<T> extends StatelessWidget {
   /// A list of string that describes each checkbox. Each item must be distinct.
   final List<FormBuilderFieldOption<T>> options;
 
@@ -204,38 +204,22 @@ class GroupedCheckbox<T> extends StatefulWidget {
     this.controlAffinity = ControlAffinity.leading,
   }) : super(key: key);
 
-  @override
-  _GroupedCheckboxState<T> createState() => _GroupedCheckboxState<T>();
-}
-
-class _GroupedCheckboxState<T> extends State<GroupedCheckbox<T>> {
-  final selectedListItems = <T>[];
-
-  @override
-  void initState() {
-    super.initState();
-
-    if (widget.value != null) {
-      selectedListItems.addAll(widget.value!);
-    }
-  }
-
   @override
   Widget build(BuildContext context) {
     final widgetList = <Widget>[];
-    for (var i = 0; i < widget.options.length; i++) {
+    for (var i = 0; i < options.length; i++) {
       widgetList.add(item(i));
     }
     Widget finalWidget;
-    if (widget.orientation == OptionsOrientation.vertical) {
+    if (orientation == OptionsOrientation.vertical) {
       finalWidget = SingleChildScrollView(
         scrollDirection: Axis.vertical,
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: widgetList,
         ),
       );
-    } else if (widget.orientation == OptionsOrientation.horizontal) {
+    } else if (orientation == OptionsOrientation.horizontal) {
       finalWidget = SingleChildScrollView(
         scrollDirection: Axis.horizontal,
         child: Row(
@@ -247,14 +231,14 @@ class _GroupedCheckboxState<T> extends State<GroupedCheckbox<T>> {
     } else {
       finalWidget = SingleChildScrollView(
         child: Wrap(
-          spacing: widget.wrapSpacing,
-          runSpacing: widget.wrapRunSpacing,
-          textDirection: widget.wrapTextDirection,
-          crossAxisAlignment: widget.wrapCrossAxisAlignment,
-          verticalDirection: widget.wrapVerticalDirection,
-          alignment: widget.wrapAlignment,
+          spacing: wrapSpacing,
+          runSpacing: wrapRunSpacing,
+          textDirection: wrapTextDirection,
+          crossAxisAlignment: wrapCrossAxisAlignment,
+          verticalDirection: wrapVerticalDirection,
+          alignment: wrapAlignment,
           direction: Axis.horizontal,
-          runAlignment: widget.wrapRunAlignment,
+          runAlignment: wrapRunAlignment,
           children: widgetList,
         ),
       );
@@ -263,50 +247,47 @@ class _GroupedCheckboxState<T> extends State<GroupedCheckbox<T>> {
   }
 
   Widget item(int index) {
-    final option = widget.options[index];
+    final option = options[index];
     final optionValue = option.value;
-    final isOptionDisabled = true == widget.disabled?.contains(optionValue);
+    final isOptionDisabled = true == disabled?.contains(optionValue);
     final control = Checkbox(
-      activeColor: widget.activeColor,
-      checkColor: widget.checkColor,
-      focusColor: widget.focusColor,
-      hoverColor: widget.hoverColor,
-      materialTapTargetSize: widget.materialTapTargetSize,
-      value: selectedListItems.contains(optionValue),
-      tristate: widget.tristate,
+      activeColor: activeColor,
+      checkColor: checkColor,
+      focusColor: focusColor,
+      hoverColor: hoverColor,
+      materialTapTargetSize: materialTapTargetSize,
+      value: true == value?.contains(optionValue),
+      tristate: tristate,
       onChanged: isOptionDisabled
           ? null
           : (selected) {
+              List<T> selectedListItems = value == null ? [] : List.of(value!);
               selected!
                   ? selectedListItems.add(optionValue)
                   : selectedListItems.remove(optionValue);
-              setState(() {
-                widget.onChanged(selectedListItems);
-              });
+              onChanged(selectedListItems);
             },
     );
     final label = GestureDetector(
       onTap: isOptionDisabled
           ? null
           : () {
+              List<T> selectedListItems = value == null ? [] : List.of(value!);
               selectedListItems.contains(optionValue)
                   ? selectedListItems.remove(optionValue)
                   : selectedListItems.add(optionValue);
-              setState(() {
-                widget.onChanged(selectedListItems);
-              });
+              onChanged(selectedListItems);
             },
       child: option,
     );
 
     return Row(
       mainAxisSize: MainAxisSize.min,
       children: <Widget>[
-        if (widget.controlAffinity == ControlAffinity.leading) control,
+        if (controlAffinity == ControlAffinity.leading) control,
         Flexible(flex: 1, child: label),
-        if (widget.controlAffinity == ControlAffinity.trailing) control,
-        if (widget.separator != null && index != widget.options.length - 1)
-          widget.separator!,
+        if (controlAffinity == ControlAffinity.trailing) control,
+        if (separator != null && index != options.length - 1) separator!,
       ],
     );
   }

test/fields/form_builder_checkbox_group_test.dart

@@ -27,4 +27,45 @@ void main() {
     expect(formSave(), isTrue);
     expect(formValue(widgetName), equals(const [1, 3]));
   });
+  testWidgets('FormBuilderCheckboxGroup -- didChange',
+      (WidgetTester tester) async {
+    const fieldName = 'cbg1';
+    final testWidget = FormBuilderCheckboxGroup<int>(
+      name: fieldName,
+      options: const [
+        FormBuilderFieldOption(key: ValueKey('1'), value: 1),
+        FormBuilderFieldOption(key: ValueKey('2'), value: 2),
+        FormBuilderFieldOption(key: ValueKey('3'), value: 3),
+      ],
+    );
+    await tester.pumpWidget(buildTestableFieldWidget(testWidget));
+
+    expect(formSave(), isTrue);
+    expect(formValue(fieldName), isNull);
+    formFieldDidChange(fieldName, [1, 3]);
+    await tester.pumpAndSettle();
+    expect(formSave(), isTrue);
+    expect(formValue(fieldName), [1, 3]);
+
+    Checkbox checkbox1 = tester
+        .element(find.byKey(const ValueKey('1')))
+        .findAncestorWidgetOfExactType<Row>()!
+        .children
+        .first as Checkbox;
+    Checkbox checkbox2 = tester
+        .element(find.byKey(const ValueKey('2')))
+        .findAncestorWidgetOfExactType<Row>()!
+        .children
+        .first as Checkbox;
+    Checkbox checkbox3 = tester
+        .element(find.byKey(const ValueKey('3')))
+        .findAncestorWidgetOfExactType<Row>()!
+        .children
+        .first as Checkbox;
+
+    // checkboxes should represent the state of the didChange value
+    expect(checkbox1.value, true);
+    expect(checkbox2.value, false);
+    expect(checkbox3.value, true);
+  });
 }

test/fields/form_builder_tester.dart

@@ -15,4 +15,8 @@ Widget buildTestableFieldWidget(Widget widget) {
 }
 
 bool formSave() => _formKey.currentState!.saveAndValidate();
+void formFieldDidChange(String fieldName, dynamic value) {
+  _formKey.currentState!.fields[fieldName]!.didChange(value);
+}
+
 dynamic formValue(String name) => _formKey.currentState!.value[name];