Added new Intimmation Screens with Lottie

3 years ago · 5ed9991428
parent 3d7b80b8a0
commit 5ed9991428
17 changed files with 377 additions and 156 deletions
--- a/assets/langs/ar-SA.json
+++ b/assets/langs/ar-SA.json
@ -487,7 +487,11 @@
  "marathoners": "الماراثون",
  "prize": "جائزة:",
  "winnerSelection": "اختيار الفائز",
-  "qualifiers": "تصفيات"
-
+  "qualifiers": "تصفيات",
+  "getReadyForContest": "استعد للمسابقة القادمة:",
+  "winnerSelectedRandomly": "سيتم اختيار الفائز عشوائياً من بين التصفيات.",
+  "fingersCrossed": "تشابك الاصابع!!!",
+  "congrats": "مبروك !!!",
+  "allQuestionsCorrect": "لقد أجبت على جميع الأسئلة بشكل صحيح."

 }
--- a/assets/langs/en-US.json
+++ b/assets/langs/en-US.json
@ -487,5 +487,10 @@
  "itemTypeDisplayName": "Item Type Display Name",
  "none": "None",
  "winnerSelection": "Winner Selection",
-  "qualifiers": "Qualifiers"
+  "qualifiers": "Qualifiers",
+  "getReadyForContest": "Get Ready for the coming contest:",
+  "winnerSelectedRandomly": "The winner will be selected randomly among the qualifiers.",
+  "fingersCrossed": "Fingers Crossed!!!",
+  "congrats": "Congratulations!!!",
+  "allQuestionsCorrect": "You have answered all questions correct"
 }
--- a/assets/lottie/all_questions.json
+++ b/assets/lottie/all_questions.json
--- a/lib/classes/lottie_consts.dart
+++ b/lib/classes/lottie_consts.dart
@ -3,4 +3,5 @@ class MyLottieConsts {
  static const String celebrate1Lottie = "assets/lottie/celebrate1.json";
  static const String celebrate2Lottie = "assets/lottie/celebrate2.json";
  static const String winnerLottie = "assets/lottie/winner3.json";
+  static const String allQuestions = "assets/lottie/all_questions.json";
 }
--- a/lib/config/routes.dart
+++ b/lib/config/routes.dart
@ -19,6 +19,7 @@ import 'package:mohem_flutter_app/ui/login/verify_login_screen.dart';
 import 'package:mohem_flutter_app/ui/marathon/marathon_intro_screen.dart';
 import 'package:mohem_flutter_app/ui/marathon/marathon_screen.dart';
 import 'package:mohem_flutter_app/ui/marathon/marathon_winner_selection.dart';
+import 'package:mohem_flutter_app/ui/marathon/winner_screen.dart';
 import 'package:mohem_flutter_app/ui/misc/request_submit_screen.dart';
 import 'package:mohem_flutter_app/ui/my_attendance/dynamic_screens/dynamic_input_screen.dart';
 import 'package:mohem_flutter_app/ui/my_attendance/dynamic_screens/dynamic_listview_screen.dart';
