Skip to content

Commit 9848050

Browse files
fix!: 💥Parameter changes of the Showcase and ShowCaseWidget class
1 parent dff3592 commit 9848050

File tree

6 files changed

+113
-75
lines changed

6 files changed

+113
-75
lines changed

CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
- `pull_request_template.md.` file updated with proper document
77
- `CONTRIBUTING.md` file updated with proper document
88
- Fixed [#268](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/268) - Added smooth scale transition when tooltip appear on the screen
9+
- Updated parameter name of `ShowCaseWidget` and `Showcase` class
910

1011
## [1.1.8] - August 5, 2022
1112
- Fixed [#237](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/237) - Feature added to enable/disable overlay click using `disableBarrierInteraction` parameters

README.md

Lines changed: 38 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,35 @@ A Flutter package allows you to Showcase/Highlight your widgets step by step.
1111

1212
![The example app running in Android](https://github.com/simformsolutions/flutter_showcaseview/blob/master/preview/showcaseview.gif)
1313

14-
14+
## Migration guide for release 2.0
15+
Release 2.0 contains breaking changes in terms of renaming some of the properties from `ShowCaseWidget` and `Showcase` class which is listed below in the table.
16+
17+
| Before | After |
18+
|-------------------------|-------------------------|
19+
| autoPlayLockEnable | enableAutoPlayLock |
20+
| shapeBorder | targetShapeBorder |
21+
| showcaseBackgroundColor | tooltipBackgroundColor |
22+
| contentPadding | tooltipPadding |
23+
| overlayPadding | targetPadding |
24+
| radius | targetBorderRadius |
25+
| tipBorderRadius | tooltipBorderRadius |
26+
| disableAnimation | disableMovingAnimation |
27+
28+
29+
Unused parameters of `Showcase.withWidget()` which do not impact the UI of showcase have been removed from the parameter list of the named constructor `Showcase.withWidget()`.
30+
The list of parameters are:
31+
<ul>
32+
<li>title</li>
33+
<li>titleAlignment</li>
34+
<li>titleTextStyle</li>
35+
<li>description</li>
36+
<li>descriptionAlignment</li>
37+
<li>descTextStyle</li>
38+
<li>textColor</li>
39+
<li>tooltipBackgroundColor</li>
40+
<li>tooltipBorderRadius</li>
41+
<li>tooltipPadding</li>
42+
</ul>
1543

1644
## Installing
1745

@@ -67,13 +95,13 @@ Showcase(
6795
titleAlignment: TextAlign.start,
6896
descriptionAlignment: TextAlign.start,
6997
disableAnimation: true,
70-
shapeBorder: CircleBorder(),
71-
radius: BorderRadius.all(Radius.circular(40)),
98+
targetShapeBorder: CircleBorder(),
99+
targetBorderRadius: BorderRadius.all(Radius.circular(40)),
72100
showArrow: false,
73-
tipBorderRadius: BorderRadius.all(Radius.circular(8)),
74-
overlayPadding: EdgeInsets.all(5),
101+
tooltipBorderRadius: BorderRadius.all(Radius.circular(8)),
102+
targetPadding: EdgeInsets.all(5),
75103
slideDuration: Duration(milliseconds: 1500),
76-
tooltipColor: Colors.blueGrey,
104+
tooltipBackgroundColor: Colors.blueGrey,
77105
blurValue: 2,
78106
disableDefaultTargetGestures: true,
79107
scaleAnimationCurve: Curves.easeIn,
@@ -88,9 +116,9 @@ Showcase(
88116
```dart
89117
Showcase.withWidget(
90118
key: _three,
91-
cHeight: 80,
92-
cWidth: 140,
93-
shapeBorder: CircleBorder(),
119+
height: 80,
120+
width: 140,
121+
targetShapeBorder: CircleBorder(),
94122
container: Column(
95123
crossAxisAlignment: CrossAxisAlignment.start,
96124
children: <Widget>[
@@ -218,12 +246,10 @@ ShowCaseWidget(
218246
<td align="center"><a href="https://github.com/ShwetaChauhan18"><img src="https://avatars.githubusercontent.com/u/34509457" width="80px;" alt=""/><br /><sub><b>Shweta Chauhan</b></sub></a></td>
219247
<td align="center"><a href="https://github.com/MehulKK"><img src="https://avatars.githubusercontent.com/u/60209725?s=100" width="100px;" alt=""/><br /><sub><b>Mehul Kabaria</b></sub></a></td>
220248
<td align="center"><a href="https://github.com/DhavalRKansara"><img src="https://avatars.githubusercontent.com/u/44993081?v=4" width="100px;" alt=""/><br /><sub><b>Dhaval Kansara</b></sub></a></td>
249+
<td align="center"><a href="https://github.com/HappyMakadiyaS"><img src="https://avatars.githubusercontent.com/u/97177197?v=4" width="100px;" alt=""/><br /><sub><b>Happy Makadiya</b></sub></a></td>
221250
</tr>
222251
</table>
223252

224-
## Note
225-
226-
We have updated license of flutter_showcaseview from BSD 2-Clause "Simplified" to MIT.
227253

228254
## License
229255

example/lib/main.dart

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -216,14 +216,14 @@ class _MailPageState extends State<MailPage> {
216216
),
217217
),
218218
Showcase(
219-
overlayPadding: const EdgeInsets.all(5),
219+
targetPadding: const EdgeInsets.all(5),
220220
key: _two,
221221
title: 'Profile',
222222
description:
223223
"Tap to see profile which contains user's name, profile picture, mobile number and country",
224-
showcaseBackgroundColor: Theme.of(context).primaryColor,
224+
tooltipBackgroundColor: Theme.of(context).primaryColor,
225225
textColor: Colors.white,
226-
shapeBorder: const CircleBorder(),
226+
targetShapeBorder: const CircleBorder(),
227227
child: Container(
228228
padding: const EdgeInsets.all(5),
229229
width: 45,
@@ -278,7 +278,7 @@ class _MailPageState extends State<MailPage> {
278278
key: _five,
279279
title: 'Compose Mail',
280280
description: 'Click here to compose mail',
281-
shapeBorder: const CircleBorder(),
281+
targetShapeBorder: const CircleBorder(),
282282
child: FloatingActionButton(
283283
backgroundColor: Theme.of(context).primaryColor,
284284
onPressed: () {
@@ -413,8 +413,10 @@ class MailTile extends StatelessWidget {
413413
key: showCaseKey!,
414414
height: 50,
415415
width: 140,
416-
shapeBorder: const CircleBorder(),
417-
radius: const BorderRadius.all(Radius.circular(150)),
416+
targetShapeBorder: const CircleBorder(),
417+
targetBorderRadius: const BorderRadius.all(
418+
Radius.circular(150),
419+
),
418420
container: Column(
419421
crossAxisAlignment: CrossAxisAlignment.start,
420422
children: <Widget>[

lib/src/showcase.dart

Lines changed: 47 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -39,17 +39,17 @@ class Showcase extends StatefulWidget {
3939

4040
final Widget child;
4141
final String? title;
42-
final TextAlign? titleAlignment;
42+
final TextAlign titleAlignment;
4343
final String? description;
44-
final ShapeBorder? shapeBorder;
45-
final BorderRadius? radius;
44+
final ShapeBorder targetShapeBorder;
45+
final BorderRadius? targetBorderRadius;
4646
final TextStyle? titleTextStyle;
4747
final TextStyle? descTextStyle;
48-
final EdgeInsets contentPadding;
48+
final EdgeInsets tooltipPadding;
4949
final Color overlayColor;
5050
final double overlayOpacity;
5151
final Widget? container;
52-
final Color showcaseBackgroundColor;
52+
final Color tooltipBackgroundColor;
5353
final Color textColor;
5454
final Widget scrollLoadingWidget;
5555
final bool showArrow;
@@ -61,10 +61,10 @@ class Showcase extends StatefulWidget {
6161
final bool? disposeOnTap;
6262
final bool? disableMovingAnimation;
6363
final bool? disableScaleAnimation;
64-
final EdgeInsets overlayPadding;
64+
final EdgeInsets targetPadding;
6565
final VoidCallback? onTargetDoubleTap;
6666
final VoidCallback? onTargetLongPress;
67-
final BorderRadius? tipBorderRadius;
67+
final BorderRadius? tooltipBorderRadius;
6868
final TextAlign descriptionAlignment;
6969

7070
/// if disableDefaultTargetGestures parameter is true
@@ -111,12 +111,16 @@ class Showcase extends StatefulWidget {
111111
this.titleAlignment = TextAlign.start,
112112
required this.description,
113113
this.descriptionAlignment = TextAlign.start,
114-
this.shapeBorder,
114+
this.targetShapeBorder = const RoundedRectangleBorder(
115+
borderRadius: BorderRadius.all(
116+
Radius.circular(8),
117+
),
118+
),
115119
this.overlayColor = Colors.black45,
116120
this.overlayOpacity = 0.75,
117121
this.titleTextStyle,
118122
this.descTextStyle,
119-
this.showcaseBackgroundColor = Colors.white,
123+
this.tooltipBackgroundColor = Colors.white,
120124
this.textColor = Colors.black,
121125
this.scrollLoadingWidget = const CircularProgressIndicator(
122126
valueColor: AlwaysStoppedAnimation(Colors.white)),
@@ -126,15 +130,15 @@ class Showcase extends StatefulWidget {
126130
this.movingAnimationDuration = const Duration(milliseconds: 2000),
127131
this.disableMovingAnimation,
128132
this.disableScaleAnimation,
129-
this.contentPadding =
133+
this.tooltipPadding =
130134
const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
131135
this.onToolTipClick,
132-
this.overlayPadding = EdgeInsets.zero,
136+
this.targetPadding = EdgeInsets.zero,
133137
this.blurValue,
134-
this.radius,
138+
this.targetBorderRadius,
135139
this.onTargetLongPress,
136140
this.onTargetDoubleTap,
137-
this.tipBorderRadius,
141+
this.tooltipBorderRadius,
138142
this.disableDefaultTargetGestures = false,
139143
this.scaleAnimationDuration = const Duration(milliseconds: 300),
140144
this.scaleAnimationCurve = Curves.easeIn,
@@ -161,37 +165,41 @@ class Showcase extends StatefulWidget {
161165
required this.container,
162166
required this.height,
163167
required this.width,
164-
this.title,
165-
this.titleAlignment = TextAlign.start,
166-
this.description,
167-
this.descriptionAlignment = TextAlign.start,
168-
this.shapeBorder,
168+
this.targetShapeBorder = const RoundedRectangleBorder(
169+
borderRadius: BorderRadius.all(
170+
Radius.circular(8),
171+
),
172+
),
169173
this.overlayColor = Colors.black45,
170-
this.radius,
174+
this.targetBorderRadius,
171175
this.overlayOpacity = 0.75,
172-
this.titleTextStyle,
173-
this.descTextStyle,
174-
this.showcaseBackgroundColor = Colors.white,
175-
this.textColor = Colors.black,
176176
this.scrollLoadingWidget = const CircularProgressIndicator(
177177
valueColor: AlwaysStoppedAnimation(Colors.white)),
178178
this.onTargetClick,
179179
this.disposeOnTap,
180180
this.movingAnimationDuration = const Duration(milliseconds: 2000),
181181
this.disableMovingAnimation,
182-
this.contentPadding = const EdgeInsets.symmetric(vertical: 8),
183-
this.overlayPadding = EdgeInsets.zero,
182+
this.targetPadding = EdgeInsets.zero,
184183
this.blurValue,
185184
this.onTargetLongPress,
186185
this.onTargetDoubleTap,
187-
this.tipBorderRadius,
188186
this.disableDefaultTargetGestures = false,
189187
}) : showArrow = false,
190188
onToolTipClick = null,
191189
scaleAnimationDuration = const Duration(milliseconds: 300),
192190
scaleAnimationCurve = Curves.decelerate,
193191
scaleAnimationAlignment = null,
194192
disableScaleAnimation = null,
193+
title = null,
194+
description = null,
195+
titleAlignment = TextAlign.start,
196+
descriptionAlignment = TextAlign.start,
197+
titleTextStyle = null,
198+
descTextStyle = null,
199+
tooltipBackgroundColor = Colors.white,
200+
textColor = Colors.black,
201+
tooltipBorderRadius = null,
202+
tooltipPadding = const EdgeInsets.symmetric(vertical: 8),
195203
assert(overlayOpacity >= 0.0 && overlayOpacity <= 1.0,
196204
"overlay opacity must be between 0 and 1.");
197205

@@ -213,7 +221,7 @@ class _ShowcaseState extends State<Showcase> {
213221
super.didChangeDependencies();
214222
position ??= GetPosition(
215223
key: widget.key,
216-
padding: widget.overlayPadding,
224+
padding: widget.targetPadding,
217225
screenWidth: MediaQuery.of(context).size.width,
218226
screenHeight: MediaQuery.of(context).size.height,
219227
);
@@ -264,7 +272,7 @@ class _ShowcaseState extends State<Showcase> {
264272
final size = MediaQuery.of(context).size;
265273
position = GetPosition(
266274
key: widget.key,
267-
padding: widget.overlayPadding,
275+
padding: widget.targetPadding,
268276
screenWidth: size.width,
269277
screenHeight: size.height,
270278
);
@@ -277,7 +285,7 @@ class _ShowcaseState extends State<Showcase> {
277285

278286
Future<void> _nextIfAny() async {
279287
if (timer != null && timer!.isActive) {
280-
if (showCaseWidgetState.autoPlayLockEnable) {
288+
if (showCaseWidgetState.enableAutoPlayLock) {
281289
return;
282290
}
283291
timer!.cancel();
@@ -343,12 +351,13 @@ class _ShowcaseState extends State<Showcase> {
343351
child: ClipPath(
344352
clipper: RRectClipper(
345353
area: _isScrollRunning ? Rect.zero : rectBound,
346-
isCircle: widget.shapeBorder == const CircleBorder(),
347-
radius:
348-
_isScrollRunning ? BorderRadius.zero : widget.radius,
354+
isCircle: widget.targetShapeBorder == const CircleBorder(),
355+
radius: _isScrollRunning
356+
? BorderRadius.zero
357+
: widget.targetBorderRadius,
349358
overlayPadding: _isScrollRunning
350359
? EdgeInsets.zero
351-
: widget.overlayPadding,
360+
: widget.targetPadding,
352361
),
353362
child: blur != 0
354363
? BackdropFilter(
@@ -378,10 +387,10 @@ class _ShowcaseState extends State<Showcase> {
378387
offset: offset,
379388
size: size,
380389
onTap: _getOnTargetTap,
381-
radius: widget.radius,
390+
radius: widget.targetBorderRadius,
382391
onDoubleTap: widget.onTargetDoubleTap,
383392
onLongPress: widget.onTargetLongPress,
384-
shapeBorder: widget.shapeBorder,
393+
shapeBorder: widget.targetShapeBorder,
385394
disableDefaultChildGestures:
386395
widget.disableDefaultTargetGestures,
387396
),
@@ -397,19 +406,19 @@ class _ShowcaseState extends State<Showcase> {
397406
titleTextStyle: widget.titleTextStyle,
398407
descTextStyle: widget.descTextStyle,
399408
container: widget.container,
400-
tooltipColor: widget.showcaseBackgroundColor,
409+
tooltipBackgroundColor: widget.tooltipBackgroundColor,
401410
textColor: widget.textColor,
402411
showArrow: widget.showArrow,
403412
contentHeight: widget.height,
404413
contentWidth: widget.width,
405414
onTooltipTap: _getOnTooltipTap,
406-
contentPadding: widget.contentPadding,
415+
tooltipPadding: widget.tooltipPadding,
407416
disableMovingAnimation: widget.disableMovingAnimation ??
408417
showCaseWidgetState.disableMovingAnimation,
409418
disableScaleAnimation: widget.disableScaleAnimation ??
410419
showCaseWidgetState.disableScaleAnimation,
411420
movingAnimationDuration: widget.movingAnimationDuration,
412-
borderRadius: widget.tipBorderRadius,
421+
tooltipBorderRadius: widget.tooltipBorderRadius,
413422
scaleAnimationDuration: widget.scaleAnimationDuration,
414423
scaleAnimationCurve: widget.scaleAnimationCurve,
415424
scaleAnimationAlignment: widget.scaleAnimationAlignment,

lib/src/showcase_widget.dart

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ class ShowCaseWidget extends StatefulWidget {
3131
final Function(int?, GlobalKey)? onComplete;
3232
final bool autoPlay;
3333
final Duration autoPlayDelay;
34-
final bool autoPlayLockEnable;
34+
final bool enableAutoPlayLock;
3535
final bool disableMovingAnimation;
3636
final bool disableScaleAnimation;
3737
final bool disableBarrierInteraction;
@@ -51,7 +51,7 @@ class ShowCaseWidget extends StatefulWidget {
5151
this.onComplete,
5252
this.autoPlay = false,
5353
this.autoPlayDelay = const Duration(milliseconds: 2000),
54-
this.autoPlayLockEnable = false,
54+
this.enableAutoPlayLock = false,
5555
this.blurValue = 0,
5656
this.scrollDuration = const Duration(milliseconds: 300),
5757
this.disableMovingAnimation = false,
@@ -86,7 +86,7 @@ class ShowCaseWidgetState extends State<ShowCaseWidget> {
8686
late bool disableMovingAnimation;
8787
late bool disableScaleAnimation;
8888
late Duration autoPlayDelay;
89-
late bool autoPlayLockEnable;
89+
late bool enableAutoPlayLock;
9090
late bool enableAutoScroll;
9191
late bool disableBarrierInteraction;
9292

@@ -110,7 +110,7 @@ class ShowCaseWidgetState extends State<ShowCaseWidget> {
110110
autoPlay = widget.autoPlay;
111111
disableMovingAnimation = widget.disableMovingAnimation;
112112
disableScaleAnimation = widget.disableScaleAnimation;
113-
autoPlayLockEnable = widget.autoPlayLockEnable;
113+
enableAutoPlayLock = widget.enableAutoPlayLock;
114114
enableAutoScroll = widget.enableAutoScroll;
115115
disableBarrierInteraction = widget.disableBarrierInteraction;
116116
}

0 commit comments

Comments
 (0)