From 09b2f8a23fe573f11835ae84349c4c3a21118a22 Mon Sep 17 00:00:00 2001 From: FaizHashmiCS22 Date: Wed, 2 Nov 2022 17:32:12 +0300 Subject: [PATCH] UI Fixes --- lib/ui/marathon/marathon_screen.dart | 7 +- lib/ui/marathon/widgets/countdown_timer.dart | 90 ++++++++++++++------ lib/ui/marathon/widgets/marathon_banner.dart | 69 +++++++++++++-- lib/ui/marathon/widgets/question_card.dart | 19 ++--- 4 files changed, 138 insertions(+), 47 deletions(-) diff --git a/lib/ui/marathon/marathon_screen.dart b/lib/ui/marathon/marathon_screen.dart index d548122..a02733f 100644 --- a/lib/ui/marathon/marathon_screen.dart +++ b/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 { 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 { ), 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 { selectedStepSize: 10, unselectedStepSize: 10, doneStepSize: 10, + selectedStepBorderSize: 0, + unselectedStepBorderSize: 0, selectedStepColorIn: MyColors.greenColor, selectedStepColorOut: MyColors.greenColor, unselectedStepColorIn: MyColors.lightGreyDeColor, diff --git a/lib/ui/marathon/widgets/countdown_timer.dart b/lib/ui/marathon/widgets/countdown_timer.dart index 557cfd3..f5eb92f 100644 --- a/lib/ui/marathon/widgets/countdown_timer.dart +++ b/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: [ Column( children: [ - 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: [ - 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: [ - 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: [ - 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: [ 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: [ 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: [ 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: [ 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, ), ], diff --git a/lib/ui/marathon/widgets/marathon_banner.dart b/lib/ui/marathon/widgets/marathon_banner.dart index be06e35..379df20 100644 --- a/lib/ui/marathon/widgets/marathon_banner.dart +++ b/lib/ui/marathon/widgets/marathon_banner.dart @@ -23,7 +23,8 @@ class MarathonBanner extends StatelessWidget { MarathonProvider provider = context.read(); 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, - width: MediaQuery.of(context).size.width - 40, + fit: BoxFit.fill, + 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: [ 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, - right: AppState().isArabic(context) ? 0 : 12, + left: AppState().isArabic(context) ? 12 : 3, + 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), diff --git a/lib/ui/marathon/widgets/question_card.dart b/lib/ui/marathon/widgets/question_card.dart index d5f6bce..a3fe720 100644 --- a/lib/ui/marathon/widgets/question_card.dart +++ b/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 { Widget build(BuildContext context) { return CupertinoPageScaffold( child: SizedBox( - height: 420, + height: 440, width: double.infinity, child: Consumer( builder: (BuildContext context, MarathonProvider provider, _) { @@ -200,8 +201,6 @@ class _AnswerContentState extends State { 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 { fontWeight: FontWeight.w600, fontSize: 16, ), - ), + ).paddingOnly(top: 17, bottom: 17), ), ), ), @@ -231,8 +230,6 @@ class _AnswerContentState extends State { 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 { fontWeight: FontWeight.w600, fontSize: 16, ), - ), + ).paddingOnly(top: 17, bottom: 17), ), ), ), @@ -262,8 +259,6 @@ class _AnswerContentState extends State { 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 { fontWeight: FontWeight.w600, fontSize: 16, ), - ), + ).paddingOnly(top: 17, bottom: 17), ), ), ), @@ -293,8 +288,6 @@ class _AnswerContentState extends State { 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 { fontWeight: FontWeight.w600, fontSize: 16, ), - ), + ).paddingOnly(top: 17, bottom: 17), ), ), ),