diff --git a/lib/dialogs/otp_dialog.dart b/lib/dialogs/otp_dialog.dart index 4355884..dbdb433 100644 --- a/lib/dialogs/otp_dialog.dart +++ b/lib/dialogs/otp_dialog.dart @@ -215,7 +215,7 @@ class OtpDialog { void startTimer(setState) { remainingTime--; if (stopTimer) return; - setState(() { + setState(() { displayTime = getSecondsAsDigitalClock(remainingTime); }); diff --git a/lib/extensions/string_extensions.dart b/lib/extensions/string_extensions.dart index a32f5f3..6d26ca1 100644 --- a/lib/extensions/string_extensions.dart +++ b/lib/extensions/string_extensions.dart @@ -2,6 +2,7 @@ import 'package:auto_size_text/auto_size_text.dart'; import 'package:flutter/cupertino.dart'; import 'package:intl/intl.dart'; import 'package:hmg_nurses/classes/colors.dart'; +import 'package:sizer/sizer.dart'; extension CapExtension on String { String get toCamelCase => "${this[0].toUpperCase()}${this.substring(1)}"; @@ -19,13 +20,13 @@ extension EmailValidator on String { Widget toText10({Color? color, bool isBold = false, int? maxlines, FontStyle? fontStyle}) => Text( this, maxLines: maxlines, - style: TextStyle(fontSize: 10, fontStyle: fontStyle ?? FontStyle.normal, fontWeight: isBold ? FontWeight.bold : FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -0.4), + style: TextStyle(fontSize: 10.sp, fontStyle: fontStyle ?? FontStyle.normal, fontWeight: isBold ? FontWeight.bold : FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -0.4), ); Widget toText11({Color? color, FontWeight? weight, bool isUnderLine = false, bool isBold = false}) => Text( this, style: TextStyle( - fontSize: 11, + fontSize: 11.sp, fontWeight: weight ?? (isBold ? FontWeight.bold : FontWeight.w600), color: color ?? MyColors.darkTextColor, letterSpacing: -0.33, @@ -38,7 +39,7 @@ extension EmailValidator on String { textAlign: isCenter ? TextAlign.center : null, maxLines: (maxLine > 0) ? maxLine : null, style: TextStyle( - fontSize: 12, + fontSize: 12.sp, fontWeight: isBold ? FontWeight.bold : FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -0.72, @@ -52,7 +53,7 @@ extension EmailValidator on String { maxLines: (maxLine > 0) ? maxLine : null, minFontSize: 8, style: TextStyle( - fontSize: 12, + fontSize: 12.sp, fontWeight: isBold ? FontWeight.bold : FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -0.72, @@ -86,7 +87,7 @@ extension EmailValidator on String { Widget toText13({Color? color, bool isUnderLine = false}) => Text( this, - style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -0.52, decoration: isUnderLine ? TextDecoration.underline : null), + style: TextStyle(fontSize: 13.sp, fontWeight: FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -0.52, decoration: isUnderLine ? TextDecoration.underline : null), ); Widget toText14({Color? color, bool isUnderLine = false, bool isBold = false, FontWeight? weight, int? maxlines}) => Text( @@ -94,7 +95,7 @@ extension EmailValidator on String { maxLines: maxlines, style: TextStyle( color: color ?? MyColors.darkTextColor, - fontSize: 14, + fontSize: 14.sp, letterSpacing: -0.48, fontWeight: weight ?? (isBold ? FontWeight.bold : FontWeight.w600), decoration: isUnderLine ? TextDecoration.underline : null), @@ -105,7 +106,7 @@ extension EmailValidator on String { maxLines: maxlines, style: TextStyle( color: color ?? MyColors.darkTextColor, - fontSize: 16, + fontSize: 16.sp, letterSpacing: -0.64, fontWeight: isBold ? FontWeight.bold : FontWeight.w600, decoration: isUnderLine ? TextDecoration.underline : null, @@ -114,48 +115,48 @@ extension EmailValidator on String { Widget toText17({Color? color, bool isBold = false}) => Text( this, - style: TextStyle(color: color ?? MyColors.darkTextColor, fontSize: 17, letterSpacing: -0.68, fontWeight: isBold ? FontWeight.bold : FontWeight.w600), + style: TextStyle(color: color ?? MyColors.darkTextColor, fontSize: 17.sp, letterSpacing: -0.68, fontWeight: isBold ? FontWeight.bold : FontWeight.w600), ); Widget toText18({Color? color, bool isBold = false}) => Text( this, - style: TextStyle(fontSize: 18, fontWeight: isBold ? FontWeight.bold : FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -1.08), + style: TextStyle(fontSize: 18.sp, fontWeight: isBold ? FontWeight.bold : FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -1.08), ); Widget toText19({Color? color, bool isBold = false}) => Text( this, - style: TextStyle(fontSize: 19, fontWeight: isBold ? FontWeight.bold : FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -1.14), + style: TextStyle(fontSize: 19.sp, fontWeight: isBold ? FontWeight.bold : FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -1.14), ); Widget toText20({Color? color, bool isBold = false}) => Text( this, - style: TextStyle(fontSize: 20, fontWeight: isBold ? FontWeight.bold : FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -0.4), + style: TextStyle(fontSize: 20.sp, fontWeight: isBold ? FontWeight.bold : FontWeight.w600, color: color ?? MyColors.darkTextColor, letterSpacing: -0.4), ); Widget toText21({Color? color, bool isBold = false, FontWeight? weight, int? maxlines}) => Text( this, maxLines: maxlines, - style: TextStyle(color: color ?? MyColors.grey3AColor, fontSize: 21, letterSpacing: -0.31, fontWeight: weight ?? (isBold ? FontWeight.bold : FontWeight.w600)), + style: TextStyle(color: color ?? MyColors.grey3AColor, fontSize: 21.sp, letterSpacing: -0.31, fontWeight: weight ?? (isBold ? FontWeight.bold : FontWeight.w600)), ); Widget toText22({Color? color, bool isBold = false}) => Text( this, - style: TextStyle(height: 1, color: color ?? MyColors.darkTextColor, fontSize: 22, letterSpacing: -1.44, fontWeight: isBold ? FontWeight.bold : FontWeight.w600), + style: TextStyle(height: 1, color: color ?? MyColors.darkTextColor, fontSize: 22.sp, letterSpacing: -1.44, fontWeight: isBold ? FontWeight.bold : FontWeight.w600), ); Widget toText24({Color? color, bool isBold = false}) => Text( this, - style: TextStyle(height: 23 / 24, color: color ?? MyColors.darkTextColor, fontSize: 24, letterSpacing: -1.44, fontWeight: isBold ? FontWeight.bold : FontWeight.w600), + style: TextStyle(height: 23 / 24, color: color ?? MyColors.darkTextColor, fontSize: 24.sp, letterSpacing: -1.44, fontWeight: isBold ? FontWeight.bold : FontWeight.w600), ); Widget toText32({Color? color, bool isBold = false}) => Text( this, - style: TextStyle(height: 32 / 32, color: color ?? MyColors.darkTextColor, fontSize: 32, letterSpacing: -1.92, fontWeight: isBold ? FontWeight.bold : FontWeight.w600), + style: TextStyle(height: 32 / 32, color: color ?? MyColors.darkTextColor, fontSize: 32.sp, letterSpacing: -1.92, fontWeight: isBold ? FontWeight.bold : FontWeight.w600), ); Widget toText44({Color? color, bool isBold = false}) => Text( this, - style: TextStyle(height: 32 / 32, color: color ?? MyColors.darkTextColor, fontSize: 44, letterSpacing: -2.64, fontWeight: isBold ? FontWeight.bold : FontWeight.w600), + style: TextStyle(height: 32 / 32, color: color ?? MyColors.darkTextColor, fontSize: 44.sp, letterSpacing: -2.64, fontWeight: isBold ? FontWeight.bold : FontWeight.w600), ); Widget toSectionHeading({String upperHeading = "", String lowerHeading = ""}) { diff --git a/lib/extensions/widget_extensions.dart b/lib/extensions/widget_extensions.dart index 965dbaa..b801be5 100644 --- a/lib/extensions/widget_extensions.dart +++ b/lib/extensions/widget_extensions.dart @@ -4,6 +4,7 @@ import 'package:hmg_nurses/classes/colors.dart'; import 'package:hmg_nurses/extensions/int_extensions.dart'; import 'package:hmg_nurses/extensions/string_extensions.dart'; import 'package:shimmer/shimmer.dart'; +import 'package:sizer/sizer.dart'; extension WidgetExtensions on Widget { Widget onPress(VoidCallback onTap) => InkWell(onTap: onTap, child: this); @@ -16,6 +17,8 @@ extension WidgetExtensions on Widget { Widget paddingAll(double _value) => Padding(padding: EdgeInsets.all(_value), child: this); + Widget paddingSymmetrical(double horizontal, double vertical) => Padding(padding: EdgeInsets.symmetric(horizontal: horizontal, vertical: vertical), child: this); + Widget paddingOnly({double left = 0.0, double right = 0.0, double top = 0.0, double bottom = 0.0}) => Padding(padding: EdgeInsets.only(left: left, right: right, top: top, bottom: bottom), child: this); @@ -105,3 +108,49 @@ extension WidgetExtensions on Widget { ); } } + +//Height Spacers in percentages +Widget heightSpacer02per() => SizedBox(height: 0.2.h); + +Widget heightSpacer04per() => SizedBox(height: 0.4.h); + +Widget heightSpacer06per() => SizedBox(height: 0.6.h); + +Widget heightSpacer08per() => SizedBox(height: 0.8.h); + +Widget heightSpacer1per() => SizedBox(height: 1.h); + +Widget heightSpacer2per() => SizedBox(height: 2.h); + +Widget heightSpacer3per() => SizedBox(height: 3.h); + +Widget heightSpacer4per() => SizedBox(height: 4.h); + +Widget heightSpacer5per() => SizedBox(height: 5.h); + +Widget heightSpacer8per() => SizedBox(height: 8.h); + +Widget heightSpacer10per() => SizedBox(height: 10.h); + +Widget heightSpacer15per() => SizedBox(height: 15.h); + +Widget heightSpacer20per() => SizedBox(height: 20.h); + +//Width Spacers in percentages +Widget widthSpacer02perc() => SizedBox(height: 0.2.w); + +Widget widthSpacer04perc() => SizedBox(height: 0.4.w); + +Widget widthSpacer06perc() => SizedBox(height: 0.6.w); + +Widget widthSpacer08per() => SizedBox(height: 0.8.w); + +Widget widthSpacer1per() => SizedBox(height: 1.w); + +Widget widthSpacer2per() => SizedBox(height: 2.w); + +Widget widthSpacer3per() => SizedBox(height: 3.w); + +Widget widthSpacer4per() => SizedBox(height: 4.w); + +Widget widthSpacer5per() => SizedBox(height: 5.w); diff --git a/lib/ui/login/login_method_page.dart b/lib/ui/login/login_method_page.dart index 5909550..224674e 100644 --- a/lib/ui/login/login_method_page.dart +++ b/lib/ui/login/login_method_page.dart @@ -1,11 +1,8 @@ import 'package:easy_localization/easy_localization.dart'; -import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; -import 'package:flutter/services.dart'; import 'package:hexcolor/hexcolor.dart'; import 'package:hmg_nurses/classes/colors.dart'; import 'package:hmg_nurses/classes/enums.dart'; -import 'package:hmg_nurses/classes/size_config.dart'; import 'package:hmg_nurses/extensions/string_extensions.dart'; import 'package:hmg_nurses/extensions/util_extensions.dart'; import 'package:hmg_nurses/extensions/widget_extensions.dart'; @@ -55,7 +52,7 @@ class LoginMethodsPageState extends State { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - SizedBox(height: 1.h), + heightSpacer1per(), if (loginViewModel.isFromLogin) InkWell( onTap: () { @@ -65,7 +62,7 @@ class LoginMethodsPageState extends State { child: const Icon(Icons.arrow_back_ios, color: MyColors.darkTextColor)), Column( children: [ - SizedBox(height: 1.h), + heightSpacer1per(), isMoreOption != null && isMoreOption == false ? Column( @@ -73,11 +70,10 @@ class LoginMethodsPageState extends State { crossAxisAlignment: CrossAxisAlignment.start, children: [ LocaleKeys.welcomeBack.tr().toText12(), - SizedBox(height: 1.h), - "Faiz Hashmi".toText24(isBold: true), - SizedBox(height: 3.h), - LocaleKeys.wouldYouLikeToLoginWithCurrentUsername.tr().toText18(), - SizedBox(height: 3.h), + "Dr Amal Ahmed".toText20(isBold: true), + heightSpacer3per(), + LocaleKeys.wouldYouLikeToLoginWithCurrentUsername.tr().toText14(), + heightSpacer3per(), Container( padding: const EdgeInsets.all(12), decoration: BoxDecoration( @@ -93,39 +89,36 @@ class LoginMethodsPageState extends State { mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ - Text( - LocaleKeys.lastLoginDetails.tr(), - overflow: TextOverflow.ellipsis, - style: TextStyle( - fontFamily: 'Poppins', - fontSize: SizeConfig.getTextMultiplierBasedOnWidth() * 4.8, - color: Color(0xFF2E303A), - fontWeight: FontWeight.w600, - letterSpacing: -0.4), - ), - Container( - width: MediaQuery.of(context).size.width * 0.55, - child: RichText( - text: TextSpan( - text: "${LocaleKeys.verificationType.tr()} ", - style: TextStyle( - color: const Color(0xFF575757), - fontSize: SizeConfig.getTextMultiplierBasedOnWidth() * 3.5, - fontFamily: 'Poppins', - fontWeight: FontWeight.w600, - letterSpacing: -0.4), - children: [ - TextSpan( - text: loginViewModel.getType(1), - style: TextStyle( - color: MyColors.darkTextColor, - fontSize: SizeConfig.getTextMultiplierBasedOnWidth() * 3.5, - fontFamily: 'Poppins', - fontWeight: FontWeight.w600, - letterSpacing: -0.48), - ) - ]), + LocaleKeys.lastLoginDetails.tr().toText13(), + SizedBox( + width: 55.w, + child: Row( + children: [ + "${LocaleKeys.verificationType.tr()} : ".toText11(), + "${loginViewModel.getType(1)}".toText11(isBold: true), + ], ), + // child: RichText( + // text: TextSpan( + // text: "${LocaleKeys.verificationType.tr()} ", + // style: TextStyle( + // color: const Color(0xFF575757), + // fontSize: SizeConfig.getTextMultiplierBasedOnWidth() * 3.5, + // fontFamily: 'Poppins', + // fontWeight: FontWeight.w600, + // letterSpacing: -0.4), + // children: [ + // TextSpan( + // text: loginViewModel.getType(1), + // style: TextStyle( + // color: MyColors.darkTextColor, + // fontSize: SizeConfig.getTextMultiplierBasedOnWidth() * 3.5, + // fontFamily: 'Poppins', + // fontWeight: FontWeight.w600, + // letterSpacing: -0.48), + // ) + // ]), + // ), ), ], ), @@ -133,27 +126,9 @@ class LoginMethodsPageState extends State { mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.end, children: [ - Text( - "12 NOV, 2022", - overflow: TextOverflow.ellipsis, - style: TextStyle( - fontFamily: 'Poppins', - fontSize: SizeConfig.getTextMultiplierBasedOnWidth() * 4.2, - color: Color(0xFF2E303A), - fontWeight: FontWeight.bold, - letterSpacing: -0.4), - ), - - Text( - "09:56 AM", - overflow: TextOverflow.ellipsis, - style: TextStyle( - fontFamily: 'Poppins', - fontSize: SizeConfig.getTextMultiplierBasedOnWidth() * 3.5, - color: Color(0xFF2E303A), - fontWeight: FontWeight.w600, - letterSpacing: -0.4), - ), + "12 NOV, 2022".toText11(isBold: true), + heightSpacer06per(), + "09:56 AM".toText10() // AppText( // loginViewModel.user.editedOn != null // ? AppDateUtils.getDayMonthYearDateFormatted(AppDateUtils.convertStringToDate(loginViewModel.user.editedOn), isMonthShort: true) @@ -183,25 +158,13 @@ class LoginMethodsPageState extends State { ], ), ), - SizedBox(height: SizeConfig.heightMultiplier! * 3), - Row( - children: [ - //todo add translation - LocaleKeys.pleaseVerify.tr().toText18().paddingOnly(left: 8), - ], - ), - SizedBox( - height: SizeConfig.heightMultiplier! * 2, - ), + heightSpacer3per(), + LocaleKeys.pleaseVerify.tr().toText14().paddingOnly(left: 1.w), + heightSpacer2per(), ], ) : Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.start, children: [ - onlySMSBox == true - ? Container( - margin: const EdgeInsets.only(bottom: 20, top: 30), - child: LocaleKeys.pleaseVerify.tr().toText16(), - ) - : LocaleKeys.pleaseVerify.tr().toText16(), + LocaleKeys.pleaseVerifyForBio.tr().toText14().paddingAll(10), ]), isMoreOption != null && isMoreOption == false ? Column(mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -299,7 +262,7 @@ class LoginMethodsPageState extends State { padding: EdgeInsets.symmetric(horizontal: 4.w), child: DefaultButton(LocaleKeys.useAnotherAccount.tr(), () {}, colors: const [MyColors.redColor, MyColors.redColor]), ), - SizedBox(height: 3.h) + heightSpacer3per(), ], ), ), diff --git a/lib/ui/login/login_page.dart b/lib/ui/login/login_page.dart index 007201a..18e5c06 100644 --- a/lib/ui/login/login_page.dart +++ b/lib/ui/login/login_page.dart @@ -2,6 +2,8 @@ import 'package:easy_localization/easy_localization.dart'; import 'package:flutter/material.dart'; import 'package:hmg_nurses/classes/colors.dart'; import 'package:hmg_nurses/config/routes.dart'; +import 'package:hmg_nurses/extensions/string_extensions.dart'; +import 'package:hmg_nurses/extensions/widget_extensions.dart'; import 'package:hmg_nurses/generated/locale_keys.g.dart'; import 'package:hmg_nurses/widgets/button/default_button.dart'; import 'package:hmg_nurses/widgets/cupertino_picker.dart'; @@ -20,60 +22,59 @@ class _LoginPageState extends State { var projectIdController = TextEditingController(); var userIdController = TextEditingController(); var passwordController = TextEditingController(); - - SizedBox buildSpacer20h() => SizedBox(height: 3.h); + FocusNode projectIdFocusNode = FocusNode(); + FocusNode userIdFocusNode = FocusNode(); + FocusNode passwordIdFocusNode = FocusNode(); @override Widget build(BuildContext context) { return Scaffold( - body: SingleChildScrollView( - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SizedBox(height: 10.h), - Padding( - padding: EdgeInsets.only(left: 8.w), - child: Column( + body: SafeArea( + child: SingleChildScrollView( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Text( - LocaleKeys.welcomeTo.tr(), - style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.w600, fontFamily: 'Poppins'), - ), - Text( - LocaleKeys.drSulaiman.tr(), - style: TextStyle(color: MyColors.blackColor, fontWeight: FontWeight.bold, fontSize: 24.sp, fontFamily: 'Poppins'), - ), - Text( - "Nurses App", - style: TextStyle(fontSize: 16.sp, fontWeight: FontWeight.w600, color: MyColors.redColor), - ), + LocaleKeys.welcomeTo.tr().toText14(color: MyColors.blackColor), + LocaleKeys.drSulaiman.tr().toText20(isBold: true, color: MyColors.blackColor), + "Nurses App".toText16(color: MyColors.redColor), ], ), - ), - SizedBox(height: 4.h), - Form( - key: loginFormKey, - child: Padding( - padding: EdgeInsets.symmetric(horizontal: 8.w), + heightSpacer4per(), + Form( + key: loginFormKey, child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ - buildSpacer20h(), - CustomTextField(LocaleKeys.userID.tr(), userIdController, isEnableBorder: true, ), - buildSpacer20h(), - CustomTextField(LocaleKeys.password.tr(), passwordController, isTextIsPassword: true), - buildSpacer20h(), + heightSpacer3per(), + CustomTextField( + LocaleKeys.userID.tr(), + userIdController, + isEnableBorder: true, + focusNode: userIdFocusNode, + isInputTypeNum: true, + ), + heightSpacer3per(), + CustomTextField( + LocaleKeys.password.tr(), + passwordController, + isTextIsPassword: true, + focusNode: passwordIdFocusNode, + ), + heightSpacer3per(), CustomTextField( LocaleKeys.branch.tr(), projectIdController, hasSelection: true, isEnable: false, + focusNode: projectIdFocusNode, onClick: () => CustomCupertinoPicker.showCupertinoPicker(context, [], () {}), ), - buildSpacer20h() + heightSpacer15per(), ]), - ), - ) - ], + ) + ], + ).paddingSymmetrical(8.w, 4.h), ), ), bottomSheet: Container( @@ -82,7 +83,7 @@ class _LoginPageState extends State { width: double.infinity, child: Center( child: FractionallySizedBox( - widthFactor: 0.9, + widthFactor: 0.89, child: Column( mainAxisAlignment: MainAxisAlignment.end, children: [ @@ -92,7 +93,7 @@ class _LoginPageState extends State { Navigator.pushNamed(context, AppRoutes.loginMethodsPage); }, colors: const [MyColors.redColor, MyColors.redColor]), ), - SizedBox(height: 3.h) + heightSpacer3per(), ], ), ), diff --git a/lib/widgets/input_widget.dart b/lib/widgets/input_widget.dart index 8795a2d..1a38198 100644 --- a/lib/widgets/input_widget.dart +++ b/lib/widgets/input_widget.dart @@ -20,6 +20,7 @@ class CustomTextField extends StatefulWidget { final double horizontalPadding; final Function(String)? onChange; final Function? onClick; + final FocusNode? focusNode; const CustomTextField( this.labelText, @@ -36,6 +37,7 @@ class CustomTextField extends StatefulWidget { this.onClick, this.isInputTypeNum = false, this.isBackgroundEnable = false, + this.focusNode, this.verticalPadding = 15, this.horizontalPadding = 16, }) : super(key: key); @@ -73,7 +75,11 @@ class CustomTextFieldState extends State { ? () { widget.onClick!(); } - : null, + : () { + if (widget.focusNode != null) { + widget.focusNode?.requestFocus(); + } + }, child: Row( children: [ Expanded( @@ -92,6 +98,7 @@ class CustomTextFieldState extends State { ), ), TextField( + focusNode: widget.focusNode, autofocus: false, enabled: widget.isEnable, scrollPadding: EdgeInsets.zero,