fix/resizable tap region (#59)

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.4.2
+
+- Add `ShadGestureDetector` with hover strategies for touchscreens.
+- Add `ShadTooltipController` to `ShadTooltip`.
+- Increase the divider size in the `ShadResizable` component.
+
 ## 0.4.1
 
 - Expose `ShadResizableTheme`.

example/.metadata

@@ -4,7 +4,7 @@
 # This file should be version controlled and should not be manually edited.
 
 version:
-  revision: "300451adae589accbece3490f4396f10bdf15e6e"
+  revision: "54e66469a933b60ddf175f858f82eaeb97e48c8d"
   channel: "stable"
 
 project_type: app
@@ -13,11 +13,11 @@ project_type: app
 migration:
   platforms:
     - platform: root
-      create_revision: 300451adae589accbece3490f4396f10bdf15e6e
-      base_revision: 300451adae589accbece3490f4396f10bdf15e6e
-    - platform: macos
-      create_revision: 300451adae589accbece3490f4396f10bdf15e6e
-      base_revision: 300451adae589accbece3490f4396f10bdf15e6e
+      create_revision: 54e66469a933b60ddf175f858f82eaeb97e48c8d
+      base_revision: 54e66469a933b60ddf175f858f82eaeb97e48c8d
+    - platform: ios
+      create_revision: 54e66469a933b60ddf175f858f82eaeb97e48c8d
+      base_revision: 54e66469a933b60ddf175f858f82eaeb97e48c8d
 
   # User provided section
 

example/lib/pages/resizable.dart

@@ -31,19 +31,21 @@ class _ResizablePageState extends State<ResizablePage> {
             child: ShadResizablePanelGroup(
               mainAxisSize: MainAxisSize.min,
               height: 200,
+              showHandle: true,
               children: [
                 ShadResizablePanel(
-                  defaultSize: 200,
+                  defaultSize: 150,
                   minSize: 50,
                   maxSize: 300,
                   child: Center(
                     child: Text('One', style: theme.textTheme.large),
                   ),
                 ),
                 ShadResizablePanel(
-                  defaultSize: 200,
+                  defaultSize: 150,
                   child: ShadResizablePanelGroup(
                     axis: Axis.vertical,
+                    showHandle: true,
                     children: [
                       ShadResizablePanel(
                         defaultSize: 50,

lib/src/components/resizable.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/rendering.dart';
 import 'package:lucide_icons_flutter/lucide_icons.dart';
 import 'package:shadcn_ui/src/components/image.dart';
 import 'package:shadcn_ui/src/theme/theme.dart';
@@ -126,6 +125,7 @@ class ShadResizablePanelGroup extends StatefulWidget {
     this.handleIconSrc,
     this.handleIcon,
     this.dividerSize,
+    this.dividerThickness,
     this.onDividerDoubleTap,
     this.resetOnDoubleTap,
     this.dividerColor,
@@ -150,6 +150,7 @@ class ShadResizablePanelGroup extends StatefulWidget {
   final ShadImageSrc? handleIconSrc;
   final Widget? handleIcon;
   final double? dividerSize;
+  final double? dividerThickness;
   final VoidCallback? onDividerDoubleTap;
   final bool? resetOnDoubleTap;
   final Color? dividerColor;
@@ -249,10 +250,14 @@ class ShadResizablePanelGroupState extends State<ShadResizablePanelGroup> {
     final effectiveShowHandle =
         widget.showHandle ?? theme.resizableTheme.showHandle ?? false;
     final effectiveDividerSize =
-        widget.dividerSize ?? theme.resizableTheme.dividerSize ?? 1;
+        widget.dividerSize ?? theme.resizableTheme.dividerSize ?? 8.0;
+
+    final effectiveDividerThickness =
+        widget.dividerThickness ?? theme.resizableTheme.dividerThickness ?? 1.0;
     final effectiveResetOnDoubleTap = widget.resetOnDoubleTap ??
         theme.resizableTheme.resetOnDoubleTap ??
         true;
+
     final effectiveDividerColor = widget.dividerColor ??
         theme.resizableTheme.dividerColor ??
         theme.colorScheme.border;
@@ -297,7 +302,7 @@ class ShadResizablePanelGroupState extends State<ShadResizablePanelGroup> {
       Axis.horizontal => VerticalDivider(
           indent: 0,
           endIndent: 0,
-          thickness: effectiveDividerSize,
+          thickness: effectiveDividerThickness,
           width: effectiveDividerSize,
           color: effectiveDividerColor,
         ),
@@ -308,7 +313,7 @@ class ShadResizablePanelGroupState extends State<ShadResizablePanelGroup> {
             indent: 0,
             endIndent: 0,
             height: effectiveDividerSize,
-            thickness: effectiveDividerSize,
+            thickness: effectiveDividerThickness,
             color: effectiveDividerColor,
           ),
         ),
@@ -343,10 +348,11 @@ class ShadResizablePanelGroupState extends State<ShadResizablePanelGroup> {
 
     final dividers = <Widget>[];
     for (var i = 0; i < dividersCount; i++) {
-      final leadingPosition = effectivesSizes.sublist(0, i + 1).fold<double>(
+      var leadingPosition = effectivesSizes.sublist(0, i + 1).fold<double>(
             0,
             (previousValue, element) => previousValue + element,
           );
+      leadingPosition -= (effectiveDividerSize - effectiveDividerThickness);
       dividers.add(
         Positioned(
           top: isHorizontal ? 0 : leadingPosition,
@@ -397,27 +403,15 @@ class ShadResizablePanelGroupState extends State<ShadResizablePanelGroup> {
                 if (dragging.value) return;
                 mouseCursorController.cursor = MouseCursor.defer;
               },
-              child: SizedBox(
-                width: widget.axis == Axis.horizontal
-                    ? effectiveDividerSize
-                    : null,
-                height:
-                    widget.axis == Axis.vertical ? effectiveDividerSize : null,
-                child: effectiveShowHandle
-                    ? Stack(
-                        alignment: AlignmentDirectional.center,
-                        children: [
-                          divider,
-                          OverflowBox(
-                            maxWidth: effectiveHandleSize.width * 2,
-                            maxHeight: effectiveHandleSize.height * 2,
-                            fit: OverflowBoxFit.deferToChild,
-                            child: handle,
-                          ),
-                        ],
-                      )
-                    : divider,
-              ),
+              child: effectiveShowHandle
+                  ? Stack(
+                      alignment: AlignmentDirectional.center,
+                      children: [
+                        divider,
+                        handle,
+                      ],
+                    )
+                  : divider,
             ),
           ),
         ),

lib/src/theme/components/resizable.dart

@@ -20,6 +20,7 @@ class ShadResizableTheme {
     this.handleDecoration,
     this.handlePadding,
     this.handleSize,
+    this.dividerThickness,
     this.dividerColor,
   });
 
@@ -36,6 +37,7 @@ class ShadResizableTheme {
   final BoxDecoration? handleDecoration;
   final EdgeInsets? handlePadding;
   final Size? handleSize;
+  final double? dividerThickness;
   final Color? dividerColor;
 
   static ShadResizableTheme lerp(
@@ -60,6 +62,7 @@ class ShadResizableTheme {
       handlePadding: EdgeInsets.lerp(a.handlePadding, b.handlePadding, t),
       handleSize: Size.lerp(a.handleSize, b.handleSize, t),
       dividerColor: Color.lerp(a.dividerColor, b.dividerColor, t),
+      dividerThickness: lerpDouble(a.dividerThickness, b.dividerThickness, t),
     );
   }
 
@@ -80,6 +83,7 @@ class ShadResizableTheme {
       handlePadding: other.handlePadding,
       handleSize: other.handleSize,
       dividerColor: other.dividerColor,
+      dividerThickness: other.dividerThickness,
     );
   }
 
@@ -98,6 +102,7 @@ class ShadResizableTheme {
     EdgeInsets? handlePadding,
     Size? handleSize,
     Color? dividerColor,
+    double? dividerThickness,
   }) {
     return ShadResizableTheme(
       merge: merge ?? this.merge,
@@ -114,6 +119,7 @@ class ShadResizableTheme {
       handlePadding: handlePadding ?? this.handlePadding,
       handleSize: handleSize ?? this.handleSize,
       dividerColor: dividerColor ?? this.dividerColor,
+      dividerThickness: dividerThickness ?? this.dividerThickness,
     );
   }
 
@@ -135,7 +141,8 @@ class ShadResizableTheme {
         other.handleDecoration == handleDecoration &&
         other.handlePadding == handlePadding &&
         other.handleSize == handleSize &&
-        other.dividerColor == dividerColor;
+        other.dividerColor == dividerColor &&
+        other.dividerThickness == dividerThickness;
   }
 
   @override
@@ -153,6 +160,7 @@ class ShadResizableTheme {
         handleDecoration.hashCode ^
         handlePadding.hashCode ^
         handleSize.hashCode ^
-        dividerColor.hashCode;
+        dividerColor.hashCode ^
+        dividerThickness.hashCode;
   }
 }

lib/src/theme/themes/component_default.dart

@@ -742,7 +742,8 @@ abstract class ShadComponentDefaultTheme {
   }) {
     return ShadResizableTheme(
       showHandle: false,
-      dividerSize: 1,
+      dividerThickness: 1,
+      dividerSize: 8,
       dividerColor: colorScheme.border,
       resetOnDoubleTap: true,
       handleDecoration: BoxDecoration(

lib/src/utils/gesture_detector.dart

@@ -1,4 +1,3 @@
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';

pubspec.yaml

@@ -1,6 +1,6 @@
 name: shadcn_ui
 description: shadcn-ui ported in Flutter. Awesome UI components for Flutter, fully customizable.
-version: 0.4.1
+version: 0.4.2
 homepage: https://mariuti.com/shadcn-ui
 repository: https://github.com/nank1ro/flutter-shadcn-ui
 documentation: https://mariuti.com/shadcn-ui