Skip to content

Commit

Permalink
feat:✨Added feature to add action buttons for the tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sahil-Simform
Sahil-Simform committed Oct 24, 2024
1 parent 72c030b commit 3997f2c
Show file tree
Hide file tree
Showing 15 changed files with 1,099 additions and 220 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## [4.0.0]

- Feature ✨: Added Action widget for tooltip

## [3.0.1]

- Feature [#475](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/475) - Add
Expand Down
133 changes: 87 additions & 46 deletions README.md
View file

Large diffs are not rendered by default.

218 changes: 173 additions & 45 deletions example/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@ class MyApp extends StatelessWidget {
blurValue: 1,
autoPlayDelay: const Duration(seconds: 3),
builder: (context) => const MailPage(),
globalTooltipActionConfig: const TooltipActionConfig(
position: TooltipActionPosition.inside,
alignment: MainAxisAlignment.spaceBetween,
),
),
),
);
Expand Down Expand Up @@ -180,6 +184,17 @@ class _MailPageState extends State<MailPage> {
description: 'Tap to see menu options',
onBarrierClick: () =>
debugPrint('Barrier clicked'),
tooltipActionConfig:
const TooltipActionConfig(
alignment: MainAxisAlignment.end,
position: TooltipActionPosition.outside,
gapBetweenContentAndAction: 10,
),
tooltipActions: [
TooltipActionButton.withDefault(
type: TooltipDefaultActionType.next,
),
],
child: GestureDetector(
onTap: () =>
debugPrint('menu button clicked'),
Expand Down Expand Up @@ -221,7 +236,34 @@ class _MailPageState extends State<MailPage> {
"Tap to see profile which contains user's name, profile picture, mobile number and country",
tooltipBackgroundColor: Theme.of(context).primaryColor,
textColor: Colors.white,
onTargetClick: () {
print('target cliecked');
},
disposeOnTap: false,
onToolTipClick: () {
print('clicked tool tip');
},
disableDefaultTargetGestures: true,
targetShapeBorder: const CircleBorder(),
tooltipActionConfig: const TooltipActionConfig(
alignment: MainAxisAlignment.spaceBetween,
gapBetweenContentAndAction: 10,
position: TooltipActionPosition.outside,
),
tooltipActions: [
TooltipActionButton.withDefault(
backgroundColor: Colors.transparent,
type: TooltipDefaultActionType.previous,
padding: EdgeInsets.zero,
),
TooltipActionButton.withDefault(
type: TooltipDefaultActionType.next,
backgroundColor: Colors.white,
textStyle: const TextStyle(
color: Colors.pinkAccent,
),
),
],
child: Container(
padding: const EdgeInsets.all(5),
width: 45,
Expand Down Expand Up @@ -277,6 +319,35 @@ class _MailPageState extends State<MailPage> {
title: 'Compose Mail',
description: 'Click here to compose mail',
targetShapeBorder: const CircleBorder(),
showArrow: false,
tooltipActionConfig: const TooltipActionConfig(
alignment: MainAxisAlignment.spaceBetween,
actionGap: 12,
),
tooltipActions: [
TooltipActionButton.withDefault(
type: TooltipDefaultActionType.previous,
name: 'Back',
onTap: () {
// Write your code on button tap
ShowCaseWidget.of(context).previous();
},
backgroundColor: Colors.pink.shade50,
textStyle: const TextStyle(
color: Colors.pink,
)),
TooltipActionButton.withDefault(
type: TooltipDefaultActionType.skip,
name: 'Close',
tailIcon: const ActionButtonIcon.withIcon(
icon: Icon(
Icons.close,
color: Colors.white,
size: 15,
),
),
),
],
child: FloatingActionButton(
backgroundColor: Theme.of(context).primaryColor,
onPressed: () {
Expand Down Expand Up @@ -311,27 +382,57 @@ 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(),
key: key,
description: 'Tap to check mail',
disposeOnTap: true,
tooltipActionConfig: const TooltipActionConfig(
alignment: MainAxisAlignment.spaceBetween,
actionGap: 15,
position: TooltipActionPosition.outside,
gapBetweenContentAndAction: 16,
),
tooltipActions: [
TooltipActionButton.withDefault(
type: TooltipDefaultActionType.previous,
name: 'Back',
onTap: () {
// Write your code on button tap
ShowCaseWidget.of(context).previous();
},
backgroundColor: Colors.pink.shade50,
textStyle: const TextStyle(
color: Colors.pink,
)),
TooltipActionButton.withDefault(
type: TooltipDefaultActionType.skip,
name: 'Close',
tailIcon: const ActionButtonIcon.withIcon(
icon: Icon(
Icons.close,
color: Colors.white,
size: 15,
),
).then((_) {
setState(() {
ShowCaseWidget.of(context).startShowCase([_four, _five]);
});
),
),
],
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 Expand Up @@ -412,39 +513,66 @@ class MailTile extends StatelessWidget {
key: showCaseKey!,
height: 50,
width: 140,
tooltipActionConfig: const TooltipActionConfig(
alignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
),
tooltipActions: [
TooltipActionButton.withDefault(
backgroundColor: Colors.transparent,
type: TooltipDefaultActionType.previous,
padding: EdgeInsets.zero,
),
TooltipActionButton.withDefault(
type: TooltipDefaultActionType.next,
backgroundColor: Colors.white,
textStyle: const TextStyle(
color: Colors.pinkAccent,
),
),
],
targetShapeBorder: const CircleBorder(),
targetBorderRadius: const BorderRadius.all(
Radius.circular(150),
),
container: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 45,
height: 45,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Color(0xffFCD8DC),
),
child: Center(
child: Text(
'S',
style: TextStyle(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold,
fontSize: 16,
container: Container(
padding: const EdgeInsets.all(10),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
),
width: 140,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 45,
height: 45,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Color(0xffFCD8DC),
),
child: Center(
child: Text(
'S',
style: TextStyle(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
),
),
),
const SizedBox(
height: 10,
),
const Text(
"Your sender's profile ",
style: TextStyle(color: Colors.white),
)
],
const SizedBox(
height: 10,
),
const Text(
"Your sender's profile",
)
],
),
),
child: const SAvatarExampleChild(),
)
Expand Down
2 changes: 1 addition & 1 deletion example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<Scheme
LastUpgradeVersion = "1000"
LastUpgradeVersion = "1510"
version = "1.3">
<BuildAction
parallelizeBuildables = "YES"
Expand Down
4 changes: 4 additions & 0 deletions lib/showcaseview.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,9 @@
library showcaseview;

export 'src/enum.dart';
export 'src/models/action_button_icon.dart';
export 'src/models/tooltip_action_button.dart';
export 'src/models/tooltip_action_config.dart';
export 'src/showcase.dart';
export 'src/showcase_widget.dart';
export 'src/tooltip_action_button_widget.dart';
52 changes: 52 additions & 0 deletions lib/src/enum.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,56 @@
* SOFTWARE.
*/

import 'package:flutter/cupertino.dart';

import 'showcase_widget.dart';

enum TooltipPosition { top, bottom }

enum TooltipActionPosition {
outside,
inside;

bool get isInside => this == inside;

bool get isOutside => this == outside;
}

enum TooltipActionAlignment {
left(MainAxisAlignment.start),
right(MainAxisAlignment.end),
spread(MainAxisAlignment.spaceBetween),
center(MainAxisAlignment.center);

const TooltipActionAlignment(this.alignment);

final MainAxisAlignment alignment;
}

enum TooltipDefaultActionType {
next(actionName: 'Next'),
skip(actionName: 'Skip'),
previous(actionName: 'Previous');

const TooltipDefaultActionType({
required this.actionName,
});

final String actionName;

void onTap(ShowCaseWidgetState showCaseState) {
switch (this) {
case TooltipDefaultActionType.next:
showCaseState.next();
break;
case TooltipDefaultActionType.previous:
showCaseState.previous();
break;
case TooltipDefaultActionType.skip:
showCaseState.dismiss();
break;
default:
throw ArgumentError('Invalid tooltip default action type');
}
}
}
4 changes: 3 additions & 1 deletion lib/src/layout_overlays.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,9 @@ class AnchoredOverlay extends StatelessWidget {
overlayBuilder: (overlayContext) {
// To calculate the "anchor" point we grab the render box of
// our parent Container and then we find the center of that box.
final box = context.findRenderObject() as RenderBox;
final box = context.findRenderObject() as RenderBox?;

if (box == null) return const SizedBox.shrink();

final topLeft = box.size.topLeft(
box.localToGlobal(
Expand Down
17 changes: 17 additions & 0 deletions lib/src/models/action_button_icon.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ActionButtonIcon {
const ActionButtonIcon.withIcon({
required this.icon,
this.padding,
}) : assert(icon is Icon, 'Icon must be of type Icon');

const ActionButtonIcon.withImageIcon({
required this.icon,
this.padding,
}) : assert(icon is ImageIcon, 'Icon must be of type ImageIcon');

final Widget icon;
final EdgeInsets? padding;
}
Loading

0 comments on commit 3997f2c

Please sign in to comment.