enable customize the checkbox widget using DefaultListBlockStyle style. (singerdmx#436)

Author: appflowy

lib/flutter_quill.dart

@@ -10,4 +10,5 @@ export 'src/models/themes/quill_icon_theme.dart';
 export 'src/widgets/controller.dart';
 export 'src/widgets/default_styles.dart';
 export 'src/widgets/editor.dart';
+export 'src/widgets/style_widgets/style_widgets.dart';
 export 'src/widgets/toolbar.dart';

lib/src/widgets/default_styles.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
+import 'package:flutter_quill/src/widgets/style_widgets/style_widgets.dart';
 import 'package:tuple/tuple.dart';
 
 class QuillStyles extends InheritedWidget {
@@ -43,6 +44,18 @@ class DefaultTextBlockStyle {
   final BoxDecoration? decoration;
 }
 
+class DefaultListBlockStyle extends DefaultTextBlockStyle {
+  DefaultListBlockStyle(
+    TextStyle style,
+    Tuple2<double, double> verticalSpacing,
+    Tuple2<double, double> lineSpacing,
+    BoxDecoration? decoration,
+    this.checkboxUIBuilder,
+  ) : super(style, verticalSpacing, lineSpacing, decoration);
+
+  final QuillCheckboxBuilder? checkboxUIBuilder;
+}
+
 class DefaultStyles {
   DefaultStyles({
     this.h1,
@@ -85,7 +98,7 @@ class DefaultStyles {
   final TextStyle? link;
   final Color? color;
   final DefaultTextBlockStyle? placeHolder;
-  final DefaultTextBlockStyle? lists;
+  final DefaultListBlockStyle? lists;
   final DefaultTextBlockStyle? quote;
   final DefaultTextBlockStyle? code;
   final DefaultTextBlockStyle? indent;
@@ -172,8 +185,8 @@ class DefaultStyles {
             const Tuple2(0, 0),
             const Tuple2(0, 0),
             null),
-        lists: DefaultTextBlockStyle(
-            baseStyle, baseSpacing, const Tuple2(0, 6), null),
+        lists: DefaultListBlockStyle(
+            baseStyle, baseSpacing, const Tuple2(0, 6), null, null),
         quote: DefaultTextBlockStyle(
             TextStyle(color: baseStyle.color!.withOpacity(0.6)),
             baseSpacing,

lib/src/widgets/style_widgets/checkbox.dart

@@ -8,12 +8,14 @@ class QuillCheckbox extends StatelessWidget {
     this.isChecked = false,
     this.offset,
     this.onTap,
+    this.uiBuilder,
   }) : super(key: key);
   final TextStyle? style;
   final double? width;
   final bool isChecked;
   final int? offset;
   final Function(int, bool)? onTap;
+  final QuillCheckboxBuilder? uiBuilder;
 
   void _onCheckboxClicked(bool? newValue) {
     if (onTap != null && newValue != null && offset != null) {
@@ -23,17 +25,36 @@ class QuillCheckbox extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      alignment: AlignmentDirectional.topEnd,
-      width: width,
-      padding: const EdgeInsetsDirectional.only(end: 13),
-      child: GestureDetector(
-        onLongPress: () => _onCheckboxClicked(!isChecked),
-        child: Checkbox(
-          value: isChecked,
-          onChanged: _onCheckboxClicked,
+    Widget child;
+    if (uiBuilder != null) {
+      child = uiBuilder!.build(
+        context: context,
+        isChecked: isChecked,
+        onChanged: _onCheckboxClicked,
+      );
+    } else {
+      child = Container(
+        alignment: AlignmentDirectional.topEnd,
+        width: width,
+        padding: const EdgeInsetsDirectional.only(end: 13),
+        child: GestureDetector(
+          onLongPress: () => _onCheckboxClicked(!isChecked),
+          child: Checkbox(
+            value: isChecked,
+            onChanged: _onCheckboxClicked,
+          ),
         ),
-      ),
-    );
+      );
+    }
+
+    return child;
   }
 }
+
+abstract class QuillCheckboxBuilder {
+  Widget build({
+    required BuildContext context,
+    required bool isChecked,
+    required void Function(bool?) onChanged,
+  });
+}

lib/src/widgets/text_block.dart

@@ -176,6 +176,7 @@ class EditableTextBlock extends StatelessWidget {
         isChecked: true,
         offset: block.offset + line.offset,
         onTap: onCheckboxTap,
+        uiBuilder: defaultStyles.lists!.checkboxUIBuilder,
       );
     }
 
@@ -186,6 +187,7 @@ class EditableTextBlock extends StatelessWidget {
         width: 32,
         offset: block.offset + line.offset,
         onTap: onCheckboxTap,
+        uiBuilder: defaultStyles.lists!.checkboxUIBuilder,
       );
     }