Merge pull request #930 from AppFlowy-IO/feat/reorder_flex_opti

chore: reduce rebuild when end dragging

Author: appflowy

frontend/app_flowy/packages/appflowy_board/lib/src/utils/log.dart

@@ -26,7 +26,7 @@ class Log {
 
   static void trace(String? message) {
     if (enableLog) {
-      // debugPrint('❗️[Trace] - ${DateTime.now().second}=> $message');
+      debugPrint('❗️[Trace] - ${DateTime.now().second}=> $message');
     }
   }
 }

frontend/app_flowy/packages/appflowy_board/lib/src/widgets/board_column/board_column.dart

@@ -112,7 +112,7 @@ class AFBoardColumnWidget extends StatefulWidget {
     this.cornerRadius = 0.0,
     this.backgroundColor = Colors.transparent,
   })  : globalKey = GlobalObjectKey(dataSource.columnData.id),
-        config = const ReorderFlexConfig(),
+        config = const ReorderFlexConfig(setStateWhenEndDrag: false),
         super(key: key);
 
   @override

frontend/app_flowy/packages/appflowy_board/lib/src/widgets/reorder_flex/reorder_flex.dart

@@ -46,12 +46,20 @@ class ReorderFlexConfig {
   // How long an animation to scroll to an off-screen element
   final Duration scrollAnimationDuration = const Duration(milliseconds: 300);
 
+  /// Determines if setSatte method needs to be called when the drag is complete.
+  /// Default value is [true].
+  ///
+  /// If the [ReorderFlex] will be rebuild after the [ReorderFlex]'s children
+  /// were changed, then the [setStateWhenEndDrag] should set to [false].
+  final bool setStateWhenEndDrag;
+
   final bool useMoveAnimation;
 
   final bool useMovePlaceholder;
 
   const ReorderFlexConfig({
     this.useMoveAnimation = true,
+    this.setStateWhenEndDrag = true,
   }) : useMovePlaceholder = !useMoveAnimation;
 }
 
@@ -370,11 +378,11 @@ class ReorderFlexState extends State<ReorderFlex>
       },
       onDragEnded: (dragTargetData) {
         if (!mounted) return;
-
         Log.debug(
             "[DragTarget]: Column:[${widget.dataSource.identifier}] end dragging");
         _notifier.updateDragTargetIndex(-1);
-        setState(() {
+
+        onDragEnded() {
           if (dragTargetData.reorderFlexId == widget.reorderFlexId) {
             _onReordered(
               dragState.dragStartIndex,
@@ -383,7 +391,13 @@ class ReorderFlexState extends State<ReorderFlex>
           }
           dragState.endDragging();
           widget.onDragEnded?.call();
-        });
+        }
+
+        if (widget.config.setStateWhenEndDrag) {
+          setState(() => onDragEnded());
+        } else {
+          onDragEnded();
+        }
       },
       onWillAccept: (FlexDragTargetData dragTargetData) {
         // Do not receive any events if the Insert item is animating.

frontend/app_flowy/pubspec.lock

@@ -28,14 +28,14 @@ packages:
       path: "packages/appflowy_board"
       relative: true
     source: path
-    version: "0.0.5"
+    version: "0.0.6"
   appflowy_editor:
     dependency: "direct main"
     description:
       path: "packages/appflowy_editor"
       relative: true
     source: path
-    version: "0.0.2"
+    version: "0.0.3"
   args:
     dependency: transitive
     description: