fix(CustomWidgets): resolve issue preventing user from using custom w…

…idget removeLayerArea

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 6.1.1
+- **FIX**(CustomWidgets): resolve issue preventing user from using custom widget `removeLayerArea`.
+
 ## 6.1.0
 - **FEAT**(Layer): Introduce the `enableInteraction` configuration in the `Layer` class to toggle interaction capabilities.
 - **FEAT**(CustomWidgets): Add `bodyItemsRecorded` to all editors which can direct generate the final image. This option enables the recording of custom body widgets, enhancing frame functionality.

lib/models/custom_widgets/custom_widgets_main_editor.dart

@@ -69,47 +69,8 @@ class CustomWidgetsMainEditor {
   /// ```
   final Future<bool> Function(ProImageEditorState editor)? closeWarningDialog;
 
-  /// A custom widget for removing a layer or element from the editor interface,
-  /// when hover the layer over the area.
-  ///
-  /// **Example:**
-  /// ```dart
-  /// configs: ProImageEditorConfigs(
-  ///   customWidgets: ImageEditorCustomWidgets(
-  ///     removeLayer: (key, stream) {
-  ///       return Positioned(
-  ///         key: key, // Important add the key
-  ///         top: 0,
-  ///         left: 0,
-  ///         child: SafeArea(
-  ///           bottom: false,
-  ///           child: StreamBuilder(
-  ///               stream: stream, // Important add the stream
-  ///               initialData: false,
-  ///               builder: (context, snapshot) {
-  ///                 return Container(
-  ///                   height: 56,
-  ///                   width: 56,
-  ///                   decoration: BoxDecoration(
-  ///                     color:
-  ///                         snapshot.data ? Colors.red : Colors.grey.shade800,
-  ///                     borderRadius: const BorderRadius.only(
-  ///                         bottomRight: Radius.circular(100)),
-  ///                   ),
-  ///                   padding: const EdgeInsets.only(right: 12, bottom: 7),
-  ///                   child: const Center(
-  ///                     child: Icon(Icons.delete_outline, size: 28),
-  ///                   ),
-  ///                 );
-  ///               },
-  ///            ),
-  ///         ),
-  ///       );
-  ///     },
-  ///   ),
-  /// );
-  /// ```
-  final RemoveButton? removeLayerArea;
+  /// {@macro removeLayerArea}
+  final RemoveLayerArea? removeLayerArea;
 
   /// This is helpful when you want to interact with the full body.
   final Widget Function(
@@ -171,7 +132,7 @@ class CustomWidgetsMainEditor {
   /// others unchanged.
   CustomWidgetsMainEditor copyWith({
     Future<bool> Function(ProImageEditorState editor)? closeWarningDialog,
-    RemoveButton? removeLayerArea,
+    RemoveLayerArea? removeLayerArea,
     Widget Function(
       ProImageEditorState editor,
       Stream<void> rebuildStream,

lib/models/custom_widgets/utils/custom_widgets_typedef.dart

@@ -4,14 +4,63 @@ import 'package:flutter/widgets.dart';
 // Project imports:
 import 'package:pro_image_editor/widgets/custom_widgets/reactive_custom_widget.dart';
 
-/// A typedef for creating a remove-area
+import '../../../modules/main_editor/main_editor.dart';
+
+/// {@template removeLayerArea}
+/// A function that returns a [Widget] used as a remove area in the
+/// editor interface. It provides access to the [removeAreaKey] for
+/// positioning or targeting the remove area, the [editor] state for
+/// managing editor-related actions, and a [rebuildStream] to handle
+/// updates for interactive elements.
 ///
-/// - [key] - A [GlobalKey] to uniquely identify the button.
-/// - [rebuildStream] - A [Stream] that triggers the widget to rebuild.
+/// The [removeAreaKey] parameter is a [GlobalKey] that points to the
+/// specific area where elements should be removed or targeted. The
+/// [editor] parameter allows access to the current editor state, and
+/// the [rebuildStream] stream enables dynamic rebuilding of the widget.
 ///
-/// Returns a [ReactiveCustomWidget] that handles the removal of a button.
-typedef RemoveButton = ReactiveCustomWidget Function(
-  GlobalKey key,
+/// **Example Usage:**
+/// ```dart
+/// removeLayerArea: (removeAreaKey, editor, rebuildStream) {
+///   return Positioned(
+///     key: removeAreaKey,
+///     top: 0,
+///     left: 0,
+///     child: SafeArea(
+///       bottom: false,
+///       child: StreamBuilder(
+///         stream: rebuildStream,
+///         builder: (context, snapshot) {
+///           return Container(
+///             height: kToolbarHeight,
+///             width: kToolbarHeight,
+///             decoration: BoxDecoration(
+///               color: editor.layerInteractionManager.hoverRemoveBtn
+///                   ? editor.imageEditorTheme.layerInteraction
+///                       .removeAreaBackgroundActive
+///                   : editor.imageEditorTheme.layerInteraction
+///                       .removeAreaBackgroundInactive,
+///               borderRadius: const BorderRadius.only(
+///                 bottomRight: Radius.circular(100),
+///               ),
+///             ),
+///             padding: const EdgeInsets.only(right: 12, bottom: 7),
+///             child: Center(
+///               child: Icon(
+///                 editor.icons.removeElementZone,
+///                 size: 28,
+///               ),
+///             ),
+///           );
+///         },
+///       ),
+///     ),
+///   );
+/// },
+/// ```
+/// {@endtemplate}
+typedef RemoveLayerArea = Widget Function(
+  GlobalKey removeAreaKey,
+  ProImageEditorState editor,
   Stream<void> rebuildStream,
 );
 

lib/modules/main_editor/main_editor.dart

@@ -2586,8 +2586,11 @@ class ProImageEditorState extends State<ProImageEditor>
   }
 
   Widget _buildRemoveIcon() {
-    return customWidgets.mainEditor.removeLayerArea
-            ?.call(_removeAreaKey, _controllers.removeBtnCtrl.stream) ??
+    return customWidgets.mainEditor.removeLayerArea?.call(
+          _removeAreaKey,
+          this,
+          _controllers.removeBtnCtrl.stream,
+        ) ??
         Positioned(
           key: _removeAreaKey,
           top: 0,

pubspec.yaml

@@ -1,6 +1,6 @@
 name: pro_image_editor
 description: "A Flutter image editor: Seamlessly enhance your images with user-friendly editing features."
-version: 6.1.0
+version: 6.1.1
 homepage: https://github.com/hm21/pro_image_editor/
 repository: https://github.com/hm21/pro_image_editor/
 issue_tracker: https://github.com/hm21/pro_image_editor/issues/