Highlighting the tab's drop position.

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.18.0
+
+* Highlighting the tab's drop position.
+
 ## 1.17.0
 
 * Tab reordering

lib/src/internal/drop_tab_widget.dart

@@ -0,0 +1,79 @@
+import 'package:flutter/material.dart';
+import 'package:meta/meta.dart';
+import 'package:tabbed_view/src/internal/tabbed_view_provider.dart';
+import 'package:tabbed_view/src/tab_data.dart';
+
+@internal
+class DropTabWidget extends StatefulWidget {
+  const DropTabWidget(
+      {super.key,
+      required this.provider,
+      required this.newIndex,
+      required this.child});
+
+  final TabbedViewProvider provider;
+  final Widget child;
+  final int newIndex;
+
+  @override
+  State<StatefulWidget> createState() => DropTabWidgetState();
+}
+
+class DropTabWidgetState extends State<DropTabWidget> {
+  bool _over = false;
+
+  @override
+  void didUpdateWidget(covariant DropTabWidget oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.provider.draggingTabIndex == null) {
+      _over = false;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return DragTarget<TabData>(
+      builder: (
+        BuildContext context,
+        List<dynamic> accepted,
+        List<dynamic> rejected,
+      ) {
+        if (_over) {
+          return CustomPaint(
+              foregroundPainter: _CustomPainter(), child: widget.child);
+        }
+        return widget.child;
+      },
+      onMove: (details) {
+        if (_over == false) {
+          setState(() {
+            _over = true;
+          });
+        }
+      },
+      onLeave: (data) {
+        setState(() {
+          _over = false;
+        });
+      },
+      onAccept: (TabData tabData) {
+        widget.provider.controller.reorderTab(tabData.index, widget.newIndex);
+      },
+    );
+  }
+}
+
+class _CustomPainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    Paint paint = Paint()
+      ..color = Colors.black
+      ..style = PaintingStyle.fill;
+    canvas.drawRect(Rect.fromLTWH(0, 0, 3, size.height), paint);
+  }
+
+  @override
+  bool shouldRepaint(covariant CustomPainter oldDelegate) {
+    return true;
+  }
+}

lib/src/tab_widget.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:tabbed_view/src/draggable_config.dart';
 import 'package:tabbed_view/src/flow_layout.dart';
+import 'package:tabbed_view/src/internal/drop_tab_widget.dart';
 import 'package:tabbed_view/src/internal/tab_drag_feedback_widget.dart';
 import 'package:tabbed_view/src/internal/tabbed_view_provider.dart';
 import 'package:tabbed_view/src/tab_button.dart';
@@ -117,17 +118,18 @@ class TabWidget extends StatelessWidget {
             }
           },
           onDraggableCanceled: (velocity, offset) {
+            provider.onTabDrag(null);
             if (draggableConfig.onDraggableCanceled != null) {
               draggableConfig.onDraggableCanceled!(velocity, offset);
             }
           },
           onDragEnd: (details) {
-            provider.onTabDrag(null);
             if (draggableConfig.onDragEnd != null) {
               draggableConfig.onDragEnd!(details);
             }
           },
           onDragCompleted: () {
+            provider.onTabDrag(null);
             if (draggableConfig.onDragCompleted != null) {
               draggableConfig.onDragCompleted!();
             }
@@ -140,19 +142,10 @@ class TabWidget extends StatelessWidget {
               : tabTheme.draggingOpacity);
     }
 
-    if (provider.controller.reorderEnable) {
-      return DragTarget<TabData>(
-        builder: (
-          BuildContext context,
-          List<dynamic> accepted,
-          List<dynamic> rejected,
-        ) {
-          return tabWidget;
-        },
-        onAccept: (TabData tabData) {
-          provider.controller.reorderTab(tabData.index, tab.index);
-        },
-      );
+    if (provider.controller.reorderEnable &&
+        provider.draggingTabIndex != tab.index) {
+      return DropTabWidget(
+          provider: provider, newIndex: tab.index, child: tabWidget);
     }
     return tabWidget;
   }