From 14a3ca86954c5dcc40f03f38c5fb4b856c2ac769 Mon Sep 17 00:00:00 2001 From: Elham Rababah Date: Mon, 17 May 2021 17:22:50 +0300 Subject: [PATCH] fix login screen design --- lib/screens/auth/login_screen.dart | 339 ++++-------------- .../auth/verification_methods_screen.dart | 2 +- lib/util/helpers.dart | 2 +- .../text_fields/app-textfield-custom.dart | 3 + 4 files changed, 74 insertions(+), 272 deletions(-) diff --git a/lib/screens/auth/login_screen.dart b/lib/screens/auth/login_screen.dart index b8d5cca3..84517932 100644 --- a/lib/screens/auth/login_screen.dart +++ b/lib/screens/auth/login_screen.dart @@ -8,6 +8,7 @@ import 'package:doctor_app_flutter/util/translations_delegate_base.dart'; import 'package:doctor_app_flutter/widgets/shared/app_texts_widget.dart'; import 'package:doctor_app_flutter/widgets/shared/buttons/app_buttons_widget.dart'; import 'package:doctor_app_flutter/widgets/shared/loader/gif_loader_dialog_utils.dart'; +import 'package:doctor_app_flutter/widgets/shared/text_fields/app-textfield-custom.dart'; import 'package:doctor_app_flutter/widgets/shared/text_fields/app_text_form_field.dart'; import 'package:flutter/material.dart'; import 'package:hexcolor/hexcolor.dart'; @@ -23,10 +24,13 @@ class LoginScreen extends StatefulWidget { class _LoginScreenState extends State { String platformImei; + bool allowCallApi = true; //TODO change AppTextFormField to AppTextFormFieldCustom final loginFormKey = GlobalKey(); var projectIdController = TextEditingController(); + var userIdController = TextEditingController(); + var passwordController = TextEditingController(); List projectsList = []; FocusNode focusPass = FocusNode(); FocusNode focusProject = FocusNode(); @@ -86,8 +90,9 @@ class _LoginScreenState extends State { .of(context) .drSulaimanAlHabib, style: TextStyle( + color:Color(0xFF2B353E), fontWeight: FontWeight - .w800, + .bold, fontSize: SizeConfig .isMobile ? 24 @@ -107,9 +112,8 @@ class _LoginScreenState extends State { .realScreenWidth * 0.030, fontWeight: FontWeight - .w800, - color: HexColor( - '#B8382C')), + .w600, + color: Color(0xFFD02127)), ), ]), ], @@ -132,273 +136,69 @@ class _LoginScreenState extends State { Column( crossAxisAlignment: CrossAxisAlignment .start, children: [ - buildSizedBox(), - Padding( - child: AppText( - TranslationBase - .of(context) - .enterCredentials, - fontSize: 18, - fontWeight: FontWeight - .bold, - ), - padding: EdgeInsets.only( - top: 10, bottom: 10)), - Container( - decoration: BoxDecoration( - borderRadius: BorderRadius - .all( - Radius.circular( - 6.0)), - border: Border.all( - width: 1.0, - color: HexColor( - "#CCCCCC"), - ), - color: Colors.white), - child: Column( - crossAxisAlignment: CrossAxisAlignment - .start, - children: [ - Padding( - padding: EdgeInsets - .only( - left: 10, - top: 10), - child: AppText( - TranslationBase - .of(context) - .enterId, - fontWeight: FontWeight - .w800, - fontSize: 14, - )), - AppTextFormField( - labelText: '', - borderColor: Colors - .white, - textInputAction: TextInputAction - .next, - validator: (value) { - if (value != - null && value - .isEmpty) { - return TranslationBase - .of(context) - .pleaseEnterYourID; - } - return null; - }, - onSaved: (value) { - if (value != - null) setState(() { - authenticationViewModel.userInfo - .userID = - value - .trim(); - }); - }, - onChanged: (value) { - if (value != null) - setState(() { - authenticationViewModel.userInfo - .userID = - value - .trim(); - }); - }, - onFieldSubmitted: (_) { - focusPass - .nextFocus(); - }, - ) - ])), buildSizedBox(), - Container( - decoration: BoxDecoration( - borderRadius: BorderRadius - .all( - Radius.circular( - 6.0)), - border: Border.all( - width: 1.0, - color: HexColor( - "#CCCCCC"), - ), - color: Colors.white), - child: Column( - crossAxisAlignment: CrossAxisAlignment - .start, - children: [ - Padding( - padding: EdgeInsets - .only( - left: 10, - top: 10), - child: AppText( - TranslationBase - .of(context) - .enterPassword, - fontWeight: FontWeight - .w800, - fontSize: 14, - )), - AppTextFormField( - focusNode: focusPass, - obscureText: true, - borderColor: Colors - .white, - textInputAction: TextInputAction - .next, - validator: (value) { - if (value != - null && value - .isEmpty) { - return TranslationBase - .of(context) - .pleaseEnterPassword; - } - return null; - }, - onSaved: (value) { - if (value != - null) - setState(() { - authenticationViewModel.userInfo - .password = - value; - }); - }, - onChanged: (value){ - if (value != - null) - setState(() { - authenticationViewModel.userInfo - .password = - value; - }); - }, - onFieldSubmitted: (_) { - focusPass - .nextFocus(); - Helpers - .showCupertinoPicker( - context, - projectsList, - 'facilityName', - onSelectProject, - authenticationViewModel); - }, - onTap: () { - this.getProjects( - authenticationViewModel.userInfo - .userID); - }, - ) - ])), + AppTextFieldCustom( + hintText: TranslationBase.of(context).enterId, + hasBorder: true, + controller: userIdController, + onChanged: (value){ + if (value != null) + setState(() { + authenticationViewModel.userInfo + .userID = + value + .trim(); + }); + }, + ), + buildSizedBox(), + AppTextFieldCustom( + hintText: TranslationBase.of(context).enterPassword, + hasBorder: true, + isSecure: true, + controller: passwordController, + onChanged: (value){ + if (value != null) + setState(() { + authenticationViewModel.userInfo + .password = + value + .trim(); + }); + if(allowCallApi) { + this.getProjects( + authenticationViewModel.userInfo + .userID); + setState(() { + allowCallApi = false; + }); + } + }, + onClick: (){ + + }, + ), buildSizedBox(), - projectsList.length > 0 - ? Container( - decoration: BoxDecoration( - borderRadius: BorderRadius - .all( - Radius.circular( - 6.0)), - border: Border.all( - width: 1.0, - color: HexColor( - "#CCCCCC"), - ), - color: Colors.white), - child: Column( - crossAxisAlignment: CrossAxisAlignment - .start, - children: [ - Padding( - padding: EdgeInsets - .only( - left: 10, - top: 10), - child: AppText( - TranslationBase - .of(context) - .selectYourProject, - fontWeight: FontWeight - .w600, - )), - AppTextFormField( - focusNode: focusProject, - controller: projectIdController, - borderColor: Colors - .white, - suffixIcon: Icons - .arrow_drop_down, - onTap: () { - Helpers - .showCupertinoPicker( - context, - projectsList, - 'facilityName', - onSelectProject, - authenticationViewModel); - }, - validator: (value) { - if (value != - null && - value - .isEmpty) { - return TranslationBase - .of( - context) - .pleaseEnterYourProject; - } - return null; - }) - ])) - : Container( - decoration: BoxDecoration( - borderRadius: BorderRadius - .all( - Radius.circular( - 6.0)), - border: Border.all( - width: 1.0, - color: HexColor( - "#CCCCCC"), - ), - color: Colors.white), - child: Column( - crossAxisAlignment: CrossAxisAlignment - .start, - children: [ - Padding( - padding: EdgeInsets - .only( - left: 10, - top: 10), - child: AppText( - TranslationBase - .of(context) - .selectYourProject, - fontWeight: FontWeight - .w800, - fontSize: 14, - )), - AppTextFormField( - readOnly: true, - borderColor: Colors - .white, - prefix: IconButton( - icon: Icon(Icons - .arrow_drop_down), - iconSize: 30, - padding: EdgeInsets - .only( - bottom: 30), - ), - ) - ])), + AppTextFieldCustom( + hintText: TranslationBase.of(context).selectYourProject, + hasBorder: true, + controller: projectIdController, + isTextFieldHasSuffix: true, + enabled: false, + onClick: (){ + Helpers + .showCupertinoPicker( + context, + projectsList, + 'facilityName', + onSelectProject, + authenticationViewModel); + }, + + + ), + buildSizedBox() ]), ), ], @@ -424,13 +224,12 @@ class _LoginScreenState extends State { .of(context) .login, color: Color(0xFFD02127), + fontWeight: FontWeight.w700, disabled: authenticationViewModel.userInfo .userID == null || authenticationViewModel.userInfo .password == null, - fontWeight: FontWeight - .bold, onPressed: () { login(context); }, diff --git a/lib/screens/auth/verification_methods_screen.dart b/lib/screens/auth/verification_methods_screen.dart index 35d8366d..4edb0f44 100644 --- a/lib/screens/auth/verification_methods_screen.dart +++ b/lib/screens/auth/verification_methods_screen.dart @@ -396,7 +396,7 @@ class _VerificationMethodsScreenState extends State { title: TranslationBase .of(context) .useAnotherAccount, - color: Color(0xFFD02127), + color: Color(0xFFD02127),fontWeight: FontWeight.w700, onPressed: () { authenticationViewModel.deleteUser(); diff --git a/lib/util/helpers.dart b/lib/util/helpers.dart index 0f8f5183..53f81ef2 100644 --- a/lib/util/helpers.dart +++ b/lib/util/helpers.dart @@ -55,7 +55,7 @@ class Helpers { ), onPressed: () { Navigator.pop(context); - onSelectFun(cupertinoPickerIndex, model); + onSelectFun(cupertinoPickerIndex); }, ) ], diff --git a/lib/widgets/shared/text_fields/app-textfield-custom.dart b/lib/widgets/shared/text_fields/app-textfield-custom.dart index ded2568d..7e13f411 100644 --- a/lib/widgets/shared/text_fields/app-textfield-custom.dart +++ b/lib/widgets/shared/text_fields/app-textfield-custom.dart @@ -26,6 +26,7 @@ class AppTextFieldCustom extends StatefulWidget { final Function(String) onChanged; final String validationError; final bool isPrscription; + final bool isSecure; AppTextFieldCustom({ this.height = 0, @@ -45,6 +46,7 @@ class AppTextFieldCustom extends StatefulWidget { this.onChanged, this.validationError, this.isPrscription = false, + this.isSecure = false, }); @override @@ -132,6 +134,7 @@ class _AppTextFieldCustomState extends State { widget.onChanged(value); } }, + obscureText: widget.isSecure ), ) : AppText(