From 85cab8ed440dde3a1d088ba9f2dcf9c901b60b97 Mon Sep 17 00:00:00 2001 From: atanasyordanov21 <63714308+atanasyordanov21@users.noreply.github.com> Date: Tue, 23 Apr 2024 19:13:47 +0300 Subject: [PATCH] feat: 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 --- lib/src/components/tooltip/tooltip.dart | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/lib/src/components/tooltip/tooltip.dart b/lib/src/components/tooltip/tooltip.dart index b98eb2c9..8f2fcc41 100644 --- 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, ), ), ],