add: showcase feature

assets/images/hand_point.svg

@@ -0,0 +1,4 @@
+<svg width="71" height="71" viewBox="0 0 71 71" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.1965 4.74414C25.7116 4.7482 22.3706 6.13436 19.9064 8.59855C17.4422 11.0627 16.0561 14.4037 16.052 17.8886H20.4335C20.4335 15.5645 21.3567 13.3356 23.0001 11.6923C24.6435 10.0489 26.8724 9.12564 29.1965 9.12564C31.5206 9.12564 33.7495 10.0489 35.3929 11.6923C37.0362 13.3356 37.9595 15.5645 37.9595 17.8886H42.341C42.3369 14.4037 40.9507 11.0627 38.4866 8.59855C36.0224 6.13436 32.6814 4.7482 29.1965 4.74414Z" fill="white"/>
+<path d="M46.7231 66.0848H36.9962C34.7982 66.0842 32.6808 65.2577 31.0636 63.7692L10.9088 45.2223C10.4382 44.7921 10.0671 44.2645 9.82125 43.6762C9.57543 43.0879 9.46084 42.4531 9.48545 41.816C9.51005 41.1788 9.67328 40.5548 9.96374 39.9872C10.2542 39.4196 10.6649 38.9222 11.1673 38.5296C12.0279 37.899 13.083 37.5914 14.1477 37.6607C15.2123 37.73 16.2186 38.1718 16.9903 38.9086L24.8156 46.0548V17.8883C24.8156 16.7263 25.2773 15.6118 26.0989 14.7901C26.9206 13.9685 28.0351 13.5068 29.1971 13.5068C30.3592 13.5068 31.4736 13.9685 32.2953 14.7901C33.117 15.6118 33.5786 16.7263 33.5786 17.8883V33.2236C33.5786 32.0615 34.0402 30.9471 34.8619 30.1254C35.6836 29.3037 36.7981 28.8421 37.9601 28.8421C39.1222 28.8421 40.2366 29.3037 41.0583 30.1254C41.88 30.9471 42.3416 32.0615 42.3416 33.2236V35.4143C42.3416 34.2523 42.8032 33.1378 43.6249 32.3161C44.4466 31.4944 45.5611 31.0328 46.7231 31.0328C47.8852 31.0328 48.9996 31.4944 49.8213 32.3161C50.643 33.1378 51.1046 34.2523 51.1046 35.4143V37.6051C51.1046 36.443 51.5662 35.3286 52.3879 34.5069C53.2096 33.6852 54.3241 33.2236 55.4861 33.2236C56.6481 33.2236 57.7626 33.6852 58.5843 34.5069C59.406 35.3286 59.8676 36.443 59.8676 37.6051V52.9403C59.8676 56.4264 58.4827 59.7698 56.0177 62.2348C53.5526 64.6999 50.2092 66.0848 46.7231 66.0848Z" fill="white"/>
+</svg>

lib/common_ui/resources/my_assets.dart

@@ -27,4 +27,5 @@ class MyAssets {
   static const String done = 'assets/images/done.svg';
   static const String correct = 'assets/images/correct.svg';
   static const String wrong = 'assets/images/wrong.svg';
+  static const String handPoint = 'assets/images/hand_point.svg';
 }

lib/core/widgets/showcase/question_showcase.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:hadi_hoda_flutter/common_ui/resources/my_assets.dart';
+import 'package:hadi_hoda_flutter/common_ui/theme/my_theme.dart';
+import 'package:hadi_hoda_flutter/core/utils/my_image.dart';
+import 'package:hadi_hoda_flutter/core/utils/screen_size.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: context.primaryColor,
+      descriptionTextAlign: TextAlign.center,
+      descTextStyle: GoogleFonts.marhey(
+        fontSize: 12,
+        fontWeight: FontWeight.w700,
+        color: context.primaryColor,
+      ),
+      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

@@ -1,10 +1,12 @@
 import 'dart:async';
 import 'package:bloc/bloc.dart';
