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

Jump to bottom

fix!: 🐛 Fixed TitleAlign Issue #459

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

fix!: 🐛 Fixed TitleAlign Issue #459

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 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
52b6ca7
feat:✨Added feature to add action buttons for the tooltip
Sahil-Simform Oct 24, 2024
b25b793
fix!: 🐛 Fixed TitleAlign Issue
rashi-simform Jul 1, 2024
7f11a09
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
5 changes: 3 additions & 2 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
## [3.0.1]

## [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
147 changes: 101 additions & 46 deletions README.md
View file
Open in desktop

Large diffs are not rendered by default.

279 changes: 225 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,28 @@ 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,
padding: EdgeInsets.zero,
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 +330,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 +370,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 +401,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 +537,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
4 changes: 4 additions & 0 deletions lib/showcaseview.dart
View file
Open in desktop
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';
Loading
Loading