@ -180,6 +181,7 @@ class AppRoutes {
  static const String marathonIntroScreen = "/marathonIntroScreen";
  static const String marathonScreen = "/marathonScreen";
  static const String marathonWinnerSelection = "/marathonWinnerSelection";
+  static const String marathonWinnerScreen = "/marathonWinnerScreen";

  static final Map<String, WidgetBuilder> routes = {
    login: (BuildContext context) => LoginScreen(),
@ -290,6 +292,8 @@ class AppRoutes {
    // Marathon
    marathonIntroScreen: (BuildContext context) => MarathonIntroScreen(),
    marathonScreen: (BuildContext context) => MarathonScreen(),
-    marathonWinnerSelection: (BuildContext context) => MarathonWinnerSelection(),
+    marathonWinnerSelection: (BuildContext context) =>
+        MarathonWinnerSelection(),
+    marathonWinnerScreen: (BuildContext context) => WinnerScreen(),
  };
 }
--- a/lib/generated/codegen_loader.g.dart
+++ b/lib/generated/codegen_loader.g.dart
@ -503,7 +503,12 @@ class CodegenLoader extends AssetLoader{
  "marathoners": "الماراثون",
  "prize": "جائزة:",
  "winnerSelection": "اختيار الفائز",
-  "qualifiers": "تصفيات"
+  "qualifiers": "تصفيات",
+  "getReadyForContest": "استعد للمسابقة القادمة:",
+  "winnerSelectedRandomly": "سيتم اختيار الفائز عشوائياً من بين التصفيات.",
+  "fingersCrossed": "تشابك الاصابع!!!",
+  "congrats": "مبروك !!!",
+  "allQuestionsCorrect": "لقد أجبت على جميع الأسئلة بشكل صحيح."
 };
 static const Map<String,dynamic> en_US = {
  "mohemm": "Mohemm",
@ -926,6 +931,8 @@ static const Map<String,dynamic> en_US = {
  "adult": "Adult",
  "updateMember": "Are You Sure You Want to Update this Member?",
  "fieldIsEmpty": "'{data}' Field is empty. Please select",
+  "pleaseEnterComments": "Please enter comments",
+  "skip": "skip",
  "typeCurrentPasswordBelow": "Type Your Current password below",
  "currentPassword": "Current password",
  "profile": {
@ -992,7 +999,12 @@ static const Map<String,dynamic> en_US = {
  "itemTypeDisplayName": "Item Type Display Name",
  "none": "None",
  "winnerSelection": "Winner Selection",
-  "qualifiers": "Qualifiers"
+  "qualifiers": "Qualifiers",
+  "getReadyForContest": "Get Ready for the coming contest:",
+  "winnerSelectedRandomly": "The winner will be selected randomly among the qualifiers.",
+  "fingersCrossed": "Fingers Crossed!!!",
+  "congrats": "Congratulations!!!",
+  "allQuestionsCorrect": "You have answered all questions correct"
 };
 static const Map<String, Map<String,dynamic>> mapLocales = {"ar_SA": ar_SA, "en_US": en_US};
 }
--- a/lib/generated/locale_keys.g.dart
+++ b/lib/generated/locale_keys.g.dart
@ -474,5 +474,10 @@ abstract class  LocaleKeys {
  static const prize = 'prize';
  static const winnerSelection = 'winnerSelection';
  static const qualifiers = 'qualifiers';
+  static const getReadyForContest = 'getReadyForContest';
+  static const winnerSelectedRandomly = 'winnerSelectedRandomly';
+  static const fingersCrossed = 'fingersCrossed';
+  static const congrats = 'congrats';
+  static const allQuestionsCorrect = 'allQuestionsCorrect';

 }
--- a/lib/provider/dashboard_provider_model.dart
+++ b/lib/provider/dashboard_provider_model.dart
@ -65,7 +65,6 @@ class DashboardProviderModel with ChangeNotifier, DiagnosticableTreeMixin {
        progress = (isTimeRemainingInSeconds / totalShiftTimeInSeconds);
        endTime = DateTime.now().millisecondsSinceEpoch + Duration(seconds: isTimeRemainingInSeconds).inMilliseconds;
      }
-
      notifyListeners();
    } catch (ex) {
      Utils.handleException(ex, context, null);
@ -102,6 +101,7 @@ class DashboardProviderModel with ChangeNotifier, DiagnosticableTreeMixin {
      DrawerMenuItem("assets/images/drawer/performance_evaluation.svg", LocaleKeys.performanceEvaluation.tr(), AppRoutes.performanceEvaluation),
      DrawerMenuItem("assets/images/drawer/mowadhafi.svg", LocaleKeys.mowadhafhi.tr(), AppRoutes.mowadhafhi),
      DrawerMenuItem("assets/images/drawer/pending_trasactions.svg", LocaleKeys.pendingTransactions.tr(), AppRoutes.pendingTransactions),
+      DrawerMenuItem("assets/images/drawer/pending_trasactions.svg", LocaleKeys.brainMarathon.tr(), AppRoutes.marathonIntroScreen),
      DrawerMenuItem("assets/images/drawer/change_password.svg", LocaleKeys.changePassword.tr(), AppRoutes.changePassword),
    ];

--- a/lib/ui/marathon/marathon_intro_screen.dart
+++ b/lib/ui/marathon/marathon_intro_screen.dart
@ -35,6 +35,7 @@ class MarathonIntroScreen extends StatelessWidget {
                  provider: provider,
                  timeToMarathon: dummyEndTime,
                ).paddingOnly(left: 15, right: 15, bottom: 15),
+                const SizedBox(height: 100,),
              ],
            ),
          ),
