Component tooltip (#33)

* create tooltip * create Widgetbook for ZetaTooltip * add LayoutBuilder * [automated commit] lint format and import sort * fix text overflow when there is horizontal arrow and maxWidth is null --------- Co-authored-by: github-actions <[email protected]>
ZebraDevs · Apr 25, 2024 · 36d69d8 · 36d69d8
1 parent b04527c
commit 36d69d8
Showing 1 changed file with 12 additions and 5 deletions.
diff --git a/lib/src/components/tooltip/tooltip.dart b/lib/src/components/tooltip/tooltip.dart
@@ -3,6 +3,9 @@ import 'package:flutter/rendering.dart';
 
 import '../../../zeta_flutter.dart';
 
+const _horizontalArrowSize = Size(4, 8);
+const _verticalArrowSize = Size(8, 4);
+
 /// The direction of [ZetaTooltip]'s arrow
 enum ZetaTooltipArrowDirection {
   /// [up]
@@ -74,6 +77,10 @@ class ZetaTooltip extends StatelessWidget {
   Widget build(BuildContext context) {
     final zeta = Zeta.of(context);
     final color = this.color ?? zeta.colors.textDefault;
+    final horizontalArrowWidth =
+        [ZetaTooltipArrowDirection.left, ZetaTooltipArrowDirection.right].contains(arrowDirection)
+            ? _horizontalArrowSize.width
+            : 0;
 
     return LayoutBuilder(
       builder: (context, constraints) {
@@ -87,7 +94,7 @@ class ZetaTooltip extends StatelessWidget {
                     color: color,
                     direction: arrowDirection,
                   ),
-                  size: const Size(8, 4),
+                  size: _verticalArrowSize,
                 ),
               ),
             Row(
@@ -100,12 +107,12 @@ class ZetaTooltip extends StatelessWidget {
                         color: color,
                         direction: arrowDirection,
                       ),
-                      size: const Size(4, 8),
+                      size: _horizontalArrowSize,
                     ),
                   ),
                 ConstrainedBox(
                   constraints: BoxConstraints(
-                    maxWidth: maxWidth ?? constraints.maxWidth,
+                    maxWidth: maxWidth ?? (constraints.maxWidth - horizontalArrowWidth),
                   ),
                   child: DecoratedBox(
                     decoration: BoxDecoration(
@@ -136,7 +143,7 @@ class ZetaTooltip extends StatelessWidget {
                         color: color,
                         direction: arrowDirection,
                       ),
-                      size: const Size(4, 8),
+                      size: _horizontalArrowSize,
                     ),
                   ),
               ],
@@ -148,7 +155,7 @@ class ZetaTooltip extends StatelessWidget {
                     color: color,
                     direction: arrowDirection,
                   ),
-                  size: const Size(8, 4),
+                  size: _verticalArrowSize,
                 ),
               ),
           ],