Skip to content
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

feat: ❇️ Provide tooltip action buttons #466

Merged
merged 7 commits into from
Dec 2, 2024
Merged

feat: ❇️ Provide tooltip action buttons #466

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4bd624f
feature: ✨ Tooltip action widget
faiyaz-shaikh Mar 15, 2023
5de0853
feat: ✨ Tooltip action widget
rashi-simform Jul 3, 2024
64d7496
feat: :sparkle: Provide custom widget in tooltip action
harsh-u-simform Jul 11, 2024
2055107
feat: ✨ Provide custom position for tooltip action
harsh-u-simform Jul 11, 2024
f7faf91
fix: :adhesive_bandage: Fix tooltip and it's action margin issue
harsh-u-simform Jul 12, 2024
2c7ab28
feat: :sparkle: Provide tooltip action buttons
harsh-u-simform Jul 25, 2024
2dad8a5
feat:✨Added feature to add action buttons for the tooltip
Sahil-Simform Oct 24, 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
4 changes: 2 additions & 2 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
## [3.0.1]

## [4.0.0]
- Feature ✨: Added Action widget for tooltip
- Feature [#475](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/issues/475) - Add
vatsaltanna-simformsolutions marked this conversation as resolved.
Show resolved Hide resolved
feasibility to change margin of tooltip with `toolTipMargin`.

Expand Down
131 changes: 85 additions & 46 deletions README.md
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions example/android/app/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

android {
compileSdkVersion 31
compileSdkVersion 34

sourceSets {
main.java.srcDirs += 'src/main/kotlin'
Expand All @@ -38,8 +38,8 @@ android {

defaultConfig {
applicationId "com.simform.example"
minSdkVersion 16
targetSdkVersion 31
minSdkVersion flutter.minSdkVersion
targetSdkVersion 33
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
Expand Down
2 changes: 1 addition & 1 deletion example/android/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
buildscript {
ext.kotlin_version = '1.5.20'
ext.kotlin_version = '1.7.10'
repositories {
google()
jcenter()
Expand Down
278 changes: 224 additions & 54 deletions example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@ import 'package:showcaseview/showcaseview.dart';

void main() => runApp(const MyApp());

/// Global key for the first showcase widget
final GlobalKey _firstShowcaseWidget = GlobalKey();

/// Global key for the last showcase widget
final GlobalKey _lastShowcaseWidget = GlobalKey();

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

Expand Down Expand Up @@ -37,6 +43,31 @@ class MyApp extends StatelessWidget {
blurValue: 1,
autoPlayDelay: const Duration(seconds: 3),
builder: (context) => const MailPage(),
globalTooltipActionConfig: const TooltipActionConfig(
position: TooltipActionPosition.inside,
alignment: MainAxisAlignment.spaceBetween,
actionGap: 20,
),
globalTooltipActions: [
// Here we don't need previous action for the first showcase widget
// so we hide this action for the first showcase widget
TooltipActionButton(
type: TooltipDefaultActionType.previous,
textStyle: const TextStyle(
color: Colors.white,
),
hideActionWidgetForShowcase: [_firstShowcaseWidget],
),
// Here we don't need next action for the last showcase widget so we
// hide this action for the last showcase widget
TooltipActionButton(
type: TooltipDefaultActionType.next,
textStyle: const TextStyle(
color: Colors.white,
),
hideActionWidgetForShowcase: [_lastShowcaseWidget],
),
],
),
),
);
Expand All @@ -51,11 +82,9 @@ class MailPage extends StatefulWidget {
}

class _MailPageState extends State<MailPage> {
final GlobalKey _one = GlobalKey();
final GlobalKey _two = GlobalKey();
final GlobalKey _three = GlobalKey();
final GlobalKey _four = GlobalKey();
final GlobalKey _five = GlobalKey();
List<Mail> mails = [];

final scrollController = ScrollController();
Expand All @@ -65,8 +94,8 @@ class _MailPageState extends State<MailPage> {
super.initState();
//Start showcase view after current widget frames are drawn.
WidgetsBinding.instance.addPostFrameCallback(
(_) => ShowCaseWidget.of(context)
.startShowCase([_one, _two, _three, _four, _five]),
(_) => ShowCaseWidget.of(context).startShowCase(
[_firstShowcaseWidget, _two, _three, _four, _lastShowcaseWidget]),
);
mails = [
Mail(
Expand Down Expand Up @@ -176,10 +205,16 @@ class _MailPageState extends State<MailPage> {
child: Row(
children: <Widget>[
Showcase(
key: _one,
key: _firstShowcaseWidget,
description: 'Tap to see menu options',
onBarrierClick: () =>
debugPrint('Barrier clicked'),
tooltipActionConfig:
const TooltipActionConfig(
alignment: MainAxisAlignment.end,
position: TooltipActionPosition.outside,
gapBetweenContentAndAction: 10,
),
child: GestureDetector(
onTap: () =>
debugPrint('menu button clicked'),
Expand Down Expand Up @@ -222,6 +257,27 @@ class _MailPageState extends State<MailPage> {
tooltipBackgroundColor: Theme.of(context).primaryColor,
textColor: Colors.white,
targetShapeBorder: const CircleBorder(),
tooltipActionConfig: const TooltipActionConfig(
alignment: MainAxisAlignment.spaceBetween,
gapBetweenContentAndAction: 10,
position: TooltipActionPosition.outside,
),
tooltipActions: const [
TooltipActionButton(
backgroundColor: Colors.transparent,
type: TooltipDefaultActionType.previous,
textStyle: TextStyle(
color: Colors.white,
),
),
TooltipActionButton(
type: TooltipDefaultActionType.next,
backgroundColor: Colors.white,
textStyle: TextStyle(
color: Colors.pinkAccent,
),
),
],
child: Container(
padding: const EdgeInsets.all(5),
width: 45,
Expand Down Expand Up @@ -273,10 +329,38 @@ class _MailPageState extends State<MailPage> {
),
),
floatingActionButton: Showcase(
key: _five,
key: _lastShowcaseWidget,
title: 'Compose Mail',
description: 'Click here to compose mail',
targetShapeBorder: const CircleBorder(),
showArrow: false,
tooltipActions: [
TooltipActionButton(
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,
)),
const TooltipActionButton(
type: TooltipDefaultActionType.skip,
name: 'Close',
textStyle: TextStyle(
color: Colors.white,
),
tailIcon: ActionButtonIcon(
icon: Icon(
Icons.close,
color: Colors.white,
size: 15,
),
),
),
],
child: FloatingActionButton(
backgroundColor: Theme.of(context).primaryColor,
onPressed: () {
Expand All @@ -285,8 +369,13 @@ class _MailPageState extends State<MailPage> {
* currently rendered so the showcased keys are available in the
* render tree. */
scrollController.jumpTo(0);
ShowCaseWidget.of(context)
.startShowCase([_one, _two, _three, _four, _five]);
ShowCaseWidget.of(context).startShowCase([
_firstShowcaseWidget,
_two,
_three,
_four,
_lastShowcaseWidget
]);
});
},
child: const Icon(
Expand All @@ -311,27 +400,62 @@ 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',
disposeOnTap: true,
onTargetClick: () {
Navigator.push<void>(
context,
MaterialPageRoute<void>(
builder: (_) => const Detail(),
),
).then((_) {
setState(() {
ShowCaseWidget.of(context)
.startShowCase([_four, _lastShowcaseWidget]);
});
},
child: MailTile(
mail: mail,
showCaseKey: _four,
showCaseDetail: showCaseDetail,
)),
});
},
tooltipActionConfig: const TooltipActionConfig(
alignment: MainAxisAlignment.spaceBetween,
actionGap: 16,
position: TooltipActionPosition.outside,
gapBetweenContentAndAction: 16,
),
tooltipActions: [
TooltipActionButton(
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,
),
),
const TooltipActionButton(
type: TooltipDefaultActionType.skip,
name: 'Close',
textStyle: TextStyle(
color: Colors.white,
),
tailIcon: ActionButtonIcon(
icon: Icon(
Icons.close,
color: Colors.white,
size: 15,
),
),
),
],
child: MailTile(
mail: mail,
showCaseKey: _four,
showCaseDetail: showCaseDetail,
),
),
),
);
}
Expand Down Expand Up @@ -412,39 +536,85 @@ class MailTile extends StatelessWidget {
key: showCaseKey!,
height: 50,
width: 140,
targetShapeBorder: const CircleBorder(),
targetBorderRadius: const BorderRadius.all(
Radius.circular(150),
tooltipActionConfig: const TooltipActionConfig(
alignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
actionGap: 16,
),
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',
tooltipActions: [
const TooltipActionButton(
backgroundColor: Colors.transparent,
type: TooltipDefaultActionType.previous,
padding: EdgeInsets.zero,
textStyle: TextStyle(
color: Colors.white,
),
),
TooltipActionButton.custom(
button: InkWell(
onTap: () => ShowCaseWidget.of(context).next(),
child: Container(
decoration: BoxDecoration(
color: Colors.pink,
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: Colors.white,
width: 2,
),
),
padding: const EdgeInsets.all(8),
child: const Text(
'Next',
style: TextStyle(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold,
fontSize: 16,
color: Colors.white,
),
),
),
),
const SizedBox(
height: 10,
),
],
targetShapeBorder: const CircleBorder(),
targetBorderRadius: const BorderRadius.all(
Radius.circular(150),
),
container: Container(
padding: const EdgeInsets.all(10),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
const Text(
"Your sender's profile ",
style: TextStyle(color: Colors.white),
)
],
),
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",
)
],
),
),
child: const SAvatarExampleChild(),
)
Expand Down
Loading