lib/core/constants/my_constants.dart

@@ -16,5 +16,6 @@ class MyConstants {
   static const String mainAudioService = 'MAIN_AUDIO_SERVICE';
   static const String effectAudioService = 'EFFECT_AUDIO_SERVICE';
   static const String firstIntro = 'FIRST_INTRO';
+  static const String firstShowcase = 'FIRST_SHOWCASE';
   static const double mainAudioVolume = 0.3;
 }

lib/core/widgets/answer_box/answer_box.dart

@@ -1,10 +1,12 @@
 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_spaces.dart';
+import 'package:hadi_hoda_flutter/core/utils/my_localization.dart';
 import 'package:hadi_hoda_flutter/core/utils/set_platform_size.dart';
 import 'package:hadi_hoda_flutter/core/widgets/answer_box/styles/picture_box.dart';
 import 'package:hadi_hoda_flutter/core/widgets/answer_box/styles/text_box.dart';
 import 'package:hadi_hoda_flutter/core/widgets/images/my_image.dart';
+import 'package:hadi_hoda_flutter/core/widgets/showcase/my_showcase_widget.dart';
 import 'package:hadi_hoda_flutter/features/question/domain/entity/answer_entity.dart';
 
 class AnswerBox extends StatefulWidget {
@@ -13,6 +15,7 @@ class AnswerBox extends StatefulWidget {
     required this.answer,
     required this.correctAnswer,
     required this.index,
+    required this.globalKey,
     this.onTap,
     this.onNotifTap,
   });
@@ -22,6 +25,7 @@ class AnswerBox extends StatefulWidget {
   final void Function(bool isCorrect, int correctAnswer)? onTap;
   final int index;
   final Function(AnswerEntity answer)? onNotifTap;
+  final GlobalKey globalKey;
 
   @override
   State<AnswerBox> createState() => _AnswerBoxState();
@@ -70,13 +74,18 @@ class _AnswerBoxState extends State<AnswerBox> {
               PositionedDirectional(
                 top: setSize(context: context, mobile: MySpaces.s12, tablet: MySpaces.s20),
                 end: setSize(context: context, mobile: MySpaces.s8, tablet: MySpaces.s20),
-                child: GestureDetector(
-                  onTap: () {
-                    widget.onNotifTap?.call(widget.answer);
-                  },
-                  child: MyImage(
-                    image: MyAssets.iconNotif,
-                    size: setSize(context: context, tablet: 50),
+                child: MyShowcaseWidget(
+                  globalKey: widget.globalKey,
+                  type: ShowcaseTooltipType.bottom,
+                  description: context.translate.showcase_notif,
+                  child: GestureDetector(
+                    onTap: () {
+                      widget.onNotifTap?.call(widget.answer);
+                    },
+                    child: MyImage(
+                      image: MyAssets.iconNotif,
+                      size: setSize(context: context, tablet: 50),
+                    ),
                   ),
                 ),
               ),

lib/core/widgets/showcase/my_showcase_widget.dart

@@ -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,
+    );
+  }
+}

lib/core/widgets/showcase/question_showcase.dart

@@ -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,
-    );
-  }
-}

lib/features/question/presentation/bloc/question_bloc.dart

@@ -33,21 +33,35 @@ class QuestionBloc extends Bloc<QuestionEvent, QuestionState> {
       ) : super(QuestionState()) {
     volumeStream = _mainAudioService.volumeStream();
     stopMusic();
+    registerShowCase();
     on<GetLevelEvent>(_getLevelEvent);
     on<ChooseAnswerEvent>(_chooseAnswerEvent);
   }
 
+  @override
+  Future<void> close() {
+    ShowcaseView.get().unregister();
+    return super.close();
+  }
+
   /// ------------UseCases------------
   final GetLevelUseCase _getLevelUseCase;
   final GetNextLevelUseCase _getNextLevelUseCase;
 
   /// ------------Variables------------
-  final List<GlobalKey> keys = [
-    GlobalKey(),
-    GlobalKey(),
-    GlobalKey(),
-    GlobalKey(),
-  ];
+  final Map<String, GlobalKey> showCaseKey = {
+    'answer_key_0': GlobalKey(),
+    'answer_key_1': GlobalKey(),
+    'answer_key_2': GlobalKey(),
+    'answer_key_3': GlobalKey(),
+    'notif_key_0': GlobalKey(),
+    'notif_key_1': GlobalKey(),
+    'notif_key_2': GlobalKey(),
+    'notif_key_3': GlobalKey(),
+    'stepper_key': GlobalKey(),
+    'hadith_key': GlobalKey(),
+    'guide_key': GlobalKey(),
+  };
   late final Stream<double> volumeStream;
   bool isPlaying = false;
 
@@ -56,8 +70,24 @@ class QuestionBloc extends Bloc<QuestionEvent, QuestionState> {
   final AudioService _effectAudioService;
 
   /// ------------Functions------------
-  void startShowCase({required BuildContext context}) {
-    ShowCaseWidget.of(context).startShowCase([keys[1]]);
+  void registerShowCase() {
+    ShowcaseView.register(
+      onStart: (showcaseIndex, key) {
+        LocalStorage.saveData(key: MyConstants.firstShowcase, value: 'true');
+      },
+    );
+  }
+
+  void startShowcase() {
+    if (LocalStorage.readData(key: MyConstants.firstShowcase) != 'true') {
+      ShowcaseView.get().startShowCase([
+        showCaseKey['answer_key_1']!,
+        showCaseKey['notif_key_0']!,
+        showCaseKey['stepper_key']!,
+        showCaseKey['hadith_key']!,
+        showCaseKey['guide_key']!,
+      ]);
+    }
   }
 
   void showHadith({required BuildContext context}) {
@@ -170,6 +200,7 @@ class QuestionBloc extends Bloc<QuestionEvent, QuestionState> {
               currentQuestion: data.questions?.first,
             ));
            await playQuestionAudio();
+           startShowcase();
           },
           (error) {
             emit(state.copyWith(getQuestionStatus: BaseError(error.errorMessage)));

lib/features/question/presentation/ui/question_page.dart

@@ -14,70 +14,65 @@ import 'package:hadi_hoda_flutter/features/question/presentation/ui/screens/diam
 import 'package:hadi_hoda_flutter/features/question/presentation/ui/screens/question_screen.dart';
 import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/glassy_button.dart';
 import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/question_title.dart';
-import 'package:showcaseview/showcaseview.dart';
 
 class QuestionPage extends StatelessWidget {
   const QuestionPage({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return ShowCaseWidget(
-      builder: (context) {
-        return Scaffold(
-          body: MyPopScope(
-            child: Container(
-              height: context.heightScreen,
-              width: context.widthScreen,
-              padding:  EdgeInsets.symmetric(
-                horizontal: setSize(context: context,
-                    mobile: MySpaces.s16,
-                    tablet: MySpaces.s30) ?? 0,
-                vertical: setPlatform(android: MySpaces.s20) ?? 0,
+    return Scaffold(
+      body: MyPopScope(
+        child: Container(
+          height: context.heightScreen,
+          width: context.widthScreen,
+          padding:  EdgeInsets.symmetric(
+            horizontal: setSize(context: context,
+                mobile: MySpaces.s16,
+                tablet: MySpaces.s30) ?? 0,
+            vertical: setPlatform(android: MySpaces.s20) ?? 0,
+          ),
+          decoration: BoxDecoration(
+            gradient: LinearGradient(
+              begin: Alignment.topCenter,
+              end: Alignment.bottomCenter,
+              colors: [Color(0XFF6930DA), Color(0XFF263AA1)],
+            ),
+            image: DecorationImage(
+              image: AssetImage(MyAssets.pattern),
+              scale: 3,
+              repeat: ImageRepeat.repeat,
+              colorFilter: ColorFilter.mode(
+                Colors.black.withValues(alpha: 0.3),
+                BlendMode.srcIn,
               ),
-              decoration: BoxDecoration(
-                gradient: LinearGradient(
-                  begin: Alignment.topCenter,
-                  end: Alignment.bottomCenter,
-                  colors: [Color(0XFF6930DA), Color(0XFF263AA1)],
-                ),
-                image: DecorationImage(
-                  image: AssetImage(MyAssets.pattern),
-                  scale: 3,
-                  repeat: ImageRepeat.repeat,
-                  colorFilter: ColorFilter.mode(
-                    Colors.black.withValues(alpha: 0.3),
-                    BlendMode.srcIn,
+            ),
+          ),
+          child: SafeArea(
+            bottom: false,
+            child: Column(
+              children: [
+                _topButtons(context),
+                MySpaces.s10.gapHeight,
+                Expanded(
+                  child: BlocBuilder<QuestionBloc, QuestionState>(
+                    buildWhen: (previous, current) =>
+                    (previous.currentQuestion?.order !=
+                        current.currentQuestion?.order),
+                    builder: (context, state) {
+                      if (state.currentQuestion?.order ==
+                          state.levelEntity?.questions?.length) {
+                        return DiamondScreen();
+                      } else {
+                        return QuestionScreen();
+                      }
+                    },
                   ),
                 ),
-              ),
-              child: SafeArea(
-                bottom: false,
-                child: Column(
-                  children: [
-                    _topButtons(context),
-                    MySpaces.s10.gapHeight,
-                    Expanded(
-                      child: BlocBuilder<QuestionBloc, QuestionState>(
-                        buildWhen: (previous, current) =>
-                            (previous.currentQuestion?.order !=
-                            current.currentQuestion?.order),
-                        builder: (context, state) {
-                          if (state.currentQuestion?.order ==
-                              state.levelEntity?.questions?.length) {
-                            return DiamondScreen();
-                          } else {
-                            return QuestionScreen();
-                          }
-                        },
-                      ),
-                    ),
-                  ],
-                ),
-              ),
+              ],
             ),
           ),
-        );
-      },
+        ),
+      ),
     );
   }
 

lib/features/question/presentation/ui/screens/question_screen.dart

@@ -5,6 +5,7 @@ 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/gap.dart';
+import 'package:hadi_hoda_flutter/core/utils/my_localization.dart';
 import 'package:hadi_hoda_flutter/core/utils/screen_size.dart';
 import 'package:hadi_hoda_flutter/core/utils/set_platform_size.dart';
 import 'package:hadi_hoda_flutter/core/widgets/animations/fade_anim.dart';
@@ -12,6 +13,7 @@ import 'package:hadi_hoda_flutter/core/widgets/animations/slide_anim.dart';
 import 'package:hadi_hoda_flutter/core/widgets/animations/slide_up_fade.dart';
 import 'package:hadi_hoda_flutter/core/widgets/answer_box/answer_box.dart';
 import 'package:hadi_hoda_flutter/core/widgets/images/my_image.dart';
+import 'package:hadi_hoda_flutter/core/widgets/showcase/my_showcase_widget.dart';
 import 'package:hadi_hoda_flutter/features/question/domain/entity/answer_entity.dart';
 import 'package:hadi_hoda_flutter/features/question/presentation/bloc/question_bloc.dart';
 import 'package:hadi_hoda_flutter/features/question/presentation/bloc/question_event.dart';
@@ -39,10 +41,14 @@ class QuestionScreen extends StatelessWidget {
     return BlocBuilder<QuestionBloc, QuestionState>(
       buildWhen: (previous, current) =>
       previous.currentQuestion?.id != current.currentQuestion?.id,
-      builder: (context, state) => FadeAnim(
-        child: QuestionStepper(
-          length: state.levelEntity?.questions?.length ?? 0,
-          currentStep: state.currentQuestion?.order ?? 1,
+      builder: (context, state) => MyShowcaseWidget(
+        globalKey: context.read<QuestionBloc>().showCaseKey['stepper_key']!,
+        description: context.translate.showcase_stepper,
+        child: FadeAnim(
+          child: QuestionStepper(
+            length: state.levelEntity?.questions?.length ?? 0,
+            currentStep: state.currentQuestion?.order ?? 1,
+          ),
         ),
       ),
     );
@@ -96,22 +102,27 @@ class QuestionScreen extends StatelessWidget {
               : SlideAnim(
                 key: Key('${state.currentQuestion?.id}'),
                 index: index,
-                  child: AnswerBox(
-                    index: state.currentQuestion?.answers?[index].order ?? 1,
-                    answer:
-                        state.currentQuestion?.answers?[index] ??
-                        AnswerEntity(),
-                    correctAnswer: state.currentQuestion?.correctAnswer ?? 0,
-                    onNotifTap: (AnswerEntity answer) {
-                      context.read<QuestionBloc>().showAnswerDialog(
-                        context: context,
-                        answerEntity: answer,
-                      );
-                    },
-                    onTap: (isCorrect, correctAnswer) =>
-                        context.read<QuestionBloc>().add(
-                          ChooseAnswerEvent(isCorrect, correctAnswer, context),
-                        ),
+                  child: MyShowcaseWidget(
+                    globalKey: context.read<QuestionBloc>().showCaseKey['answer_key_$index']!,
+                    description: context.translate.showcase_answer,
+                    child: AnswerBox(
+                      globalKey: context.read<QuestionBloc>().showCaseKey['notif_key_$index']!,
+                      index: state.currentQuestion?.answers?[index].order ?? 1,
+                      answer:
+                          state.currentQuestion?.answers?[index] ??
+                          AnswerEntity(),
+                      correctAnswer: state.currentQuestion?.correctAnswer ?? 0,
+                      onNotifTap: (AnswerEntity answer) {
+                        context.read<QuestionBloc>().showAnswerDialog(
+                          context: context,
+                          answerEntity: answer,
+                        );
+                      },
+                      onTap: (isCorrect, correctAnswer) =>
+                          context.read<QuestionBloc>().add(
+                            ChooseAnswerEvent(isCorrect, correctAnswer, context),
+                          ),
+                    ),
                   ),
                 ),
         ),
@@ -126,28 +137,38 @@ class QuestionScreen extends StatelessWidget {
         child: Stack(
           alignment: Alignment.center,
           children: [
-            Container(
-              padding: EdgeInsets.all(MySpaces.s4),
-              decoration: BoxDecoration(
-                gradient: RadialGradient(
-                  colors: [
-                    Color(0XFFDFCD00),
-                    Color(0XFFDFCD00).withValues(alpha: 0.35),
-                    Color(0XFFDFCD00).withValues(alpha: 0),
-                  ],
-                  center: Alignment.center,
+            MyShowcaseWidget(
+              globalKey: context.read<QuestionBloc>().showCaseKey['guide_key']!,
+              description: context.translate.showcase_guide,
+              type: ShowcaseTooltipType.top,
+              child: Container(
+                padding: EdgeInsets.all(MySpaces.s4),
+                decoration: BoxDecoration(
+                  gradient: RadialGradient(
+                    colors: [
+                      Color(0XFFDFCD00),
+                      Color(0XFFDFCD00).withValues(alpha: 0.35),
+                      Color(0XFFDFCD00).withValues(alpha: 0),
+                    ],
+                    center: Alignment.center,
+                  ),
+                ),
+                child: MyImage(
+                  image: MyAssets.globe,
                 ),
-              ),
-              child: MyImage(
-                image: MyAssets.globe,
               ),
             ),
             PositionedDirectional(
               end: 0,
-              child: GlassyButton(
-                image: MyAssets.leaf,
-                onTap: () =>
-                    context.read<QuestionBloc>().showHadith(context: context),
+              child: MyShowcaseWidget(
+                globalKey: context.read<QuestionBloc>().showCaseKey['hadith_key']!,
+                type: ShowcaseTooltipType.topLeft,
+                description: context.translate.showcase_hadith,
+                child: GlassyButton(
+                  image: MyAssets.leaf,
+                  onTap: () =>
+                      context.read<QuestionBloc>().showHadith(context: context),
+                ),
               ),
             ),
           ],

lib/l10n/app_en.arb

@@ -1,7 +1,6 @@
 {
   "about_us": "About us",
   "about_us_desc" : "Rive combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast vector renderer. \nThis end-to-end pipeline brings interfaces to life with motion. It gives designers and devs the tools to build.",
-  "tap_to_select": "Tap the correct option to select.",
   "select_language": "Select language",
   "select": "Select",
   "please_wait": "wait a few moments...",
@@ -30,5 +29,10 @@
   "cancel": "Cancel",
   "exit": "Exit",
   "play": "PLAY",
-  "no_hadith": "There isn't any hadith for this question"
+  "no_hadith": "There isn't any hadith for this question",
+  "showcase_answer": "Tap the correct option\nto select.",
+  "showcase_notif": "The announcer will\nread the answers to\nthe options to you.",
+  "showcase_stepper": "Here you will see the\nquestions for this\nstage to reach the\ndiamond.",
+  "showcase_hadith": "View sources and\nhadiths for this\nquestion",
+  "showcase_guide": "This is a guide that will\nhelp you."
 }

lib/l10n/app_localizations.dart

@@ -106,12 +106,6 @@ abstract class AppLocalizations {
   /// **'Rive combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast vector renderer. \nThis end-to-end pipeline brings interfaces to life with motion. It gives designers and devs the tools to build.'**
   String get about_us_desc;
 
-  /// No description provided for @tap_to_select.
-  ///
-  /// In en, this message translates to:
-  /// **'Tap the correct option to select.'**
-  String get tap_to_select;
-
   /// No description provided for @select_language.
   ///
   /// In en, this message translates to:
@@ -285,6 +279,36 @@ abstract class AppLocalizations {
   /// In en, this message translates to:
   /// **'There isn\'t any hadith for this question'**
   String get no_hadith;
+
+  /// No description provided for @showcase_answer.
+  ///
+  /// In en, this message translates to:
+  /// **'Tap the correct option\nto select.'**
+  String get showcase_answer;
+
+  /// No description provided for @showcase_notif.
+  ///
+  /// In en, this message translates to:
+  /// **'The announcer will\nread the answers to\nthe options to you.'**
+  String get showcase_notif;
+
+  /// No description provided for @showcase_stepper.
+  ///
+  /// In en, this message translates to:
+  /// **'Here you will see the\nquestions for this\nstage to reach the\ndiamond.'**
+  String get showcase_stepper;
+
+  /// No description provided for @showcase_hadith.
+  ///
+  /// In en, this message translates to:
+  /// **'View sources and\nhadiths for this\nquestion'**
+  String get showcase_hadith;
+
+  /// No description provided for @showcase_guide.
+  ///
+  /// In en, this message translates to:
+  /// **'This is a guide that will\nhelp you.'**
+  String get showcase_guide;
 }
 
 class _AppLocalizationsDelegate

lib/l10n/app_localizations_en.dart

@@ -15,9 +15,6 @@ class AppLocalizationsEn extends AppLocalizations {
   String get about_us_desc =>
       'Rive combines an interactive design tool, a new stateful graphics format, a lightweight multi-platform runtime, and a blazing-fast vector renderer. \nThis end-to-end pipeline brings interfaces to life with motion. It gives designers and devs the tools to build.';
 
-  @override
-  String get tap_to_select => 'Tap the correct option to select.';
-
   @override
   String get select_language => 'Select language';
 
@@ -109,4 +106,21 @@ class AppLocalizationsEn extends AppLocalizations {
 
   @override
   String get no_hadith => 'There isn\'t any hadith for this question';
+
+  @override
+  String get showcase_answer => 'Tap the correct option\nto select.';
+
+  @override
+  String get showcase_notif =>
+      'The announcer will\nread the answers to\nthe options to you.';
+
+  @override
+  String get showcase_stepper =>
+      'Here you will see the\nquestions for this\nstage to reach the\ndiamond.';
+
+  @override
+  String get showcase_hadith => 'View sources and\nhadiths for this\nquestion';
+
+  @override
+  String get showcase_guide => 'This is a guide that will\nhelp you.';
 }

pubspec.lock

@@ -769,10 +769,10 @@ packages:
     dependency: "direct main"
     description:
       name: showcaseview
-      sha256: "82e013ac2de1ae92cc6e652badf676606057c8e17aa3afd91e78866c4b4e85b1"
+      sha256: "59e5edf33cbe3afb56edcbf25de553211409a576cbbbdda226c574410a314a71"
       url: "https://pub.dev"
     source: hosted
-    version: "4.0.1"
+    version: "5.0.1"
   sky_engine:
     dependency: transitive
     description: flutter

pubspec.yaml

@@ -28,7 +28,7 @@ dependencies:
   path_provider: ^2.1.5
   pretty_dio_logger: ^1.4.0
   shared_preferences: ^2.5.3
-  showcaseview: ^4.0.1
+  showcaseview: ^5.0.1
   vector_graphics: ^1.1.19
 
 dev_dependencies: