Added Answer Selected Status

lib/classes/decorations_helper.dart

@@ -14,9 +14,12 @@ class MyDecorations {
     ],
   );
 
-  static Decoration answerContainerDecoration = BoxDecoration(
-    borderRadius: BorderRadius.circular(10),
-    color: MyColors.greyF7Color,
-    border: Border.all(width: 1, color: MyColors.lightGreyEFColor),
-  );
+  static Decoration getContainersDecoration(Color color) {
+    Decoration answerContainerDecoration = BoxDecoration(
+      borderRadius: BorderRadius.circular(10),
+      color: color,
+      border: Border.all(width: 1, color: MyColors.lightGreyEFColor),
+    );
+    return answerContainerDecoration;
+  }
 }

lib/ui/marathon/marathon_intro_screen.dart

@@ -11,7 +11,7 @@ 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/countdown_timer.dart';
-import 'package:mohem_flutter_app/ui/marathon/widgets/marathon_header.dart';
+import 'package:mohem_flutter_app/widgets/app_bar_widget.dart';
 import 'package:mohem_flutter_app/widgets/button/default_button.dart';
 import 'package:provider/provider.dart';
 
@@ -24,18 +24,20 @@ class MarathonIntroScreen extends StatelessWidget {
   Widget build(BuildContext context) {
     MarathonProvider provider = context.watch<MarathonProvider>();
     return Scaffold(
+      appBar: AppBarWidget(context, title: LocaleKeys.brainMarathon.tr()),
       body: Stack(
         children: <Widget>[
           SingleChildScrollView(
             child: Column(
               children: <Widget>[
-                const MarathonHeader(),
                 MarathonDetailsCard(provider: provider).paddingAll(15),
                 MarathonTimerCard(
                   provider: provider,
                   timeToMarathon: dummyEndTime,
                 ).paddingOnly(left: 15, right: 15, bottom: 15),
-                const SizedBox(height: 100,),
+                const SizedBox(
+                  height: 100,
+                ),
               ],
             ),
           ),
@@ -52,8 +54,7 @@ class MarathonIntroScreen extends StatelessWidget {
 class MarathonDetailsCard extends StatelessWidget {
   final MarathonProvider provider;
 
-  const MarathonDetailsCard({Key? key, required this.provider})
-      : super(key: key);
+  const MarathonDetailsCard({Key? key, required this.provider}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -68,17 +69,12 @@ class MarathonDetailsCard extends StatelessWidget {
           Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: <Widget>[
-              LocaleKeys.contestTopicAbout
-                  .tr()
-                  .toText16(color: MyColors.grey77Color),
-              "Saudi Arabia"
-                  .toText20(color: MyColors.textMixColor, isBold: true),
+              LocaleKeys.contestTopicAbout.tr().toText16(color: MyColors.grey77Color),
+              "Saudi Arabia".toText20(color: MyColors.textMixColor, isBold: true),
               Row(
                 children: <Widget>[
                   Flexible(
-                    child:
-                        "Nam suscipit turpis in pharetra euismsdef. Duis rutrum at nulla id aliquam"
-                            .toText14(color: MyColors.grey77Color),
+                    child: "Nam suscipit turpis in pharetra euismsdef. Duis rutrum at nulla id aliquam".toText14(color: MyColors.grey77Color),
                   )
                 ],
               ),
@@ -86,31 +82,25 @@ class MarathonDetailsCard extends StatelessWidget {
                 5.height,
                 Row(
                   children: <Widget>[
-                    LocaleKeys.prize
-                        .tr()
-                        .toText16(color: MyColors.grey77Color, isBold: true),
-                    " LED 55\" Android TV"
-                        .toText16(color: MyColors.greenColor, isBold: true),
+                    LocaleKeys.prize.tr().toText16(color: MyColors.grey77Color, isBold: true),
+                    " LED 55\" Android TV".toText16(color: MyColors.greenColor, isBold: true),
                   ],
                 ),
                 Row(
                   children: <Widget>[
-                    LocaleKeys.sponsoredBy
-                        .tr()
-                        .toText16(color: MyColors.grey77Color),
-                    " Extra"
-                        .toText16(color: MyColors.darkTextColor, isBold: true),
+                    LocaleKeys.sponsoredBy.tr().toText16(color: MyColors.grey77Color),
+                    " Extra".toText16(color: MyColors.darkTextColor, isBold: true),
                   ],
                 ),
                 10.height,
                 Row(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: <Widget>[
-                    Image.network(
-                      "https://cdn.pixabay.com/photo/2014/08/27/07/53/blog-428950_1280.jpg",
-                      height: 50,
+                    Image.asset(
+                      "assets/images/logos/main_mohemm_logo.png",
+                      height: 40,
                       fit: BoxFit.fill,
-                      width: 120,
+                      width: 150,
                     )
                   ],
                 ),
@@ -144,8 +134,7 @@ class MarathonTimerCard extends StatelessWidget {
           Row(
             children: <Widget>[
               LocaleKeys.gameDate.tr().toText16(color: MyColors.grey77Color),
-              " 10 Oct, 2022"
-                  .toText16(color: MyColors.darkTextColor, isBold: true),
+              " 10 Oct, 2022".toText16(color: MyColors.darkTextColor, isBold: true),
             ],
           ),
           Row(
@@ -156,7 +145,7 @@ class MarathonTimerCard extends StatelessWidget {
           ),
           Lottie.asset(
             MyLottieConsts.hourGlassLottie,
-            height: 140,
+            height: 200,
           ),
           BuildCountdownTimer(
             timeToMarathon: timeToMarathon,

lib/ui/marathon/marathon_provider.dart

@@ -2,7 +2,9 @@ import 'dart:async';
 
 import 'package:appinio_swiper/appinio_swiper.dart';
 import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
 import 'package:mohem_flutter_app/config/routes.dart';
+import 'package:mohem_flutter_app/ui/marathon/widgets/question_card.dart';
 
 class MarathonProvider extends ChangeNotifier {
   final AppinioSwiperController swiperController = AppinioSwiperController();
@@ -41,11 +43,18 @@ class MarathonProvider extends ChangeNotifier {
     notifyListeners();
   }
 
+  void resetAll() {
+    isSelectedOptions[0] = false;
+    isSelectedOptions[1] = false;
+    isSelectedOptions[2] = false;
+    isSelectedOptions[3] = false;
+  }
+
   Timer timerU = Timer.periodic(const Duration(seconds: 1), (Timer timer) {});
-  int start = 5;
+  int start = 8;
 
   void startTimer(BuildContext context) {
-    start = 5;
+    start = 8;
     const Duration oneSec = Duration(seconds: 1);
     timerU = Timer.periodic(
       oneSec,
@@ -66,9 +75,10 @@ class MarathonProvider extends ChangeNotifier {
 
             return;
           }
-          swipeCardLeft();
+          resetAll();
           timer.cancel();
           cancelTimer();
+          swipeCardLeft();
         } else {
           start--;
         }

lib/ui/marathon/marathon_screen.dart

@@ -13,8 +13,8 @@ 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:mohem_flutter_app/widgets/app_bar_widget.dart';
 import 'package:provider/provider.dart';
 import 'package:steps_indicator/steps_indicator.dart';
 
@@ -25,13 +25,12 @@ class MarathonScreen extends StatelessWidget {
   Widget build(BuildContext context) {
     MarathonProvider provider = context.watch<MarathonProvider>();
     return Scaffold(
+      appBar: AppBarWidget(context, title: LocaleKeys.brainMarathon.tr()),
       body: SingleChildScrollView(
         child: Column(
           children: <Widget>[
-            const MarathonHeader(),
-            20.height, 
-            MarathonProgressContainer(provider: provider)
-                .paddingOnly(left: 21, right: 21),
+            20.height,
+            MarathonProgressContainer(provider: provider).paddingOnly(left: 21, right: 21),
             if (provider.isMarathonCompleted)
               InkWell(
                 onTap: () {
@@ -58,17 +57,12 @@ class MarathonScreen extends StatelessWidget {
                   subTitle: Text(
                     LocaleKeys.allQuestionsCorrect.tr(),
                     textAlign: TextAlign.center,
-                    style: const TextStyle(
-                        fontSize: 18,
-                        fontWeight: FontWeight.w600,
-                        color: MyColors.darkTextColor,
-                        letterSpacing: -1.08),
+                    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),
+              QuestionCard(provider: provider).paddingOnly(top: 12, left: 21, right: 21),
           ],
         ),
       ),
@@ -79,12 +73,10 @@ class MarathonScreen extends StatelessWidget {
 class MarathonProgressContainer extends StatefulWidget {
   final MarathonProvider provider;
 
-  const MarathonProgressContainer({Key? key, required this.provider})
-      : super(key: key);
+  const MarathonProgressContainer({Key? key, required this.provider}) : super(key: key);
 
   @override
-  State<MarathonProgressContainer> createState() =>
-      _MarathonProgressContainerState();
+  State<MarathonProgressContainer> createState() => _MarathonProgressContainerState();
 }
 
 class _MarathonProgressContainerState extends State<MarathonProgressContainer> {
@@ -120,13 +112,10 @@ class _MarathonProgressContainerState extends State<MarathonProgressContainer> {
                   borderRadius: BorderRadius.circular(12),
                 ),
                 padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 8),
-                child:
-                    "${widget.provider.currentQuestionNumber.toString()} / ${widget.provider.totalQuestions.toString()}  ${LocaleKeys.question.tr()}"
-                        .toText12(color: MyColors.white),
+                child: "${widget.provider.currentQuestionNumber.toString()} / ${widget.provider.totalQuestions.toString()}  ${LocaleKeys.question.tr()}".toText12(color: MyColors.white),
               ),
               "23 ${LocaleKeys.marathoners.tr()}".toText14(),
-              "00:${widget.provider.start < 10 ? "0${widget.provider.start}" : widget.provider.start}"
-                  .toText18(),
+              "00:${widget.provider.start < 10 ? "0${widget.provider.start}" : widget.provider.start}".toText18(),
             ],
           ),
           15.height,
@@ -152,8 +141,7 @@ class _MarathonProgressContainerState extends State<MarathonProgressContainer> {
           12.height,
           Row(
             children: <Widget>[
-              "${widget.provider.currentQuestionNumber * 10}% ${LocaleKeys.completed.tr()}"
-                  .toText14(isBold: true),
+              "${widget.provider.currentQuestionNumber * 10}% ${LocaleKeys.completed.tr()}".toText14(isBold: true),
             ],
           ),
         ],

lib/ui/marathon/marathon_winner_selection.dart

@@ -13,7 +13,7 @@ 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/widgets/app_bar_widget.dart';
 import 'package:provider/provider.dart';
 
 class MarathonWinnerSelection extends StatelessWidget {
@@ -23,13 +23,12 @@ class MarathonWinnerSelection extends StatelessWidget {
   Widget build(BuildContext context) {
     MarathonProvider provider = context.read<MarathonProvider>();
     return Scaffold(
+      appBar: AppBarWidget(context, title: LocaleKeys.brainMarathon.tr()),
       body: SingleChildScrollView(
         child: Column(
           children: [
-            const MarathonHeader(),
             20.height,
-            QualifiersContainer(provider: provider)
-                .paddingOnly(left: 21, right: 21),
+            QualifiersContainer(provider: provider).paddingOnly(left: 21, right: 21),
             20.height,
             InkWell(
               onTap: () {
@@ -53,8 +52,7 @@ class MarathonWinnerSelection extends StatelessWidget {
                   child: Row(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: <Widget>[
-                      "Muhammad Shrouff"
-                          .toText18(isBold: true, color: MyColors.white),
+                      "Muhammad Shrouff".toText18(isBold: true, color: MyColors.white),
                       "837436".toText18(isBold: true, color: MyColors.white),
                     ],
                   ),
@@ -96,8 +94,7 @@ class MarathonWinnerSelection extends StatelessWidget {
 class QualifiersContainer extends StatefulWidget {
   final MarathonProvider provider;
 
-  const QualifiersContainer({Key? key, required this.provider})
-      : super(key: key);
+  const QualifiersContainer({Key? key, required this.provider}) : super(key: key);
 
   @override
   State<QualifiersContainer> createState() => _QualifiersContainerState();
@@ -134,11 +131,8 @@ class _QualifiersContainerState extends State<QualifiersContainer> {
           Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: <Widget>[
-              LocaleKeys.winnerSelection
-                  .tr()
-                  .toText18(isBold: true, color: MyColors.grey3AColor),
-              "00:${widget.provider.start < 10 ? "0${widget.provider.start}" : widget.provider.start}"
-                  .toText18(isBold: true, color: MyColors.redColor),
+              LocaleKeys.winnerSelection.tr().toText18(isBold: true, color: MyColors.grey3AColor),
+              "00:${widget.provider.start < 10 ? "0${widget.provider.start}" : widget.provider.start}".toText18(isBold: true, color: MyColors.redColor),
             ],
           ),
           10.height,

lib/ui/marathon/widgets/question_card.dart

@@ -8,6 +8,13 @@ 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';
 
+List<bool> isSelectedOptions = [
+  false,
+  false,
+  false,
+  false,
+];
+
 class QuestionCard extends StatefulWidget {
   final MarathonProvider provider;
 
@@ -18,7 +25,7 @@ class QuestionCard extends StatefulWidget {
 }
 
 class _QuestionCardState extends State<QuestionCard> {
-  final List<QuestionContent> questionCards = <QuestionContent>[];
+  final List<CardContent> questionCards = <CardContent>[];
 
   @override
   void initState() {
@@ -29,7 +36,7 @@ class _QuestionCardState extends State<QuestionCard> {
   void _loadCards() {
     for (DummyQuestionModel question in questions) {
       questionCards.add(
-        QuestionContent(
+        CardContent(
           question: question,
           provider: widget.provider,
         ),
@@ -64,11 +71,11 @@ class _QuestionCardState extends State<QuestionCard> {
   }
 }
 
-class QuestionContent extends StatelessWidget {
+class CardContent extends StatelessWidget {
   final DummyQuestionModel question;
   final MarathonProvider provider;
 
-  const QuestionContent({
+  const CardContent({
     Key? key,
     required this.question,
     required this.provider,
@@ -131,12 +138,38 @@ class QuestionContent extends StatelessWidget {
   }
 }
 
-class AnswerContent extends StatelessWidget {
+class AnswerContent extends StatefulWidget {
   final DummyQuestionModel question;
   final MarathonProvider provider;
 
   const AnswerContent({Key? key, required this.question, required this.provider}) : super(key: key);
 
+  @override
+  State<AnswerContent> createState() => _AnswerContentState();
+}
+
+class _AnswerContentState extends State<AnswerContent> {
+  void updateOption(int index, bool value) {
+    isSelectedOptions[0] = false;
+    isSelectedOptions[1] = false;
+    isSelectedOptions[2] = false;
+    isSelectedOptions[3] = false;
+    isSelectedOptions[index] = value;
+    setState(() {});
+  }
+
+  Decoration getContainerColor(int index) {
+    if (!isSelectedOptions[index]) {
+      return MyDecorations.getContainersDecoration(MyColors.greyF7Color);
+    }
+    if (isSelectedOptions[index] && context.watch<MarathonProvider>().start > 0) {
+      return MyDecorations.getContainersDecoration(MyColors.yellowColorII);
+    }
+    return MyDecorations.getContainersDecoration(
+      isSelectedOptions[index] ? MyColors.greenColor : MyColors.greyF7Color,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     return Container(
@@ -155,29 +188,27 @@ class AnswerContent extends StatelessWidget {
         children: <Widget>[
           InkWell(
             onTap: () {
-              if (provider.currentQuestionNumber == 9) {
-                provider.cancelTimer();
-                provider.resetValues();
+              if (widget.provider.currentQuestionNumber == 9) {
+                widget.provider.cancelTimer();
+                widget.provider.resetValues();
                 Navigator.pushReplacementNamed(
                   context,
                   AppRoutes.marathonWinnerSelection,
                 );
                 return;
               }
-              provider.cancelTimer();
-              provider.startTimer(context);
-              provider.swipeCardLeft();
+              updateOption(0, true);
             },
             child: Container(
               height: 60,
               width: MediaQuery.of(context).size.width - 75,
               alignment: Alignment.centerLeft,
-              decoration: MyDecorations.answerContainerDecoration,
+              decoration: getContainerColor(0),
               child: Center(
                 child: Text(
-                  question.opt1!,
-                  style: const TextStyle(
-                    color: MyColors.darkTextColor,
+                  widget.question.opt1!,
+                  style: TextStyle(
+                    color: isSelectedOptions[0] ? MyColors.white : MyColors.darkTextColor,
                     fontWeight: FontWeight.w600,
                     fontSize: 16,
                   ),
@@ -188,29 +219,27 @@ class AnswerContent extends StatelessWidget {
           const SizedBox(height: 15),
           InkWell(
             onTap: () {
-              if (provider.currentQuestionNumber == 9) {
-                provider.cancelTimer();
-                provider.resetValues();
+              if (widget.provider.currentQuestionNumber == 9) {
+                widget.provider.cancelTimer();
+                widget.provider.resetValues();
                 Navigator.pushReplacementNamed(
                   context,
                   AppRoutes.marathonWinnerSelection,
                 );
                 return;
               }
-              provider.cancelTimer();
-              provider.startTimer(context);
-              provider.swipeCardLeft();
+              updateOption(1, true);
             },
             child: Container(
               height: 60,
               width: MediaQuery.of(context).size.width - 75,
               alignment: Alignment.centerLeft,
-              decoration: MyDecorations.answerContainerDecoration,
+              decoration: getContainerColor(1),
               child: Center(
                 child: Text(
-                  question.opt2!,
-                  style: const TextStyle(
-                    color: MyColors.darkTextColor,
+                  widget.question.opt2!,
+                  style: TextStyle(
+                    color: isSelectedOptions[1] ? MyColors.white : MyColors.darkTextColor,
                     fontWeight: FontWeight.w600,
                     fontSize: 16,
                   ),
@@ -221,29 +250,27 @@ class AnswerContent extends StatelessWidget {
           const SizedBox(height: 15),
           InkWell(
             onTap: () {
-              if (provider.currentQuestionNumber == 9) {
-                provider.cancelTimer();
-                provider.resetValues();
+              if (widget.provider.currentQuestionNumber == 9) {
+                widget.provider.cancelTimer();
+                widget.provider.resetValues();
                 Navigator.pushReplacementNamed(
                   context,
                   AppRoutes.marathonWinnerSelection,
                 );
                 return;
               }
-              provider.cancelTimer();
-              provider.startTimer(context);
-              provider.swipeCardLeft();
+              updateOption(2, true);
             },
             child: Container(
               height: 60,
               width: MediaQuery.of(context).size.width - 75,
               alignment: Alignment.centerLeft,
-              decoration: MyDecorations.answerContainerDecoration,
+              decoration: getContainerColor(2),
               child: Center(
                 child: Text(
-                  question.opt3!,
-                  style: const TextStyle(
-                    color: MyColors.darkTextColor,
+                  widget.question.opt3!,
+                  style: TextStyle(
+                    color: isSelectedOptions[2] ? MyColors.white : MyColors.darkTextColor,
                     fontWeight: FontWeight.w600,
                     fontSize: 16,
                   ),
@@ -254,29 +281,27 @@ class AnswerContent extends StatelessWidget {
           const SizedBox(height: 15),
           InkWell(
             onTap: () {
-              if (provider.currentQuestionNumber == 9) {
-                provider.cancelTimer();
-                provider.resetValues();
+              if (widget.provider.currentQuestionNumber == 9) {
+                widget.provider.cancelTimer();
+                widget.provider.resetValues();
                 Navigator.pushReplacementNamed(
                   context,
                   AppRoutes.marathonWinnerSelection,
                 );
                 return;
               }
-              provider.cancelTimer();
-              provider.startTimer(context);
-              provider.swipeCardLeft();
+              updateOption(3, true);
             },
             child: Container(
               height: 60,
               width: MediaQuery.of(context).size.width - 75,
               alignment: Alignment.centerLeft,
-              decoration: MyDecorations.answerContainerDecoration,
+              decoration: getContainerColor(3),
               child: Center(
                 child: Text(
-                  question.opt3!,
-                  style: const TextStyle(
-                    color: MyColors.darkTextColor,
+                  widget.question.opt3!,
+                  style: TextStyle(
+                    color: isSelectedOptions[3] ? MyColors.white : MyColors.darkTextColor,
                     fontWeight: FontWeight.w600,
                     fontSize: 16,
                   ),

lib/ui/marathon/winner_screen.dart

@@ -9,7 +9,7 @@ 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';
+import 'package:mohem_flutter_app/widgets/app_bar_widget.dart';
 
 class WinnerScreen extends StatelessWidget {
   const WinnerScreen({Key? key}) : super(key: key);
@@ -18,10 +18,10 @@ class WinnerScreen extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: MyColors.backgroundColor,
+      appBar: AppBarWidget(context, title: LocaleKeys.brainMarathon.tr()),
       body: SingleChildScrollView(
         child: Column(
           children: <Widget>[
-            const MarathonHeader(),
             60.height,
             Container(
               width: double.infinity,
@@ -75,12 +75,12 @@ class WinnerScreen extends StatelessWidget {
                     ],
                   ),
                   5.height,
-                  Image.network(
-                    "https://cdn.pixabay.com/photo/2014/08/27/07/53/blog-428950_1280.jpg",
-                    height: 50,
+                  Image.asset(
+                    "assets/images/logos/main_mohemm_logo.png",
+                    height: 40,
                     fit: BoxFit.fill,
-                    width: 120,
-                  ),
+                    width: 150,
+                  )
                 ],
               ),
             ).paddingOnly(left: 21, right: 21),