fix: show case
#38
Merged
amirreza.chegini
merged 1 commits from fix/showcase into develop 1 day ago
12 changed files with 379 additions and 163 deletions
-
1lib/core/constants/my_constants.dart
-
23lib/core/widgets/answer_box/answer_box.dart
-
161lib/core/widgets/showcase/my_showcase_widget.dart
-
44lib/core/widgets/showcase/question_showcase.dart
-
47lib/features/question/presentation/bloc/question_bloc.dart
-
101lib/features/question/presentation/ui/question_page.dart
-
95lib/features/question/presentation/ui/screens/question_screen.dart
-
8lib/l10n/app_en.arb
-
36lib/l10n/app_localizations.dart
-
20lib/l10n/app_localizations_en.dart
-
4pubspec.lock
-
2pubspec.yaml
@ -0,0 +1,161 @@ |
|||||
|
import 'package:flutter/material.dart'; |
||||
|
import 'package:hadi_hoda_flutter/common_ui/resources/my_assets.dart'; |
||||
|
import 'package:hadi_hoda_flutter/common_ui/resources/my_colors.dart'; |
||||
|
import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.dart'; |
||||
|
import 'package:hadi_hoda_flutter/common_ui/resources/my_text_style.dart'; |
||||
|
import 'package:hadi_hoda_flutter/core/utils/my_localization.dart'; |
||||
|
import 'package:hadi_hoda_flutter/core/widgets/button/my_white_button.dart'; |
||||
|
import 'package:hadi_hoda_flutter/core/widgets/images/my_image.dart'; |
||||
|
import 'package:hadi_hoda_flutter/core/widgets/inkwell/my_inkwell.dart'; |
||||
|
import 'package:showcaseview/showcaseview.dart'; |
||||
|
|
||||
|
enum ShowcaseTooltipType { |
||||
|
bottom, |
||||
|
top, |
||||
|
topLeft; |
||||
|
|
||||
|
static Map<ShowcaseTooltipType, Widget> toolTipAction({String? description}) => { |
||||
|
ShowcaseTooltipType.bottom: Column( |
||||
|
mainAxisSize: MainAxisSize.min, |
||||
|
crossAxisAlignment: CrossAxisAlignment.center, |
||||
|
spacing: MySpaces.s4, |
||||
|
children: [ |
||||
|
MyImage( |
||||
|
image: MyAssets.handPoint, |
||||
|
size: 50, |
||||
|
), |
||||
|
Text( |
||||
|
description ?? '', |
||||
|
style: MYTextStyle.titr4, |
||||
|
textAlign: TextAlign.center, |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
ShowcaseTooltipType.top: Column( |
||||
|
mainAxisSize: MainAxisSize.min, |
||||
|
crossAxisAlignment: CrossAxisAlignment.center, |
||||
|
spacing: MySpaces.s4, |
||||
|
children: [ |
||||
|
Text( |
||||
|
description ?? '', |
||||
|
style: MYTextStyle.titr4, |
||||
|
textAlign: TextAlign.center, |
||||
|
), |
||||
|
Transform.flip( |
||||
|
flipY: true, |
||||
|
flipX: true, |
||||
|
child: MyImage( |
||||
|
image: MyAssets.handPoint, |
||||
|
size: 50, |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
ShowcaseTooltipType.topLeft: Column( |
||||
|
mainAxisSize: MainAxisSize.min, |
||||
|
crossAxisAlignment: CrossAxisAlignment.center, |
||||
|
spacing: MySpaces.s4, |
||||
|
children: [ |
||||
|
Text( |
||||
|
description ?? '', |
||||
|
style: MYTextStyle.titr4, |
||||
|
textAlign: TextAlign.center, |
||||
|
), |
||||
|
Transform.rotate( |
||||
|
angle: 2.5, |
||||
|
child: MyImage( |
||||
|
image: MyAssets.handPoint, |
||||
|
size: 50, |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
}; |
||||
|
|
||||
|
static Map<ShowcaseTooltipType, TooltipPosition> get toolTipPosition => { |
||||
|
ShowcaseTooltipType.bottom: TooltipPosition.bottom, |
||||
|
ShowcaseTooltipType.top: TooltipPosition.top, |
||||
|
ShowcaseTooltipType.topLeft: TooltipPosition.top, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
class MyShowcaseWidget extends StatelessWidget { |
||||
|
const MyShowcaseWidget({ |
||||
|
super.key, |
||||
|
required this.globalKey, |
||||
|
required this.child, |
||||
|
this.description, |
||||
|
this.type = ShowcaseTooltipType.bottom, |
||||
|
}); |
||||
|
|
||||
|
final GlobalKey globalKey; |
||||
|
final String? description; |
||||
|
final Widget child; |
||||
|
final ShowcaseTooltipType type; |
||||
|
|
||||
|
@override |
||||
|
Widget build(BuildContext context) { |
||||
|
return Showcase( |
||||
|
key: globalKey, |
||||
|
disableBarrierInteraction: true, |
||||
|
targetShapeBorder: CircleBorder(), |
||||
|
overlayColor: Color(0XFF0F0041), |
||||
|
overlayOpacity: 0.82, |
||||
|
/// ToolTip |
||||
|
tooltipPadding: EdgeInsets.zero, |
||||
|
tooltipBackgroundColor: MyColors.transparent, |
||||
|
tooltipPosition: ShowcaseTooltipType.toolTipPosition[type], |
||||
|
targetTooltipGap: 0, |
||||
|
toolTipSlideEndDistance: MySpaces.s6, |
||||
|
toolTipMargin: 0, |
||||
|
tooltipActionConfig: TooltipActionConfig( |
||||
|
gapBetweenContentAndAction: 0, |
||||
|
), |
||||
|
tooltipActions: [ |
||||
|
TooltipActionButton.custom( |
||||
|
button: ShowcaseTooltipType.toolTipAction( |
||||
|
description: description)[type], |
||||
|
), |
||||
|
], |
||||
|
/// Floating action |
||||
|
floatingActionWidget: FloatingActionWidget( |
||||
|
bottom: type == ShowcaseTooltipType.bottom ? MySpaces.s40 : null, |
||||
|
top: type == ShowcaseTooltipType.bottom ? null : 44, |
||||
|
left: MySpaces.s16, |
||||
|
right: MySpaces.s16, |
||||
|
child: Row( |
||||
|
children: [ |
||||
|
Expanded( |
||||
|
child: MyInkwell( |
||||
|
onTap: () { |
||||
|
ShowcaseView.get().unregister(); |
||||
|
}, |
||||
|
splashColor: MyColors.transparent, |
||||
|
highlightColor: MyColors.transparent, |
||||
|
child: Container( |
||||
|
height: 50, |
||||
|
alignment: Alignment.center, |
||||
|
child: Text( |
||||
|
context.translate.skip, |
||||
|
style: MYTextStyle.button2, |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
), |
||||
|
Expanded( |
||||
|
child: MyWhiteButton( |
||||
|
title: context.translate.next, |
||||
|
onTap: () { |
||||
|
ShowcaseView.get().next(); |
||||
|
}, |
||||
|
), |
||||
|
), |
||||
|
], |
||||
|
), |
||||
|
), |
||||
|
/// title & Child |
||||
|
description: '', |
||||
|
child: child, |
||||
|
); |
||||
|
} |
||||
|
} |
||||
@ -1,44 +0,0 @@ |
|||||
import 'package:flutter/material.dart'; |
|
||||
import 'package:hadi_hoda_flutter/common_ui/resources/my_assets.dart'; |
|
||||
import 'package:hadi_hoda_flutter/common_ui/resources/my_colors.dart'; |
|
||||
import 'package:hadi_hoda_flutter/core/utils/screen_size.dart'; |
|
||||
import 'package:hadi_hoda_flutter/core/widgets/images/my_image.dart'; |
|
||||
import 'package:showcaseview/showcaseview.dart'; |
|
||||
|
|
||||
class QuestionShowcase extends StatelessWidget { |
|
||||
const QuestionShowcase({ |
|
||||
super.key, |
|
||||
required this.globalKey, |
|
||||
required this.child, |
|
||||
this.description, |
|
||||
}); |
|
||||
|
|
||||
final GlobalKey globalKey; |
|
||||
final String? description; |
|
||||
final Widget child; |
|
||||
|
|
||||
@override |
|
||||
Widget build(BuildContext context) { |
|
||||
return Showcase( |
|
||||
key: globalKey, |
|
||||
blurValue: 10, |
|
||||
targetShapeBorder: CircleBorder(), |
|
||||
tooltipBackgroundColor: Colors.transparent, |
|
||||
disableMovingAnimation: true, |
|
||||
textColor: MyColors.white, |
|
||||
descriptionTextAlign: TextAlign.center, |
|
||||
disableScaleAnimation: true, |
|
||||
tooltipPadding: EdgeInsets.only(top: 60), |
|
||||
floatingActionWidget: FloatingActionWidget( |
|
||||
height: 60, |
|
||||
width: 60, |
|
||||
right: context.widthScreen * 0.17, |
|
||||
top: context.widthScreen * 1.17, |
|
||||
child: MyImage(image: MyAssets.handPoint), |
|
||||
), |
|
||||
overlayColor: Color(0XFF0F0041), |
|
||||
description: description ?? '', |
|
||||
child: child, |
|
||||
); |
|
||||
} |
|
||||
} |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue