Added custom iconed checkbox that can control its active, inactive and tristae icon

example/lib/main.dart

@@ -144,6 +144,7 @@ class _CompleteFormState extends State<CompleteForm> {
                       name: 'accept_terms',
                       initialValue: false,
                       onChanged: _onChanged,
+                      // activeIcon: Icons.text_snippet,
                       title: RichText(
                         text: const TextSpan(
                           children: [
@@ -275,6 +276,8 @@ class _CompleteFormState extends State<CompleteForm> {
                       decoration: const InputDecoration(
                           labelText: 'The language of my people'),
                       name: 'languages',
+                      materialTapTargetSize: MaterialTapTargetSize.padded,
+
                       // initialValue: const ['Dart'],
                       options: const [
                         FormBuilderFieldOption(value: 'Dart'),

example/pubspec.lock

@@ -7,7 +7,7 @@ packages:
       name: async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.9.0"
+    version: "2.8.2"
   boolean_selector:
     dependency: transitive
     description:
@@ -21,14 +21,21 @@ packages:
       name: characters
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.1"
+    version: "1.2.0"
+  charcode:
+    dependency: transitive
+    description:
+      name: charcode
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.3.1"
   clock:
     dependency: transitive
     description:
       name: clock
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.1"
+    version: "1.1.0"
   collection:
     dependency: transitive
     description:
@@ -49,7 +56,7 @@ packages:
       name: fake_async
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.1"
+    version: "1.3.0"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -61,7 +68,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "7.7.0"
+    version: "7.7.1"
   flutter_lints:
     dependency: "direct dev"
     description:
@@ -106,28 +113,28 @@ packages:
       name: matcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.12.12"
+    version: "0.12.11"
   material_color_utilities:
     dependency: transitive
     description:
       name: material_color_utilities
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.1.5"
+    version: "0.1.4"
   meta:
     dependency: transitive
     description:
       name: meta
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.0"
+    version: "1.7.0"
   path:
     dependency: transitive
     description:
       name: path
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.2"
+    version: "1.8.1"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -139,7 +146,7 @@ packages:
       name: source_span
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.9.0"
+    version: "1.8.2"
   stack_trace:
     dependency: transitive
     description:
@@ -160,21 +167,21 @@ packages:
       name: string_scanner
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.1"
+    version: "1.1.0"
   term_glyph:
     dependency: transitive
     description:
       name: term_glyph
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.1"
+    version: "1.2.0"
   test_api:
     dependency: transitive
     description:
       name: test_api
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.12"
+    version: "0.4.9"
   vector_math:
     dependency: transitive
     description:

lib/src/fields/form_builder_checkbox.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 import 'package:flutter_form_builder/flutter_form_builder.dart';
+import 'package:flutter_form_builder/src/widgets/custom_iconed_checkbox_list_tile.dart';
 
 /// Single Checkbox field
 class FormBuilderCheckbox extends FormBuilderField<bool> {
@@ -66,6 +67,21 @@ class FormBuilderCheckbox extends FormBuilderField<bool> {
   /// Normally, this property is left to its default value, false.
   final bool selected;
 
+  ///Default Flutter Icons are supported for now
+  ///Icon when the checkbox is in activestate
+  final IconData? activeIcon;
+
+  ///Default Flutter Icons are supported for now
+  ///Icon when the checkbox is in inactivestate
+  final IconData? inactiveIcon;
+
+  ///Default Flutter Icons are supported for now
+  ///Icon when the checkbox is in triactivestate
+  final IconData? tristateIcon;
+
+  ///Controls the borderRadius of the iconbox
+  final BorderRadius? borderRadius;
+
   /// Creates a single Checkbox field
   FormBuilderCheckbox({
     //From Super
@@ -98,6 +114,10 @@ class FormBuilderCheckbox extends FormBuilderField<bool> {
     this.shouldRequestFocus = false,
     this.subtitle,
     this.tristate = false,
+    this.activeIcon,
+    this.inactiveIcon,
+    this.tristateIcon,
+    this.borderRadius,
   }) : super(
           key: key,
           initialValue: initialValue,
@@ -116,7 +136,7 @@ class FormBuilderCheckbox extends FormBuilderField<bool> {
 
             return InputDecorator(
               decoration: state.decoration,
-              child: CheckboxListTile(
+              child: CustomIconedCheckboxListTile(
                 dense: true,
                 isThreeLine: false,
                 title: title,
@@ -130,6 +150,10 @@ class FormBuilderCheckbox extends FormBuilderField<bool> {
                         state.didChange(value);
                       }
                     : null,
+                borderRadius: borderRadius,
+                activeIcon: activeIcon,
+                inactiveIcon: inactiveIcon,
+                tristateIcon: tristateIcon,
                 checkColor: checkColor,
                 activeColor: activeColor,
                 secondary: secondary,

lib/src/fields/form_builder_checkbox_group.dart

@@ -25,6 +25,21 @@ class FormBuilderCheckboxGroup<T> extends FormBuilderField<List<T>> {
   final OptionsOrientation orientation;
   final bool shouldRequestFocus;
 
+  ///Controls the borderRadius of the iconbox
+  final BorderRadius? borderRadius;
+
+  ///Default Flutter Icons are supported for now
+  ///Icon when the checkbox is in activestate
+  final IconData? activeIcon;
+
+  ///Default Flutter Icons are supported for now
+  ///Icon when the checkbox is in inactivestate
+  final IconData? inactiveIcon;
+
+  ///Default Flutter Icons are supported for now
+  ///Icon when the checkbox is in triactivestate
+  final IconData? tristateIcon;
+
   /// Creates a list of Checkboxes for selecting multiple options
   FormBuilderCheckboxGroup({
     Key? key,
@@ -60,6 +75,10 @@ class FormBuilderCheckboxGroup<T> extends FormBuilderField<List<T>> {
     this.controlAffinity = ControlAffinity.leading,
     this.orientation = OptionsOrientation.wrap,
     this.shouldRequestFocus = false,
+    this.activeIcon,
+    this.inactiveIcon,
+    this.tristateIcon,
+    this.borderRadius,
   }) : super(
           key: key,
           initialValue: initialValue,
@@ -107,6 +126,10 @@ class FormBuilderCheckboxGroup<T> extends FormBuilderField<List<T>> {
                 wrapVerticalDirection: wrapVerticalDirection,
                 separator: separator,
                 controlAffinity: controlAffinity,
+                activeIcon: activeIcon,
+                inactiveIcon: inactiveIcon,
+                tristateIcon: tristateIcon,
+                borderRadius: borderRadius,
               ),
             );
           },

lib/src/painter/radial_reaction_painter.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/material.dart';
+
+class RadialReactionPainter extends CustomPainter {
+  Color? _hoverColor;
+  Color get hoverColor => _hoverColor!;
+  set hoverColor(Color? value) {
+    if (value == _hoverColor) {
+      return;
+    }
+    _hoverColor = value;
+  }
+
+  Color? _focusColor;
+  Color get focusColor => _focusColor!;
+  set focusColor(Color? value) {
+    if (value == _focusColor) {
+      return;
+    }
+    _focusColor = value;
+  }
+
+  bool? _isFocused;
+  bool get isFocused => _isFocused!;
+  set isFocused(bool? value) {
+    if (value == _isFocused) {
+      return;
+    }
+    _isFocused = value;
+  }
+
+  bool? _isHovered;
+  bool get isHovered => _isHovered!;
+  set isHovered(bool? value) {
+    if (value == _isHovered) {
+      return;
+    }
+    _isHovered = value;
+  }
+
+  Offset? _downPosition;
+  Offset? get downPosition => _downPosition;
+  set downPosition(Offset? value) {
+    if (value == _downPosition) {
+      return;
+    }
+    _downPosition = value;
+  }
+
+  double? _splashRadius;
+  double get splashRadius => _splashRadius!;
+  set splashRadius(double? value) {
+    if (value == _splashRadius) {
+      return;
+    }
+    _splashRadius = value;
+  }
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final Offset center =
+        Offset.lerp(downPosition, size.center(Offset.zero), 1.0)!;
+    if (isFocused) {
+      var radialFocusReactionPaint = Paint()
+        ..color = focusColor
+        ..style = PaintingStyle.fill;
+
+      return canvas.drawCircle(center, splashRadius, radialFocusReactionPaint);
+    }
+    if (isHovered) {
+      var radialHoverReactionPaint = Paint()
+        ..color = hoverColor
+        ..style = PaintingStyle.fill;
+
+      return canvas.drawCircle(center, splashRadius, radialHoverReactionPaint);
+    }
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => true;
+}