--- a/lib/ui/marathon/marathon_provider.dart
+++ b/lib/ui/marathon/marathon_provider.dart
@ -16,6 +16,21 @@ class MarathonProvider extends ChangeNotifier {
    notifyListeners();
  }

+  bool _isMarathonCompleted = false;
+
+  bool get isMarathonCompleted => _isMarathonCompleted;
+
+  set isMarathonCompleted(bool value) {
+    _isMarathonCompleted = value;
+    notifyListeners();
+  }
+
+  void swipeCardLeft() {
+    currentQuestionNumber = currentQuestionNumber + 1;
+    swiperController.swipeLeft();
+    notifyListeners();
+  }
+
  int _currentQuestionNumber = 1;
  final int totalQuestions = 10;

@ -26,23 +41,32 @@ class MarathonProvider extends ChangeNotifier {
    notifyListeners();
  }

-  Timer timer = Timer.periodic(const Duration(seconds: 1), (Timer timer) {});
+  Timer timerU = Timer.periodic(const Duration(seconds: 1), (Timer timer) {});
  int start = 5;

  void startTimer(BuildContext context) {
    start = 5;
    const Duration oneSec = Duration(seconds: 1);
-    timer = Timer.periodic(
+    timerU = Timer.periodic(
      oneSec,
-      (Timer timer) {
+      (Timer timer) async {
        if (start == 0) {
-          if (currentQuestionNumber == 10) {
+          if (currentQuestionNumber == 9) {
            timer.cancel();
-            Navigator.pushNamed(context, AppRoutes.marathonWinnerSelection);
+            cancelTimer();
+            isMarathonCompleted = true;
+            await Future<dynamic>.delayed(const Duration(seconds: 3));
+            Navigator.pushReplacementNamed(
+              context,
+              AppRoutes.marathonWinnerSelection,
+            );
+            resetValues();
+
+            return;
          }
-          swiperController.swipeLeft();
-          currentQuestionNumber = currentQuestionNumber + 1;
+          swipeCardLeft();
          timer.cancel();
+          cancelTimer();
        } else {
          start--;
        }
@ -51,8 +75,14 @@ class MarathonProvider extends ChangeNotifier {
    );
  }

+  void resetValues() {
+    timerU.cancel();
+    isMarathonCompleted = false;
+    currentQuestionNumber = 1;
+  }
+
  void cancelTimer() {
-    timer.cancel();
+    timerU.cancel();
    notifyListeners();
  }
 }
--- a/lib/ui/marathon/marathon_screen.dart
+++ b/lib/ui/marathon/marathon_screen.dart
@ -2,13 +2,17 @@ import 'dart:async';

 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:lottie/lottie.dart';
 import 'package:mohem_flutter_app/classes/colors.dart';
 import 'package:mohem_flutter_app/classes/decorations_helper.dart';
+import 'package:mohem_flutter_app/classes/lottie_consts.dart';
+import 'package:mohem_flutter_app/config/routes.dart';
 import 'package:mohem_flutter_app/extensions/int_extensions.dart';
 import 'package:mohem_flutter_app/extensions/string_extensions.dart';
 import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
 import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
 import 'package:mohem_flutter_app/ui/marathon/marathon_provider.dart';
+import 'package:mohem_flutter_app/ui/marathon/widgets/custom_status_widget.dart';
 import 'package:mohem_flutter_app/ui/marathon/widgets/marathon_header.dart';
 import 'package:mohem_flutter_app/ui/marathon/widgets/question_card.dart';
 import 'package:provider/provider.dart';
@ -28,8 +32,43 @@ class MarathonScreen extends StatelessWidget {
            20.height,
            MarathonProgressContainer(provider: provider)
                .paddingOnly(left: 21, right: 21),
-            QuestionCard(provider: provider)
-                .paddingOnly(top: 12, left: 21, right: 21),
+            if (provider.isMarathonCompleted)
+              InkWell(
+                onTap: () {
+                  Navigator.pushReplacementNamed(
+                    context,
+                    AppRoutes.marathonWinnerSelection,
+                  );
+                },
+                child: CustomStatusWidget(
+                  asset: Lottie.asset(
+                    MyLottieConsts.allQuestions,
+                    height: 200,
+                  ),
+                  title: Text(
+                    LocaleKeys.congrats.tr(),
+                    style: const TextStyle(
+                      height: 23 / 24,
+                      color: MyColors.greenColor,
+                      fontSize: 27,
+                      letterSpacing: -1,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                  subTitle: Text(
+                    LocaleKeys.allQuestionsCorrect.tr(),
+                    textAlign: TextAlign.center,
+                    style: const TextStyle(
+                        fontSize: 18,
+                        fontWeight: FontWeight.w600,
+                        color: MyColors.darkTextColor,
+                        letterSpacing: -1.08),
+                  ),
+                ).paddingOnly(top: 12, left: 21, right: 21),
+              )
+            else
+              QuestionCard(provider: provider)
+                  .paddingOnly(top: 12, left: 21, right: 21),
          ],
        ),
      ),
--- a/lib/ui/marathon/marathon_winner_selection.dart
+++ b/lib/ui/marathon/marathon_winner_selection.dart
@ -2,13 +2,17 @@ import 'dart:async';

 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:lottie/lottie.dart';
 import 'package:mohem_flutter_app/classes/colors.dart';
 import 'package:mohem_flutter_app/classes/decorations_helper.dart';
+import 'package:mohem_flutter_app/classes/lottie_consts.dart';
+import 'package:mohem_flutter_app/config/routes.dart';
 import 'package:mohem_flutter_app/extensions/int_extensions.dart';
 import 'package:mohem_flutter_app/extensions/string_extensions.dart';
 import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
 import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
 import 'package:mohem_flutter_app/ui/marathon/marathon_provider.dart';
+import 'package:mohem_flutter_app/ui/marathon/widgets/custom_status_widget.dart';
 import 'package:mohem_flutter_app/ui/marathon/widgets/marathon_header.dart';
 import 'package:provider/provider.dart';

@ -27,31 +31,61 @@ class MarathonWinnerSelection extends StatelessWidget {
            QualifiersContainer(provider: provider)
                .paddingOnly(left: 21, right: 21),
            20.height,
-            Container(
-              height: 50,
-              decoration: BoxDecoration(
-                color: MyColors.greenColor,
-                borderRadius: BorderRadius.circular(15),
-                boxShadow: [
-                  BoxShadow(
-                    color: const Color(0xff000000).withOpacity(.05),
-                    blurRadius: 26,
-                    offset: const Offset(0, -3),
-                  ),
-                ],
-              ),
-              child: Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 20),
-                child: Row(
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                  children: <Widget>[
-                    "Muhammad Shrouf"
-                        .toText18(isBold: true, color: MyColors.white),
-                    "837436".toText18(isBold: true, color: MyColors.white),
+            InkWell(
+              onTap: () {
+                Navigator.pushNamed(context, AppRoutes.marathonWinnerScreen);
+              },
+              child: Container(
+                height: 50,
+                decoration: BoxDecoration(
+                  color: MyColors.greenColor,
+                  borderRadius: BorderRadius.circular(15),
+                  boxShadow: [
+                    BoxShadow(
+                      color: const Color(0xff000000).withOpacity(.05),
+                      blurRadius: 26,
+                      offset: const Offset(0, -3),
+                    ),
                  ],
                ),
-              ),
-            ).paddingOnly(left: 20, right: 20),
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 20),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: <Widget>[
+                      "Muhammad Shrouff"
+                          .toText18(isBold: true, color: MyColors.white),
+                      "837436".toText18(isBold: true, color: MyColors.white),
+                    ],
+                  ),
+                ),
+              ).paddingOnly(left: 20, right: 20),
+            ),
+            CustomStatusWidget(
+                asset: Lottie.asset(
+                  MyLottieConsts.winnerLottie,
+                  height: 168,
+                ),
+                title: Text(
+                  LocaleKeys.fingersCrossed.tr(),
+                  style: const TextStyle(
+                    height: 23 / 24,
+                    color: MyColors.greenColor,
+                    fontSize: 27,
+                    letterSpacing: -1,
+                    fontWeight: FontWeight.w600,
+                  ),
+                ),
+                subTitle: Text(
+                  LocaleKeys.winnerSelectedRandomly.tr(),
+                  textAlign: TextAlign.center,
+                  style: const TextStyle(
+                    color: MyColors.grey77Color,
+                    fontSize: 16,
+                    letterSpacing: -0.64,
+                    fontWeight: FontWeight.w600,
+                  ),
+                )).paddingOnly(left: 21, right: 21, top: 20, bottom: 20),
          ],
        ),
      ),
--- a/lib/ui/marathon/widgets/custom_status_widget.dart
+++ b/lib/ui/marathon/widgets/custom_status_widget.dart
@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:mohem_flutter_app/classes/decorations_helper.dart';
+import 'package:mohem_flutter_app/extensions/int_extensions.dart';
+
+class CustomStatusWidget extends StatelessWidget {
+  final Widget asset;
+  final Widget title;
+  final Widget subTitle;
+
+  const CustomStatusWidget({
+    Key? key,
+    required this.asset,
+    required this.title,
+    required this.subTitle,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      decoration: MyDecorations.shadowDecoration,
+      padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
+      child: Column(
+        children: <Widget>[
+          asset,
+          50.height,
+          title,
+          10.height,
+          subTitle,
+        ],
+      ),
+    );
+  }
+}
--- a/lib/ui/marathon/widgets/marathon_banner.dart
+++ b/lib/ui/marathon/widgets/marathon_banner.dart
@ -1,14 +1,18 @@
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:mohem_flutter_app/app_state/app_state.dart';
 import 'package:mohem_flutter_app/classes/colors.dart';
 import 'package:mohem_flutter_app/classes/decorations_helper.dart';
 import 'package:mohem_flutter_app/config/routes.dart';
 import 'package:mohem_flutter_app/extensions/int_extensions.dart';
 import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
