diff --git a/README.md b/README.md index fadacd74..935d196a 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,16 @@ A Flutter package allows you to Showcase/Highlight your widgets step by step. ## Migration guide for release 4.0.0 Renamed parameters `titleAlignment` to `titleTextAlign` and `descriptionAlignment` to `descriptionTextAlign` to correspond it more with the TextAlign property +Before: +`titleAlignment` and `descriptionAlignment` is used for text alignment, so actual widget alignment +will always be start. + +After: +`titleAlignment` and `descriptionAlignment` will be used for widget alignment and for the text +alignment use `titleTextAlign` and `descriptionTextAlign`. Default `titleAlignment` +and `descriptionAlignment` will be center and `titleTextAlign` and `descriptionTextAlign` will be +start. + ## Migration guide for release 3.0.0 Removed builder widget from `ShowCaseWidget` and replaced it with builder function diff --git a/lib/src/models/tooltip_action_button.dart b/lib/src/models/tooltip_action_button.dart index 39ab9ef4..5e017d47 100644 --- a/lib/src/models/tooltip_action_button.dart +++ b/lib/src/models/tooltip_action_button.dart @@ -51,16 +51,16 @@ class TooltipActionButton { final List hideActionWidgetForShowcase; /// A configuration for a tooltip action button or Provide a custom tooltip action. - + /// /// This class allows you to define predefined actions like "Next," /// "Previous," and "Close," or specify a custom action widget. - + /// /// **Required arguments:** - + /// /// - `type`: The type of the action button (e.g., `TooltipDefaultActionType.next`). - + /// /// **Optional arguments:** - + /// /// - `backgroundColor`: The background color of the button /// - `textStyle`: The text style for the button label. /// - `borderRadius`: The border radius of the button. Defaults to a rounded shape. diff --git a/lib/src/models/tooltip_action_config.dart b/lib/src/models/tooltip_action_config.dart index b95e9ca9..0cda5125 100644 --- a/lib/src/models/tooltip_action_config.dart +++ b/lib/src/models/tooltip_action_config.dart @@ -4,7 +4,7 @@ import '../../showcaseview.dart'; class TooltipActionConfig { /// Configuration options for tooltip action buttons. - + /// /// This class allows you to configure the overall appearance and layout of /// action buttons within a tooltip widget. const TooltipActionConfig({ diff --git a/lib/src/showcase.dart b/lib/src/showcase.dart index 74118aae..5ed055ae 100644 --- a/lib/src/showcase.dart +++ b/lib/src/showcase.dart @@ -51,12 +51,6 @@ class Showcase extends StatefulWidget { /// Represents subject line of target widget final String? title; - /// Title text alignment with in tooltip widget - /// - /// Defaults to [TextAlign.start] - /// To understand how text is aligned, check [TextAlign] - final TextAlign titleTextAlign; - /// Represents summary description of target widget final String? description; @@ -178,12 +172,6 @@ class Showcase extends StatefulWidget { /// Default to [BorderRadius.circular(8)] final BorderRadius? tooltipBorderRadius; - /// Description text alignment with in tooltip widget - /// - /// Defaults to [TextAlign.start] - /// To understand how text is aligned, check [TextAlign] - final TextAlign descriptionTextAlign; - /// if `disableDefaultTargetGestures` parameter is true /// onTargetClick, onTargetDoubleTap, onTargetLongPress and /// disposeOnTap parameter will not work @@ -257,16 +245,28 @@ class Showcase extends StatefulWidget { /// Defaults to 7. final double toolTipSlideEndDistance; - /// Title alignment within tooltip widget + /// Title widget alignment within tooltip widget /// /// Defaults to [Alignment.center] final AlignmentGeometry titleAlignment; - /// Description alignment within tooltip widget + /// Title text alignment with in tooltip widget + /// + /// Defaults to [TextAlign.start] + /// To understand how text is aligned, check [TextAlign] + final TextAlign titleTextAlign; + + /// Description widget alignment within tooltip widget /// /// Defaults to [Alignment.center] final AlignmentGeometry descriptionAlignment; + /// Description text alignment with in tooltip widget + /// + /// Defaults to [TextAlign.start] + /// To understand how text is aligned, check [TextAlign] + final TextAlign descriptionTextAlign; + /// Defines the margin for the tooltip. /// Which is from 0 to [toolTipSlideEndDistance]. /// @@ -285,20 +285,20 @@ class Showcase extends StatefulWidget { final TooltipActionConfig? tooltipActionConfig; /// Highlights a specific widget on the screen with an informative tooltip. - + /// /// This widget helps you showcase specific parts of your UI by drawing an /// overlay around it and displaying a description. You can customize the /// appearance and behavior of the showcase and tooltip for a seamless user /// experience. - + /// /// **Required arguments:** /// /// - `key`: A unique key for this Showcase widget. /// - `description`: A description of the widget being showcased. /// - `child`: The widget you want to highlight. - + /// /// **Optional arguments:** - + /// /// **Tooltip:** /// - `title`: An optional title for the tooltip. /// - `titleAlignment`: Alignment of the title text within the tooltip (defaults to start). @@ -310,12 +310,12 @@ class Showcase extends StatefulWidget { /// - `tooltipPadding`: Padding around the content inside the tooltip. /// - `onToolTipClick`: A callback function called when the user clicks the tooltip. /// - `tooltipBorderRadius`: The border radius of the tooltip (defaults to 8dp). - + /// /// **Highlight:** /// - `targetShapeBorder`: The border to draw around the showcased widget (defaults to a rounded rectangle). /// - `targetPadding`: Padding around the showcased widget (defaults to none). /// - `showArrow`: Whether to show an arrow pointing to the showcased widget (defaults to true). - + /// /// **Animations:** /// - `movingAnimationDuration`: Duration of the animation when moving the tooltip (defaults to 2 seconds). /// - `disableMovingAnimation`: Disables the animation when moving the tooltip. @@ -323,7 +323,7 @@ class Showcase extends StatefulWidget { /// - `scaleAnimationDuration`: Duration of the animation when scaling the tooltip (defaults to 300 milliseconds). /// - `scaleAnimationCurve`: The curve used for the scaling animation (defaults to ease-in). /// - `scaleAnimationAlignment`: The alignment point for the scaling animation. - + /// /// **Interactions:** /// - `onTargetClick`: A callback function called when the user clicks the showcased widget. /// - `disposeOnTap`: Whether to dispose of the showcase after a tap on the showcased widget (requires `onTargetClick`). @@ -332,7 +332,7 @@ class Showcase extends StatefulWidget { /// - `disableDefaultTargetGestures`: Disables default gestures on the target widget (panning, zooming). /// - `onBarrierClick`: A callback function called when the user clicks outside the showcase overlay. /// - `disableBarrierInteraction`: Disables user interaction with the area outside the showcase overlay. - + /// /// **Advanced:** /// - `container`: A custom widget to use as the tooltip instead of the default one. /// - `overlayColor`: Color of the showcase overlay (defaults to black with 75% opacity). @@ -344,7 +344,7 @@ class Showcase extends StatefulWidget { /// - `toolTipMargin`: The margin around the tooltip (defaults to 14dp). /// - `tooltipActions`: A list of custom actions (widgets) to display within the tooltip. /// - `tooltipActionConfig`: Configuration options for custom tooltip actions. - + /// /// **Assertions:** /// /// - `overlayOpacity` must be between 0.0 and 1.0. diff --git a/lib/src/showcase_widget.dart b/lib/src/showcase_widget.dart index e5988642..c01d9109 100644 --- a/lib/src/showcase_widget.dart +++ b/lib/src/showcase_widget.dart @@ -90,14 +90,14 @@ class ShowCaseWidget extends StatefulWidget { final TooltipActionConfig? globalTooltipActionConfig; /// A widget that manages multiple Showcase widgets. - + /// /// This widget provides a way to sequentially showcase multiple widgets /// with customizable options like auto-play, animation, and user interaction. - + /// /// **Required arguments:** /// /// - `builder`: A builder function that returns a widget containing the `Showcase` widgets to be showcased. - + /// /// **Optional arguments:** /// /// - `onFinish`: A callback function triggered when all showcases are completed. diff --git a/lib/src/tooltip_widget.dart b/lib/src/tooltip_widget.dart index 552cbaef..d92f9f31 100644 --- a/lib/src/tooltip_widget.dart +++ b/lib/src/tooltip_widget.dart @@ -75,7 +75,6 @@ class ToolTipWidget extends StatefulWidget { required this.offset, required this.screenSize, required this.title, - required this.titleTextAlign, required this.description, required this.titleTextStyle, required this.descTextStyle, @@ -87,6 +86,7 @@ class ToolTipWidget extends StatefulWidget { required this.contentWidth, required this.onTooltipTap, required this.movingAnimationDuration, + required this.titleTextAlign, required this.descriptionTextAlign, required this.titleAlignment, required this.descriptionAlignment, @@ -563,69 +563,76 @@ class _ToolTipWidgetState extends State ), color: widget.tooltipBackgroundColor, child: Column( - crossAxisAlignment: widget.title != null - ? CrossAxisAlignment.start - : CrossAxisAlignment.center, children: [ if (widget.title != null) - Padding( - padding: (widget.titlePadding ?? - zeroPadding) - .add( - EdgeInsets.only( - left: - widget.tooltipPadding?.left ?? - 0, - right: widget - .tooltipPadding?.right ?? - 0, + Align( + alignment: widget.titleAlignment, + child: Padding( + padding: (widget.titlePadding ?? + zeroPadding) + .add( + EdgeInsets.only( + left: widget + .tooltipPadding?.left ?? + 0, + right: widget.tooltipPadding + ?.right ?? + 0, + ), ), - ), - child: Text( - widget.title!, - textAlign: widget.titleAlignment, - textDirection: - widget.titleTextDirection, - style: widget.titleTextStyle ?? - Theme.of(context) - .textTheme - .titleLarge! - .merge( - TextStyle( - color: widget.textColor, + child: Text( + widget.title!, + textAlign: widget.titleTextAlign, + textDirection: + widget.titleTextDirection, + style: widget.titleTextStyle ?? + Theme.of(context) + .textTheme + .titleLarge! + .merge( + TextStyle( + color: + widget.textColor, + ), ), - ), + ), ), ), if (widget.description != null) - Padding( - padding: (widget.descriptionPadding ?? - zeroPadding) - .add( - EdgeInsets.only( - left: - widget.tooltipPadding?.left ?? - 0, - right: widget - .tooltipPadding?.right ?? - 0, + Align( + alignment: + widget.descriptionAlignment, + child: Padding( + padding: + (widget.descriptionPadding ?? + zeroPadding) + .add( + EdgeInsets.only( + left: widget + .tooltipPadding?.left ?? + 0, + right: widget.tooltipPadding + ?.right ?? + 0, + ), ), - ), - child: Text( - widget.description!, - textAlign: - widget.descriptionAlignment, - textDirection: - widget.descriptionTextDirection, - style: widget.descTextStyle ?? - Theme.of(context) - .textTheme - .titleSmall! - .merge( - TextStyle( - color: widget.textColor, + child: Text( + widget.description!, + textAlign: + widget.descriptionTextAlign, + textDirection: widget + .descriptionTextDirection, + style: widget.descTextStyle ?? + Theme.of(context) + .textTheme + .titleSmall! + .merge( + TextStyle( + color: + widget.textColor, + ), ), - ), + ), ), ), if (widget.tooltipActions.isNotEmpty &&