UI Fixes

lib/ui/marathon/marathon_screen.dart

@@ -16,6 +16,7 @@ import 'package:mohem_flutter_app/ui/marathon/widgets/custom_status_widget.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:sizer/sizer.dart';
 import 'package:steps_indicator/steps_indicator.dart';
 
 class MarathonScreen extends StatelessWidget {
@@ -109,7 +110,7 @@ class _MarathonProgressContainerState extends State<MarathonProgressContainer> {
               Container(
                 decoration: BoxDecoration(
                   color: MyColors.greenColor,
-                  borderRadius: BorderRadius.circular(12),
+                  borderRadius: BorderRadius.circular(5),
                 ),
                 padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 8),
                 child: "${widget.provider.currentQuestionNumber.toString()} / ${widget.provider.totalQuestions.toString()}  ${LocaleKeys.question.tr()}".toText12(color: MyColors.white),
@@ -120,7 +121,7 @@ class _MarathonProgressContainerState extends State<MarathonProgressContainer> {
           ),
           15.height,
           StepsIndicator(
-            lineLength: 21,
+            lineLength: SizerUtil.deviceType == DeviceType.tablet ? MediaQuery.of(context).size.width * 0.077 : MediaQuery.of(context).size.width * 0.054,
             nbSteps: 10,
             selectedStep: widget.provider.currentQuestionNumber,
             doneLineColor: MyColors.greenColor,
@@ -130,6 +131,8 @@ class _MarathonProgressContainerState extends State<MarathonProgressContainer> {
             selectedStepSize: 10,
             unselectedStepSize: 10,
             doneStepSize: 10,
+            selectedStepBorderSize: 0,
+            unselectedStepBorderSize: 0,
             selectedStepColorIn: MyColors.greenColor,
             selectedStepColorOut: MyColors.greenColor,
             unselectedStepColorIn: MyColors.lightGreyDeColor,

lib/ui/marathon/widgets/countdown_timer.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 
+import 'package:auto_size_text/auto_size_text.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_countdown_timer/current_remaining_time.dart';
@@ -21,7 +22,7 @@ class BuildCountdownTimer extends StatelessWidget {
   }) : super(key: key);
 
   final TextStyle styleTextHome = const TextStyle(
-    fontSize: 7,
+    // fontSize: 7,
     color: MyColors.greyACColor,
     fontStyle: FontStyle.italic,
     fontWeight: FontWeight.w600,
@@ -31,9 +32,8 @@ class BuildCountdownTimer extends StatelessWidget {
   final TextStyle styleDigitHome = const TextStyle(
     height: 23 / 27,
     color: MyColors.white,
-    fontSize: 24,
+    // fontSize: 24,
     fontStyle: FontStyle.italic,
-    fontFamily: "Poppins",
     letterSpacing: -1.44,
     fontWeight: FontWeight.bold,
   );
@@ -62,12 +62,16 @@ class BuildCountdownTimer extends StatelessWidget {
       children: <Widget>[
         Column(
           children: <Widget>[
-            Text(
+            AutoSizeText(
               "00",
+              maxFontSize: 24,
+              minFontSize: 20,
               style: screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
             ),
-            Text(
+            AutoSizeText(
               LocaleKeys.days.tr(),
+              minFontSize: 7,
+              maxFontSize: 8,
               style: screenFlag == 0 ? styleTextHome : styleTextMarathon,
             ),
           ],
@@ -75,12 +79,16 @@ class BuildCountdownTimer extends StatelessWidget {
         buildSeparator(),
         Column(
           children: <Widget>[
-            Text(
+            AutoSizeText(
               "00",
+              maxFontSize: 24,
+              minFontSize: 20,
               style: screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
             ),
-            Text(
+            AutoSizeText(
               LocaleKeys.hours.tr(),
+              minFontSize: 7,
+              maxFontSize: 8,
               style: screenFlag == 0 ? styleTextHome : styleTextMarathon,
             ),
           ],
@@ -88,12 +96,16 @@ class BuildCountdownTimer extends StatelessWidget {
         buildSeparator(),
         Column(
           children: <Widget>[
-            Text(
+            AutoSizeText(
               "00",
+              maxFontSize: 24,
+              minFontSize: 20,
               style: screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
             ),
-            Text(
+            AutoSizeText(
               LocaleKeys.minutes.tr(),
+              minFontSize: 7,
+              maxFontSize: 8,
               style: screenFlag == 0 ? styleTextHome : styleTextMarathon,
             ),
           ],
@@ -101,12 +113,16 @@ class BuildCountdownTimer extends StatelessWidget {
         buildSeparator(),
         Column(
           children: <Widget>[
-            Text(
+            AutoSizeText(
               "00",
+              maxFontSize: 24,
+              minFontSize: 20,
               style: screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
             ),
-            Text(
+            AutoSizeText(
               LocaleKeys.seconds.tr(),
+              minFontSize: 7,
+              maxFontSize: 8,
               style: screenFlag == 0 ? styleTextHome : styleTextMarathon,
             ),
           ],
@@ -116,8 +132,10 @@ class BuildCountdownTimer extends StatelessWidget {
   }
 
   Widget buildSeparator() {
-    return Text(
+    return AutoSizeText(
       "  :  ",
+      maxFontSize: 24,
+      minFontSize: 20,
       style: screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
     );
   }
@@ -140,16 +158,22 @@ class BuildCountdownTimer extends StatelessWidget {
         Column(
           children: <Widget>[
             time.days == null
-                ? Text(
+                ? AutoSizeText(
                     "00",
+                    maxFontSize: 24,
+                    minFontSize: 20,
                     style: screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
                   )
-                : Text(
+                : AutoSizeText(
                     time.days! < 10 ? "0${time.days.toString()}" : time.days.toString(),
+                    maxFontSize: 24,
+                    minFontSize: 20,
                     style: screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
                   ),
-            Text(
+            AutoSizeText(
               LocaleKeys.days.tr(),
+              minFontSize: 7,
+              maxFontSize: 8,
               style: screenFlag == 0 ? styleTextHome : styleTextMarathon,
             ),
           ],
@@ -158,16 +182,22 @@ class BuildCountdownTimer extends StatelessWidget {
         Column(
           children: <Widget>[
             time.hours == null
-                ? Text(
+                ? AutoSizeText(
                     "00",
+                    maxFontSize: 24,
+                    minFontSize: 20,
                     style: screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
                   )
-                : Text(
+                : AutoSizeText(
                     time.hours! < 10 ? "0${time.hours.toString()}" : time.hours.toString(),
+                    maxFontSize: 24,
+                    minFontSize: 20,
                     style: screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
                   ),
-            Text(
+            AutoSizeText(
               LocaleKeys.hours.tr(),
+              minFontSize: 7,
+              maxFontSize: 8,
               style: screenFlag == 0 ? styleTextHome : styleTextMarathon,
             ),
           ],
@@ -176,16 +206,22 @@ class BuildCountdownTimer extends StatelessWidget {
         Column(
           children: <Widget>[
             time.min == null
-                ? Text(
+                ? AutoSizeText(
                     "00",
+                    maxFontSize: 24,
+                    minFontSize: 20,
                     style: screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
                   )
-                : Text(
+                : AutoSizeText(
                     time.min! < 10 ? "0${time.min.toString()}" : time.min.toString(),
+                    maxFontSize: 24,
+                    minFontSize: 20,
                     style: screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
                   ),
-            Text(
+            AutoSizeText(
               LocaleKeys.minutes.tr(),
+              minFontSize: 7,
+              maxFontSize: 8,
               style: screenFlag == 0 ? styleTextHome : styleTextMarathon,
             ),
           ],
@@ -194,16 +230,22 @@ class BuildCountdownTimer extends StatelessWidget {
         Column(
           children: <Widget>[
             time.sec == null
-                ? Text(
+                ? AutoSizeText(
                     "00",
+                    maxFontSize: 24,
+                    minFontSize: 20,
                     style: screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
                   )
-                : Text(
+                : AutoSizeText(
                     time.sec! < 10 ? "0${time.sec.toString()}" : time.sec.toString(),
+                    maxFontSize: 24,
+                    minFontSize: 20,
                     style: screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
                   ),
-            Text(
+            AutoSizeText(
               LocaleKeys.seconds.tr(),
+              minFontSize: 7,
+              maxFontSize: 8,
               style: screenFlag == 0 ? styleTextHome : styleTextMarathon,
             ),
           ],

lib/ui/marathon/widgets/marathon_banner.dart

@@ -23,7 +23,8 @@ class MarathonBanner extends StatelessWidget {
     MarathonProvider provider = context.read<MarathonProvider>();
     return Container(
       decoration: MyDecorations.shadowDecoration,
-      height: 90,
+      height: MediaQuery.of(context).size.height * 0.11,
+      clipBehavior: Clip.antiAlias,
       child: Stack(
         children: [
           Transform(
@@ -33,8 +34,20 @@ class MarathonBanner extends StatelessWidget {
             ),
             child: SvgPicture.asset(
               "assets/images/marathon_banner_bg.svg",
-              fit: BoxFit.cover,
+              fit: BoxFit.fill,
-              width: MediaQuery.of(context).size.width - 40,
+              width: double.infinity,
+            ),
+          ),
+          Positioned(
+            left: -20,
+            top: -10,
+            child: Transform.rotate(
+              angle: 15,
+              child: Container(
+                width: 65,
+                height: 32,
+                color: MyColors.gradiantStartColor,
+              ),
             ),
           ),
           SizedBox(
@@ -55,7 +68,7 @@ class MarathonBanner extends StatelessWidget {
                     width: double.infinity,
                     height: double.infinity,
                     child: Row(
-                      mainAxisAlignment: MainAxisAlignment.end,
+                      mainAxisAlignment: MainAxisAlignment.start,
                       children: <Widget>[
                         Column(
                           mainAxisAlignment: MainAxisAlignment.center,
@@ -65,9 +78,10 @@ class MarathonBanner extends StatelessWidget {
                             AppState().isArabic(context) ? 0.height : 5.height,
                             AutoSizeText(
                               LocaleKeys.getReadyForContest.tr(),
+                              minFontSize: 08,
+                              maxFontSize: 11,
                               style: const TextStyle(
                                 fontStyle: FontStyle.italic,
-                                fontSize: 12,
                                 fontWeight: FontWeight.w600,
                                 color: MyColors.lightGreyEFColor,
                                 letterSpacing: -0.4,
@@ -91,16 +105,55 @@ class MarathonBanner extends StatelessWidget {
                             ),
                           ],
                         ).paddingOnly(
-                          left: AppState().isArabic(context) ? 12 : 0,
+                          left: AppState().isArabic(context) ? 12 : 3,
-                          right: AppState().isArabic(context) ? 0 : 12,
+                          right: AppState().isArabic(context) ? 3 : 12,
                         )
                       ],
-                    ).paddingOnly(right: 20),
+                    ),
                   ),
                 ),
               ],
             ),
           ),
+          Positioned(
+            top: 0,
+            left: 0,
+            child: SizedBox(
+              height: 20,
+              width: 35,
+              child: Transform.rotate(
+                angle: -math.pi / 4.5,
+                child: Text(
+                  LocaleKeys.brainMarathon.tr(),
+                  textAlign: TextAlign.center,
+                  maxLines: 2,
+                  style: const TextStyle(
+                    color: MyColors.kWhiteColor,
+                    fontWeight: FontWeight.bold,
+                    fontSize: 6,
+                    height: 1.2,
+                  ),
+                ),
+              ),
+            ),
+          ).paddingOnly(top: 3),
+          !AppState().isArabic(context)
+              ? Positioned(
+                  right: 0,
+                  bottom: 0,
+                  child: RotatedBox(
+                    quarterTurns: 4,
+                    child: SvgPicture.asset("assets/images/arrow_next.svg", color: Colors.white),
+                  ).paddingAll(15),
+                )
+              : Positioned(
+                  bottom: 0,
+                  left: 0,
+                  child: RotatedBox(
+                    quarterTurns: 2,
+                    child: SvgPicture.asset("assets/images/arrow_next.svg", color: Colors.white),
+                  ).paddingAll(15),
+                ),
         ],
       ).onPress(
         () => Navigator.pushNamed(context, AppRoutes.marathonIntroScreen),

lib/ui/marathon/widgets/question_card.dart

@@ -4,6 +4,7 @@ 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/extensions/widget_extensions.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';
@@ -48,7 +49,7 @@ class _QuestionCardState extends State<QuestionCard> {
   Widget build(BuildContext context) {
     return CupertinoPageScaffold(
       child: SizedBox(
-        height: 420,
+        height: 440,
         width: double.infinity,
         child: Consumer<MarathonProvider>(
           builder: (BuildContext context, MarathonProvider provider, _) {
@@ -200,8 +201,6 @@ class _AnswerContentState extends State<AnswerContent> {
               updateOption(0, true);
             },
             child: Container(
-              height: 60,
-              width: MediaQuery.of(context).size.width - 75,
               alignment: Alignment.centerLeft,
               decoration: getContainerColor(0),
               child: Center(
@@ -212,7 +211,7 @@ class _AnswerContentState extends State<AnswerContent> {
                     fontWeight: FontWeight.w600,
                     fontSize: 16,
                   ),
-                ),
+                ).paddingOnly(top: 17, bottom: 17),
               ),
             ),
           ),
@@ -231,8 +230,6 @@ class _AnswerContentState extends State<AnswerContent> {
               updateOption(1, true);
             },
             child: Container(
-              height: 60,
-              width: MediaQuery.of(context).size.width - 75,
               alignment: Alignment.centerLeft,
               decoration: getContainerColor(1),
               child: Center(
@@ -243,7 +240,7 @@ class _AnswerContentState extends State<AnswerContent> {
                     fontWeight: FontWeight.w600,
                     fontSize: 16,
                   ),
-                ),
+                ).paddingOnly(top: 17, bottom: 17),
               ),
             ),
           ),
@@ -262,8 +259,6 @@ class _AnswerContentState extends State<AnswerContent> {
               updateOption(2, true);
             },
             child: Container(
-              height: 60,
-              width: MediaQuery.of(context).size.width - 75,
               alignment: Alignment.centerLeft,
               decoration: getContainerColor(2),
               child: Center(
@@ -274,7 +269,7 @@ class _AnswerContentState extends State<AnswerContent> {
                     fontWeight: FontWeight.w600,
                     fontSize: 16,
                   ),
-                ),
+                ).paddingOnly(top: 17, bottom: 17),
               ),
             ),
           ),
@@ -293,8 +288,6 @@ class _AnswerContentState extends State<AnswerContent> {
               updateOption(3, true);
             },
             child: Container(
-              height: 60,
-              width: MediaQuery.of(context).size.width - 75,
               alignment: Alignment.centerLeft,
               decoration: getContainerColor(3),
               child: Center(
@@ -305,7 +298,7 @@ class _AnswerContentState extends State<AnswerContent> {
                     fontWeight: FontWeight.w600,
                     fontSize: 16,
                   ),
-                ),
+                ).paddingOnly(top: 17, bottom: 17),
               ),
             ),
           ),