diff --git a/CHANGELOG.md b/CHANGELOG.md index 503dff5b..8b4a4cca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,5 @@ -## [4.0.0] +## [4.0.0] (unreleased) +- [BREAKING] Fixed [#457](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/457) titleAlignment property does not work - Feature ✨: Added Action widget for tooltip - Feature [#475](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/475) - Add feasibility to change margin of tooltip with `toolTipMargin`. diff --git a/README.md b/README.md index 9f872ede..9e5dbe91 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,28 @@ A Flutter package allows you to Showcase/Highlight your widgets step by step. ![The example app running in Android](https://raw.githubusercontent.com/SimformSolutionsPvtLtd/flutter_showcaseview/master/preview/showcaseview.gif) +## Migration guide for release 4.0.0 + +Renamed parameters `titleAlignment` to `titleTextAlign` and `descriptionAlignment` +to `descriptionTextAlign` to correspond it more with the TextAlign property.`titleAlignment` +and `descriptionAlignment` will be used for widget alignment. + +Before: +```dart +Showcase( + titleAlignment: TextAlign.center, + descriptionAlignment: TextAlign.center, +), +``` + +After: +```dart +Showcase( + titleTextAlign: TextAlign.center, + descriptionTextAlign: TextAlign.center, +), +``` + ## Migration guide for release 3.0.0 Removed builder widget from `ShowCaseWidget` and replaced it with builder function @@ -147,8 +169,10 @@ WidgetsBinding.instance.addPostFrameCallback((_) => | width | double? | | Width of custom tooltip widget | | ✅ | | titleTextStyle | TextStyle? | | Text Style of title | ✅ | | | descTextStyle | TextStyle? | | Text Style of description | ✅ | | -| titleAlignment | TextAlign | TextAlign.start | Alignment of title | ✅ | | -| descriptionAlignment | TextAlign | TextAlign.start | Alignment of description | ✅ | | +| titleTextAlign | TextAlign | TextAlign.start | Alignment of title text | ✅ | | +| descriptionTextAlign | TextAlign | TextAlign.start | Alignment of description text | ✅ | | +| titleAlignment | AlignmentGeometry | Alignment.center | Alignment of title | ✅ | | +| descriptionAlignment | AlignmentGeometry | Alignment.center | Alignment of description | ✅ | | | targetShapeBorder | ShapeBorder | | If `targetBorderRadius` param is not provided then it applies shape border to target widget | ✅ | ✅ | | targetBorderRadius | BorderRadius? | | Border radius of target widget | ✅ | ✅ | | tooltipBorderRadius | BorderRadius? | BorderRadius.circular(8.0) | Border radius of tooltip | ✅ | | diff --git a/lib/src/showcase.dart b/lib/src/showcase.dart index 372cd021..faeb98e0 100644 --- a/lib/src/showcase.dart +++ b/lib/src/showcase.dart @@ -51,11 +51,6 @@ class Showcase extends StatefulWidget { /// Represents subject line of target widget final String? title; - /// Title alignment with in tooltip widget - /// - /// Defaults to [TextAlign.start] - final TextAlign titleAlignment; - /// Represents summary description of target widget final String? description; @@ -177,11 +172,6 @@ class Showcase extends StatefulWidget { /// Default to [BorderRadius.circular(8)] final BorderRadius? tooltipBorderRadius; - /// Description alignment with in tooltip widget - /// - /// Defaults to [TextAlign.start] - final TextAlign descriptionAlignment; - /// if `disableDefaultTargetGestures` parameter is true /// onTargetClick, onTargetDoubleTap, onTargetLongPress and /// disposeOnTap parameter will not work @@ -255,6 +245,28 @@ class Showcase extends StatefulWidget { /// Defaults to 7. final double toolTipSlideEndDistance; + /// Title widget alignment within tooltip widget + /// + /// Defaults to [Alignment.center] + final AlignmentGeometry titleAlignment; + + /// 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]. /// @@ -342,8 +354,10 @@ class Showcase extends StatefulWidget { required this.description, required this.child, this.title, - this.titleAlignment = TextAlign.start, - this.descriptionAlignment = TextAlign.start, + this.titleTextAlign = TextAlign.start, + this.descriptionTextAlign = TextAlign.start, + this.titleAlignment = Alignment.center, + this.descriptionAlignment = Alignment.center, this.targetShapeBorder = const RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(8)), ), @@ -488,8 +502,10 @@ class Showcase extends StatefulWidget { disableScaleAnimation = null, title = null, description = null, - titleAlignment = TextAlign.start, - descriptionAlignment = TextAlign.start, + titleTextAlign = TextAlign.start, + descriptionTextAlign = TextAlign.start, + titleAlignment = Alignment.center, + descriptionAlignment = Alignment.center, titleTextStyle = null, descTextStyle = null, tooltipBackgroundColor = Colors.white, @@ -745,8 +761,10 @@ class _ShowcaseState extends State { offset: offset, screenSize: screenSize, title: widget.title, - titleAlignment: widget.titleAlignment, + titleTextAlign: widget.titleTextAlign, description: widget.description, + descriptionTextAlign: widget.descriptionTextAlign, + titleAlignment: widget.titleAlignment, descriptionAlignment: widget.descriptionAlignment, titleTextStyle: widget.titleTextStyle, descTextStyle: widget.descTextStyle, diff --git a/lib/src/tooltip_widget.dart b/lib/src/tooltip_widget.dart index 0ef4df38..047a331f 100644 --- a/lib/src/tooltip_widget.dart +++ b/lib/src/tooltip_widget.dart @@ -36,9 +36,11 @@ class ToolTipWidget extends StatefulWidget { final Offset? offset; final Size screenSize; final String? title; - final TextAlign? titleAlignment; + final TextAlign? titleTextAlign; final String? description; - final TextAlign? descriptionAlignment; + final TextAlign? descriptionTextAlign; + final AlignmentGeometry titleAlignment; + final AlignmentGeometry descriptionAlignment; final TextStyle? titleTextStyle; final TextStyle? descTextStyle; final Widget? container; @@ -73,7 +75,6 @@ class ToolTipWidget extends StatefulWidget { required this.offset, required this.screenSize, required this.title, - required this.titleAlignment, required this.description, required this.titleTextStyle, required this.descTextStyle, @@ -85,6 +86,9 @@ 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, this.tooltipPadding = const EdgeInsets.symmetric(vertical: 8), required this.disableMovingAnimation, @@ -549,69 +553,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 &&