Skip to content

fix!: 🐛 Fixed TitleAlign Issue #459

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aditya-css merged 2 commits into from
Dec 2, 2024
Merged

fix!: 🐛 Fixed TitleAlign Issue #459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dbbf5fe
fix!: 🐛 Fixed TitleAlign Issue
rashi-simform Jul 1, 2024
bc9995a
fix: 🩹Resolved merge conflict and PR review comments
Sahil-Simform Nov 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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`.
Expand Down
28 changes: 26 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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 | ✅ | |
Expand Down
48 changes: 33 additions & 15 deletions lib/src/showcase.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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].
///
Expand Down Expand Up @@ -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)),
),
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -745,8 +761,10 @@ class _ShowcaseState extends State<Showcase> {
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,
Expand Down
125 changes: 68 additions & 57 deletions lib/src/tooltip_widget.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -549,69 +553,76 @@ class _ToolTipWidgetState extends State<ToolTipWidget>
),
color: widget.tooltipBackgroundColor,
child: Column(
crossAxisAlignment: widget.title != null
? CrossAxisAlignment.start
: CrossAxisAlignment.center,
children: <Widget>[
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 &&
Expand Down