Add the ability to use custom widgets for lists

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 All notable changes to this project will be documented in this file.
 
+## 9.0.4
+* Feature: [#1611](https://github.com/singerdmx/flutter-quill/issues/1611)
+
 ## 9.0.3
 * Flutter Quill Extensions:
   * Fix file image support for web image emebed builder

example/lib/presentation/quill/my_quill_editor.dart

@@ -37,16 +37,11 @@ class MyQuillEditor extends StatelessWidget {
           codeBlock: QuillEditorCodeBlockElementOptions(
             enableLineNumbers: true,
           ),
-          // orderedList: QuillEditorOrderedListElementOptions(
-          //   backgroundColor: Colors.amber,
-          //   fontColor: Colors.black,
-          // ),
-          // unorderedList: QuillEditorUnOrderedListElementOptions(
-          //   backgroundColor: Colors.green,
-          //   fontColor: Colors.red,
-          // ),
+          orderedList: QuillEditorOrderedListElementOptions(
+            customWidget: Icon(Icons.add),
+          ),
           unorderedList: QuillEditorUnOrderedListElementOptions(
-            useTextColorForDot: false,
+            useTextColorForDot: true,
           ),
         ),
         customStyles: const DefaultStyles(

lib/src/models/config/editor/elements/list/ordered_list.dart

@@ -1,13 +1,16 @@
 import 'package:equatable/equatable.dart';
 import 'package:flutter/foundation.dart' show immutable;
+import 'package:flutter/widgets.dart' show Widget;
 
 @immutable
 class QuillEditorOrderedListElementOptions extends Equatable {
   const QuillEditorOrderedListElementOptions({
     this.useTextColorForDot = true,
+    this.customWidget,
   });
 
   final bool useTextColorForDot;
+  final Widget? customWidget;
   @override
   List<Object?> get props => [];
 }

lib/src/models/config/editor/elements/list/unordered_list.dart

@@ -1,13 +1,16 @@
 import 'package:equatable/equatable.dart';
 import 'package:flutter/foundation.dart' show immutable;
+import 'package:flutter/widgets.dart' show Widget;
 
 @immutable
 class QuillEditorUnOrderedListElementOptions extends Equatable {
   const QuillEditorUnOrderedListElementOptions({
     this.useTextColorForDot = true,
+    this.customWidget,
   });
 
   final bool useTextColorForDot;
+  final Widget? customWidget;
   @override
   List<Object?> get props => [];
 }

lib/src/widgets/style_widgets/bullet_point.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/widgets.dart';
 
+import '../../extensions/quill_configurations_ext.dart';
+
 class QuillEditorBulletPoint extends StatelessWidget {
   const QuillEditorBulletPoint({
     required this.style,
@@ -23,11 +25,13 @@ class QuillEditorBulletPoint extends StatelessWidget {
       width: width,
       padding: EdgeInsetsDirectional.only(end: padding),
       color: backgroundColor,
-      child: Text(
-        '•',
-        style: style,
-        textAlign: textAlign,
-      ),
+      child: context.quillEditorConfigurations?.elementOptions.unorderedList
+              .customWidget ??
+          Text(
+            '•',
+            style: style,
+            textAlign: textAlign,
+          ),
     );
   }
 }

lib/src/widgets/style_widgets/number_point.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-import '../../models/documents/attribute.dart';
+import '../../../flutter_quill.dart';
 import '../quill/text_block.dart';
 
 class QuillEditorNumberPoint extends StatelessWidget {
@@ -41,11 +41,13 @@ class QuillEditorNumberPoint extends StatelessWidget {
         width: width,
         padding: EdgeInsetsDirectional.only(end: padding),
         color: backgroundColor,
-        child: Text(
-          withDot ? '$s.' : s,
-          style: style,
-          textAlign: textAlign,
-        ),
+        child: context.quillEditorConfigurations?.elementOptions.orderedList
+                .customWidget ??
+            Text(
+              withDot ? '$s.' : s,
+              style: style,
+              textAlign: textAlign,
+            ),
       );
     }
     if (attrs.containsKey(Attribute.indent.key)) {
@@ -77,11 +79,13 @@ class QuillEditorNumberPoint extends StatelessWidget {
       width: width,
       padding: EdgeInsetsDirectional.only(end: padding),
       color: backgroundColor,
-      child: Text(
-        withDot ? '$s.' : s,
-        style: style,
-        textAlign: textAlign,
-      ),
+      child: context.quillEditorConfigurations?.elementOptions.orderedList
+              .customWidget ??
+          Text(
+            withDot ? '$s.' : s,
+            style: style,
+            textAlign: textAlign,
+          ),
     );
   }