diff --git a/lib/classes/decorations_helper.dart b/lib/classes/decorations_helper.dart index 67139b8..77ea4a4 100644 --- a/lib/classes/decorations_helper.dart +++ b/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; + } } diff --git a/lib/ui/marathon/marathon_intro_screen.dart b/lib/ui/marathon/marathon_intro_screen.dart index 9ccf5b0..f836229 100644 --- a/lib/ui/marathon/marathon_intro_screen.dart +++ b/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(); return Scaffold( + appBar: AppBarWidget(context, title: LocaleKeys.brainMarathon.tr()), body: Stack( children: [ SingleChildScrollView( child: Column( children: [ - 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: [ - 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: [ 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: [ - 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: [ - 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: [ - 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: [ 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, diff --git a/lib/ui/marathon/marathon_provider.dart b/lib/ui/marathon/marathon_provider.dart index 39958c2..5a03b74 100644 --- a/lib/ui/marathon/marathon_provider.dart +++ b/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--; } diff --git a/lib/ui/marathon/marathon_screen.dart b/lib/ui/marathon/marathon_screen.dart index 445d72a..93e4913 100644 --- a/lib/ui/marathon/marathon_screen.dart +++ b/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(); return Scaffold( + appBar: AppBarWidget(context, title: LocaleKeys.brainMarathon.tr()), body: SingleChildScrollView( child: Column( children: [ - 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 createState() => - _MarathonProgressContainerState(); + State createState() => _MarathonProgressContainerState(); } class _MarathonProgressContainerState extends State { @@ -120,13 +112,10 @@ class _MarathonProgressContainerState extends State { 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 { 12.height, Row( children: [ - "${widget.provider.currentQuestionNumber * 10}% ${LocaleKeys.completed.tr()}" - .toText14(isBold: true), + "${widget.provider.currentQuestionNumber * 10}% ${LocaleKeys.completed.tr()}".toText14(isBold: true), ], ), ], diff --git a/lib/ui/marathon/marathon_winner_selection.dart b/lib/ui/marathon/marathon_winner_selection.dart index c69f54f..8462ab4 100644 --- a/lib/ui/marathon/marathon_winner_selection.dart +++ b/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(); 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: [ - "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 createState() => _QualifiersContainerState(); @@ -134,11 +131,8 @@ class _QualifiersContainerState extends State { Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - 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, diff --git a/lib/ui/marathon/widgets/question_card.dart b/lib/ui/marathon/widgets/question_card.dart index 45fa6cc..d5f6bce 100644 --- a/lib/ui/marathon/widgets/question_card.dart +++ b/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 isSelectedOptions = [ + false, + false, + false, + false, +]; + class QuestionCard extends StatefulWidget { final MarathonProvider provider; @@ -18,7 +25,7 @@ class QuestionCard extends StatefulWidget { } class _QuestionCardState extends State { - final List questionCards = []; + final List questionCards = []; @override void initState() { @@ -29,7 +36,7 @@ class _QuestionCardState extends State { void _loadCards() { for (DummyQuestionModel question in questions) { questionCards.add( - QuestionContent( + CardContent( question: question, provider: widget.provider, ), @@ -64,11 +71,11 @@ class _QuestionCardState extends State { } } -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 createState() => _AnswerContentState(); +} + +class _AnswerContentState extends State { + 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().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: [ 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, ), diff --git a/lib/ui/marathon/winner_screen.dart b/lib/ui/marathon/winner_screen.dart index 2e9b16b..8d6d171 100644 --- a/lib/ui/marathon/winner_screen.dart +++ b/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: [ - 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),