+import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
 import 'package:mohem_flutter_app/ui/marathon/marathon_intro_screen.dart';
 import 'package:mohem_flutter_app/ui/marathon/marathon_provider.dart';
 import 'package:mohem_flutter_app/ui/marathon/widgets/countdown_timer.dart';
 import 'package:provider/provider.dart';
+import 'dart:math' as math;

 class MarathonBanner extends StatelessWidget {
  const MarathonBanner({Key? key}) : super(key: key);
@ -20,10 +24,16 @@ class MarathonBanner extends StatelessWidget {
      decoration: MyDecorations.shadowDecoration,
      child: Stack(
        children: [
-          SvgPicture.asset(
-            "assets/images/marathon_banner_bg.svg",
-            fit: BoxFit.cover,
-            width: MediaQuery.of(context).size.width - 40,
+          Transform(
+            alignment: Alignment.center,
+            transform: Matrix4.rotationY(
+              AppState().isArabic(context) ? math.pi : 0,
+            ),
+            child: SvgPicture.asset(
+              "assets/images/marathon_banner_bg.svg",
+              fit: BoxFit.cover,
+              width: MediaQuery.of(context).size.width - 40,
+            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
@ -32,28 +42,28 @@ class MarathonBanner extends StatelessWidget {
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
-                  5.height,
+                  AppState().isArabic(context) ? 0.height : 5.height,
                  Flexible(
-                    child: const Text(
-                      "Get Ready for the coming contest:",
-                      style: TextStyle(
+                    child: Text(
+                      LocaleKeys.getReadyForContest.tr(),
+                      style: const TextStyle(
                        fontStyle: FontStyle.italic,
                        fontSize: 12,
                        fontWeight: FontWeight.w600,
                        color: MyColors.lightGreyEFColor,
                        letterSpacing: -0.4,
                      ),
-                    ).paddingOnly(right: 12),
+                    ),
                  ),
                  const Flexible(
                    child: Text(
                      "Saudi Arabia",
                      style: TextStyle(
                        fontStyle: FontStyle.italic,
-                        fontSize: 21,
+                        fontSize: 19,
                        fontWeight: FontWeight.bold,
                        color: MyColors.lightGreyEFColor,
-                        // letterSpacing: -0.4,
+                        height: 32 / 22,
                      ),
                    ),
                  ),
@ -64,9 +74,12 @@ class MarathonBanner extends StatelessWidget {
                    screenFlag: 0,
                  ),
                ],
+              ).paddingOnly(
+                left: AppState().isArabic(context) ? 12 : 0,
+                right: AppState().isArabic(context) ? 0 : 12,
              )
            ],
-          ).paddingOnly(right: 10),
+          ),
        ],
      ).onPress(
        () => Navigator.pushNamed(context, AppRoutes.marathonIntroScreen),
--- a/lib/ui/marathon/widgets/marathon_header.dart
+++ b/lib/ui/marathon/widgets/marathon_header.dart
@ -3,6 +3,8 @@ import 'package:flutter/material.dart';
 import 'package:mohem_flutter_app/classes/colors.dart';
 import 'package:mohem_flutter_app/extensions/string_extensions.dart';
 import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
+import 'package:mohem_flutter_app/ui/marathon/marathon_provider.dart';
+import 'package:provider/provider.dart';

 class MarathonHeader extends StatelessWidget {
  const MarathonHeader({Key? key}) : super(key: key);
@ -25,7 +27,11 @@ class MarathonHeader extends StatelessWidget {
              icon: const Icon(Icons.close, size: 28),
              color: MyColors.black,
              constraints: const BoxConstraints(),
-              onPressed: () => Navigator.pop(context),
+              onPressed: () {
+                Provider.of<MarathonProvider>(context, listen: false)
+                    .resetValues();
+                Navigator.pop(context);
+              },
            )
          ],
        ),
--- a/lib/ui/marathon/widgets/question_card.dart
+++ b/lib/ui/marathon/widgets/question_card.dart
@ -3,6 +3,7 @@ import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:mohem_flutter_app/classes/colors.dart';
 import 'package:mohem_flutter_app/classes/decorations_helper.dart';
+import 'package:mohem_flutter_app/config/routes.dart';
 import 'package:mohem_flutter_app/models/marathon_question_model.dart';
 import 'package:mohem_flutter_app/ui/marathon/marathon_provider.dart';
 import 'package:provider/provider.dart';
@ -156,21 +157,33 @@ class AnswerContent extends StatelessWidget {
        children: <Widget>[
          InkWell(
            onTap: () {
+              if (provider.currentQuestionNumber == 9) {
+                provider.cancelTimer();
+                provider.resetValues();
+                Navigator.pushReplacementNamed(
+                  context,
+                  AppRoutes.marathonWinnerSelection,
+                );
+                return;
+              }
              provider.cancelTimer();
-              provider.swiperController.swipeLeft();
+              provider.startTimer(context);
+              provider.swipeCardLeft();
            },
-            child: Container(
-              height: 60,
-              width: MediaQuery.of(context).size.width - 75,
-              alignment: Alignment.centerLeft,
-              decoration: MyDecorations.answerContainerDecoration,
-              child: Center(
-                child: Text(
-                  question.opt1!,
-                  style: const TextStyle(
-                    color: MyColors.darkTextColor,
-                    fontWeight: FontWeight.w600,
-                    fontSize: 16,
+            child: Flexible(
+              child: Container(
+                height: 60,
+                width: MediaQuery.of(context).size.width - 75,
+                alignment: Alignment.centerLeft,
+                decoration: MyDecorations.answerContainerDecoration,
+                child: Center(
+                  child: Text(
+                    question.opt1!,
+                    style: const TextStyle(
+                      color: MyColors.darkTextColor,
+                      fontWeight: FontWeight.w600,
+                      fontSize: 16,
+                    ),
                  ),
                ),
              ),
@ -179,8 +192,18 @@ class AnswerContent extends StatelessWidget {
          const SizedBox(height: 15),
          InkWell(
            onTap: () {
+              if (provider.currentQuestionNumber == 9) {
+                provider.cancelTimer();
+                provider.resetValues();
+                Navigator.pushReplacementNamed(
+                  context,
+                  AppRoutes.marathonWinnerSelection,
+                );
+                return;
+              }
              provider.cancelTimer();
-              provider.swiperController.swipeLeft();
+              provider.startTimer(context);
+              provider.swipeCardLeft();
            },
            child: Container(
              height: 60,
@ -202,8 +225,18 @@ class AnswerContent extends StatelessWidget {
          const SizedBox(height: 15),
          InkWell(
            onTap: () {
+              if (provider.currentQuestionNumber == 9) {
+                provider.cancelTimer();
+                provider.resetValues();
+                Navigator.pushReplacementNamed(
+                  context,
+                  AppRoutes.marathonWinnerSelection,
+                );
+                return;
+              }
              provider.cancelTimer();
-              provider.swiperController.swipeLeft();
+              provider.startTimer(context);
+              provider.swipeCardLeft();
            },
            child: Container(
              height: 60,
@ -225,8 +258,18 @@ class AnswerContent extends StatelessWidget {
          const SizedBox(height: 15),
          InkWell(
            onTap: () {
+              if (provider.currentQuestionNumber == 9) {
+                provider.cancelTimer();
+                provider.resetValues();
+                Navigator.pushReplacementNamed(
+                  context,
+                  AppRoutes.marathonWinnerSelection,
+                );
+                return;
+              }
              provider.cancelTimer();
-              provider.swiperController.swipeLeft();
+              provider.startTimer(context);
+              provider.swipeCardLeft();
            },
            child: Container(
              height: 60,
@ -250,90 +293,3 @@ class AnswerContent extends StatelessWidget {
    );
  }
 }
-
-//Column(
-//         mainAxisSize: MainAxisSize.min,
-//         mainAxisAlignment: MainAxisAlignment.center,
-//         crossAxisAlignment: CrossAxisAlignment.center,
-//         children: <Widget>[
-//           InkWell(
-//             onTap: () {},
-//             child: Container(
-//               height: 60,
-//               width: MediaQuery.of(context).size.width - 75,
-//               alignment: Alignment.centerLeft,
-//               decoration: MyDecorations.answerContainerDecoration,
-//               child: Center(
-//                 child: Text(
-//                   question.opt1!,
-//                   style: const TextStyle(
-//                     color: MyColors.darkTextColor,
-//                     fontWeight: FontWeight.bold,
-//                     fontSize: 18,
-//                   ),
-//                 ),
-//               ),
-//             ),
-//           ),
-//           const SizedBox(height: 15),
-//           InkWell(
-//             onTap: () {},
-//             child: Container(
-//               height: 60,
-//               width: MediaQuery.of(context).size.width - 75,
-//               alignment: Alignment.centerLeft,
-//               decoration: MyDecorations.answerContainerDecoration,
-//               child: Center(
-//                 child: Text(
-//                   question.opt2!,
-//                   style: const TextStyle(
-//                     color: MyColors.darkTextColor,
-//                     fontWeight: FontWeight.bold,
-//                     fontSize: 18,
-//                   ),
-//                 ),
-//               ),
-//             ),
-//           ),
-//           const SizedBox(height: 15),
-//           InkWell(
-//             onTap: () {},
-//             child: Container(
-//               height: 60,
-//               width: MediaQuery.of(context).size.width - 75,
-//               alignment: Alignment.centerLeft,
-//               decoration: MyDecorations.answerContainerDecoration,
-//               child: Center(
-//                 child: Text(
-//                   question.opt3!,
-//                   style: const TextStyle(
-//                     color: MyColors.darkTextColor,
-//                     fontWeight: FontWeight.bold,
-//                     fontSize: 18,
-//                   ),
-//                 ),
-//               ),
-//             ),
-//           ),
-//           const SizedBox(height: 15),
-//           InkWell(
-//             onTap: () {},
-//             child: Container(
-//               height: 60,
-//               width: MediaQuery.of(context).size.width - 75,
-//               alignment: Alignment.centerLeft,
-//               decoration: MyDecorations.answerContainerDecoration,
-//               child: Center(
-//                 child: Text(
-//                   question.opt3!,
-//                   style: const TextStyle(
-//                     color: MyColors.darkTextColor,
-//                     fontWeight: FontWeight.bold,
-//                     fontSize: 18,
-//                   ),
-//                 ),
-//               ),
-//             ),
-//           ),
-//         ],
-//       ),
--- a/lib/ui/marathon/winner_screen.dart
+++ b/lib/ui/marathon/winner_screen.dart
@ -0,0 +1,76 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:lottie/lottie.dart';
+import 'package:mohem_flutter_app/classes/colors.dart';
+import 'package:mohem_flutter_app/classes/decorations_helper.dart';
+import 'package:mohem_flutter_app/classes/lottie_consts.dart';
+import 'package:mohem_flutter_app/extensions/int_extensions.dart';
+import 'package:mohem_flutter_app/extensions/string_extensions.dart';
+import 'package:mohem_flutter_app/extensions/widget_extensions.dart';
+import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
+import 'package:mohem_flutter_app/ui/marathon/widgets/marathon_header.dart';
+
+class WinnerScreen extends StatelessWidget {
+  const WinnerScreen({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: MyColors.backgroundColor,
+      body: SingleChildScrollView(
+        child: Column(
+          children: <Widget>[
+            const MarathonHeader(),
+            60.height,
+            Container(
+              width: double.infinity,
+              decoration: MyDecorations.shadowDecoration,
+              padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20),
+              child: Column(
+                children: <Widget>[
+                  SizedBox(
+                    height: 200,
+                    child: Stack(
+                      children: <Widget>[
+                        Lottie.asset(
+                          MyLottieConsts.celebrate1Lottie,
+                          height: 200,
+                        ),
+                        Lottie.asset(
+                          MyLottieConsts.celebrate2Lottie,
+                          height: 200,
+                        ),
+                      ],
+                    ),
+                  ),
+                  50.height,
+                  "Muhammad Shrouff".toText22(color: MyColors.grey3AColor),
+                  "837436".toText22(color: MyColors.grey57Color),
+                  90.height,
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: <Widget>[
+                      LocaleKeys.sponsoredBy
+                          .tr()
+                          .toText14(color: MyColors.grey77Color),
+                      " Extra".toText14(
+                          color: MyColors.darkTextColor, isBold: true),
+                    ],
+                  ),
+                  5.height,
+                  Image.network(
+                    "https://cdn.pixabay.com/photo/2014/08/27/07/53/blog-428950_1280.jpg",
+                    height: 50,
+                    fit: BoxFit.fill,
+                    width: 120,
+                  ),
+                ],
+              ),
+            ).paddingOnly(left: 21, right: 21),
+            10.height,
+          ],
+        ),
+      ),
+    );
+  }
+}