Added new Intimmation Screens with Lottie

assets/langs/ar-SA.json

@@ -487,7 +487,11 @@
   "marathoners": "الماراثون",
   "prize": "جائزة:",
   "winnerSelection": "اختيار الفائز",
-  "qualifiers": "تصفيات"
+  "qualifiers": "تصفيات",
-
+  "getReadyForContest": "استعد للمسابقة القادمة:",
+  "winnerSelectedRandomly": "سيتم اختيار الفائز عشوائياً من بين التصفيات.",
+  "fingersCrossed": "تشابك الاصابع!!!",
+  "congrats": "مبروك !!!",
+  "allQuestionsCorrect": "لقد أجبت على جميع الأسئلة بشكل صحيح."
 
 }

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"
 }

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";
 }

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

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};
 }

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';
 
 }

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),
     ];
 

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,),
               ],
             ),
           ),

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();
+          swipeCardLeft();
-          currentQuestionNumber = currentQuestionNumber + 1;
           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();
   }
 }

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,6 +32,41 @@ class MarathonScreen extends StatelessWidget {
             20.height,
             MarathonProgressContainer(provider: provider)
                 .paddingOnly(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),
           ],

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,7 +31,11 @@ class MarathonWinnerSelection extends StatelessWidget {
             QualifiersContainer(provider: provider)
                 .paddingOnly(left: 21, right: 21),
             20.height,
-            Container(
+            InkWell(
+              onTap: () {
+                Navigator.pushNamed(context, AppRoutes.marathonWinnerScreen);
+              },
+              child: Container(
                 height: 50,
                 decoration: BoxDecoration(
                   color: MyColors.greenColor,
@@ -45,13 +53,39 @@ class MarathonWinnerSelection extends StatelessWidget {
                   child: Row(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: <Widget>[
-                    "Muhammad Shrouf"
+                      "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),
           ],
         ),
       ),

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

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,11 +24,17 @@ class MarathonBanner extends StatelessWidget {
       decoration: MyDecorations.shadowDecoration,
       child: Stack(
         children: [
-          SvgPicture.asset(
+          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,
             children: <Widget>[
@@ -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(
+                    child: Text(
-                      "Get Ready for the coming contest:",
+                      LocaleKeys.getReadyForContest.tr(),
-                      style: TextStyle(
+                      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),

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

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,9 +157,20 @@ class AnswerContent extends StatelessWidget {
         children: <Widget>[
           InkWell(
             onTap: () {
+              if (provider.currentQuestionNumber == 9) {
                 provider.cancelTimer();
-              provider.swiperController.swipeLeft();
+                provider.resetValues();
+                Navigator.pushReplacementNamed(
+                  context,
+                  AppRoutes.marathonWinnerSelection,
+                );
+                return;
+              }
+              provider.cancelTimer();
+              provider.startTimer(context);
+              provider.swipeCardLeft();
             },
+            child: Flexible(
               child: Container(
                 height: 60,
                 width: MediaQuery.of(context).size.width - 75,
@@ -176,11 +188,22 @@ class AnswerContent extends StatelessWidget {
                 ),
               ),
             ),
+          ),
           const SizedBox(height: 15),
           InkWell(
             onTap: () {
+              if (provider.currentQuestionNumber == 9) {
                 provider.cancelTimer();
-              provider.swiperController.swipeLeft();
+                provider.resetValues();
+                Navigator.pushReplacementNamed(
+                  context,
+                  AppRoutes.marathonWinnerSelection,
+                );
+                return;
+              }
+              provider.cancelTimer();
+              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.swiperController.swipeLeft();
+                provider.resetValues();
+                Navigator.pushReplacementNamed(
+                  context,
+                  AppRoutes.marathonWinnerSelection,
+                );
+                return;
+              }
+              provider.cancelTimer();
+              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.swiperController.swipeLeft();
+                provider.resetValues();
+                Navigator.pushReplacementNamed(
+                  context,
+                  AppRoutes.marathonWinnerSelection,
+                );
+                return;
+              }
+              provider.cancelTimer();
+              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,
-//                   ),
-//                 ),
-//               ),
-//             ),
-//           ),
-//         ],
-//       ),

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