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