+import 'package:flutter/cupertino.dart';
 import 'package:hadi_hoda_flutter/core/status/base_status.dart';
 import 'package:hadi_hoda_flutter/features/question/domain/entity/question_entity.dart';
 import 'package:hadi_hoda_flutter/features/question/domain/usecases/get_question_usecase.dart';
 import 'package:hadi_hoda_flutter/features/question/presentation/bloc/question_event.dart';
 import 'package:hadi_hoda_flutter/features/question/presentation/bloc/question_state.dart';
+import 'package:showcaseview/showcaseview.dart';
 
 class QuestionBloc extends Bloc<QuestionEvent, QuestionState> {
   /// ------------constructor------------
@@ -18,10 +20,19 @@ class QuestionBloc extends Bloc<QuestionEvent, QuestionState> {
   final GetQuestionUseCase _getQuestionUseCase;
 
   /// ------------Variables------------
+  final List<GlobalKey> keys = [
+    GlobalKey(),
+    GlobalKey(),
+    GlobalKey(),
+    GlobalKey(),
+  ];
 
   /// ------------Controllers------------
 
   /// ------------Functions------------
+  void startShowCase({required BuildContext context}) {
+    ShowCaseWidget.of(context).startShowCase([keys[1]]);
+  }
 
   /// ------------Api Calls------------
   FutureOr<void> _getQuestionEvent(event, emit) async {

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

@@ -1,22 +1,29 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:google_fonts/google_fonts.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/gap.dart';
 import 'package:hadi_hoda_flutter/core/utils/my_image.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/widgets/answer_box/answer_box.dart';
+import 'package:hadi_hoda_flutter/core/widgets/showcase/question_showcase.dart';
+import 'package:hadi_hoda_flutter/features/question/presentation/bloc/question_bloc.dart';
 import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/glassy_button.dart';
 import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/left_blob.dart';
 import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/question_stepper.dart';
 import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/refresh_button.dart';
 import 'package:hadi_hoda_flutter/features/question/presentation/ui/widgets/right_blob.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: Container(
             height: context.heightScreen,
@@ -56,6 +63,8 @@ class QuestionPage extends StatelessWidget {
             ),
           ),
         );
+      },
+    );
   }
 
   Widget _topButtons() {
@@ -125,7 +134,11 @@ class QuestionPage extends StatelessWidget {
           crossAxisSpacing: MySpaces.s20,
           mainAxisSpacing: 50,
         ),
-        itemBuilder: (context, index) => AnswerBox(),
+        itemBuilder: (context, index) => QuestionShowcase(
+          globalKey: context.read<QuestionBloc>().keys[index],
+          description: context.translate.tap_to_select,
+          child: AnswerBox(),
+        ),
       ),
     );
   }

lib/l10n/app_en.arb

@@ -1,4 +1,5 @@
 {
   "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."
+  "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."
 }

lib/l10n/app_localizations.dart

@@ -105,6 +105,12 @@ abstract class AppLocalizations {
   /// In en, this message translates to:
   /// **'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;
 }
 
 class _AppLocalizationsDelegate

lib/l10n/app_localizations_en.dart

@@ -14,4 +14,7 @@ class AppLocalizationsEn extends AppLocalizations {
   @override
   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.';
 }

pubspec.lock

@@ -477,6 +477,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.4.1"
+  showcaseview:
+    dependency: "direct main"
+    description:
+      name: showcaseview
+      sha256: "82e013ac2de1ae92cc6e652badf676606057c8e17aa3afd91e78866c4b4e85b1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.0.1"
   sky_engine:
     dependency: transitive
     description: flutter

pubspec.yaml

@@ -23,6 +23,7 @@ dependencies:
   intl: ^0.20.2
   pretty_dio_logger: ^1.4.0
   shared_preferences: ^2.5.3
+  showcaseview: ^4.0.1
 
 dev_dependencies:
   flutter_test: