Skip to content

Commit

Permalink
feature: ✨ Tooltip action widget
Browse files Browse the repository at this point in the history
- Added `toolTipAction` parameter in `Showcase` which is used to get action widget configuration and defaults to `null`
- Added `DefaultToolTipActionWidget` class for default tooltip action widgets
  • Loading branch information
faiyaz-shaikh authored and Sahil-Simform committed Mar 18, 2024
1 parent c36c85a commit f4a88fb
Show file tree
Hide file tree
Showing 5 changed files with 225 additions and 109 deletions.
45 changes: 25 additions & 20 deletions example/lib/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,10 @@ class _MailPageState extends State<MailPage> {
),
child: Image.asset('assets/simform.png'),
),
toolTipAction: DefaultToolTipActionWidget(
color: Colors.white,
showCaseWidgetState: ShowCaseWidget.of(context),
),
),
const SizedBox(
width: 12,
Expand Down Expand Up @@ -314,27 +318,28 @@ class _MailPageState extends State<MailPage> {
child: Container(
padding: const EdgeInsets.symmetric(vertical: 8),
child: Showcase(
key: key,
description: 'Tap to check mail',
tooltipPosition: TooltipPosition.top,
disposeOnTap: true,
onTargetClick: () {
Navigator.push<void>(
context,
MaterialPageRoute<void>(
builder: (_) => const Detail(),
),
).then((_) {
setState(() {
ShowCaseWidget.of(context).startShowCase([_four, _five]);
});
key: key,
description: 'Tap to check mail',
tooltipPosition: TooltipPosition.top,
disposeOnTap: true,
onTargetClick: () {
Navigator.push<void>(
context,
MaterialPageRoute<void>(
builder: (_) => const Detail(),
),
).then((_) {
setState(() {
ShowCaseWidget.of(context).startShowCase([_four, _five]);
});
},
child: MailTile(
mail: mail,
showCaseKey: _four,
showCaseDetail: showCaseDetail,
)),
});
},
child: MailTile(
mail: mail,
showCaseKey: _four,
showCaseDetail: showCaseDetail,
),
),
),
);
}
Expand Down
1 change: 1 addition & 0 deletions lib/showcaseview.dart
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,4 @@ library showcaseview;
export 'src/enum.dart';
export 'src/showcase.dart';
export 'src/showcase_widget.dart';
export 'src/tooltip_action.dart';
9 changes: 9 additions & 0 deletions lib/src/showcase.dart
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import 'get_position.dart';
import 'layout_overlays.dart';
import 'shape_clipper.dart';
import 'showcase_widget.dart';
import 'tooltip_action.dart';
import 'tooltip_widget.dart';

class Showcase extends StatefulWidget {
Expand Down Expand Up @@ -232,6 +233,11 @@ class Showcase extends StatefulWidget {
/// Provides padding around the description. Default padding is zero.
final EdgeInsets? descriptionPadding;

/// Provides tooTip action widgets at bottom in tool tip.
///
/// one can use [DefaultToolTipActionWidget] class to use default action
final Widget? toolTipAction;

/// Provides text direction of tooltip title.
final TextDirection? titleTextDirection;

Expand Down Expand Up @@ -288,6 +294,7 @@ class Showcase extends StatefulWidget {
this.tooltipPosition,
this.titlePadding,
this.descriptionPadding,
this.toolTipAction,
this.titleTextDirection,
this.descriptionTextDirection,
this.onBarrierClick,
Expand Down Expand Up @@ -350,6 +357,7 @@ class Showcase extends StatefulWidget {
tooltipPadding = const EdgeInsets.symmetric(vertical: 8),
titlePadding = null,
descriptionPadding = null,
toolTipAction = null,
titleTextDirection = null,
descriptionTextDirection = null,
assert(overlayOpacity >= 0.0 && overlayOpacity <= 1.0,
Expand Down Expand Up @@ -619,6 +627,7 @@ class _ShowcaseState extends State<Showcase> {
tooltipPosition: widget.tooltipPosition,
titlePadding: widget.titlePadding,
descriptionPadding: widget.descriptionPadding,
toolTipAction: widget.toolTipAction,
titleTextDirection: widget.titleTextDirection,
descriptionTextDirection: widget.descriptionTextDirection,
),
Expand Down
81 changes: 81 additions & 0 deletions lib/src/tooltip_action.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import 'package:flutter/material.dart';

import 'showcase_widget.dart';

/// Default Tooltip action Widget Nav
/// Shows tooltip navigation and index / count elements if the conditions are
/// indicated.
class DefaultToolTipActionWidget extends StatelessWidget {
const DefaultToolTipActionWidget({
Key? key,
required this.color,
required this.showCaseWidgetState,
this.padding = const EdgeInsets.only(top: 5),
this.textStyle,
this.iconSize,
}) : super(key: key);

final Color? color;
final ShowCaseWidgetState showCaseWidgetState;
final EdgeInsets padding;
final TextStyle? textStyle;
final double? iconSize;

@override
Widget build(BuildContext context) {
var ids = showCaseWidgetState.ids;
var activeWidgetId = showCaseWidgetState.activeWidgetId;
bool isFirstTip = activeWidgetId == 0;
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: (isFirstTip)
? null
: () {
showCaseWidgetState.previous();
},
child: Padding(
padding: padding,
child: Icon(
Icons.keyboard_arrow_left,
size: iconSize,
color: (isFirstTip)
? color?.withOpacity(0.3) ?? Colors.black26
: color,
),
),
),
if (ids != null && activeWidgetId != null) ...[
const SizedBox(width: 4.0),
Padding(
padding: padding,
child: Text(
"${activeWidgetId + 1} / ${ids.length}",
style: textStyle ??
Theme.of(context).textTheme.bodyMedium?.copyWith(
color: color,
),
),
),
const SizedBox(width: 4.0),
],
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
showCaseWidgetState.next();
},
child: Padding(
padding: padding,
child: Icon(
Icons.keyboard_arrow_right,
color: color,
size: iconSize,
),
),
),
],
);
}
}
Loading

0 comments on commit f4a88fb

Please sign in to comment.