From bd7e68390081e80d5629f12c014f83e69226694c Mon Sep 17 00:00:00 2001 From: hussam al-habibeh Date: Mon, 6 Dec 2021 12:36:15 +0200 Subject: [PATCH 1/2] textfiled design --- lib/config/size_config.dart | 8 +- lib/screens/auth/login_screen.dart | 244 ++++++++---------- .../text_fields/app-textfield-custom.dart | 7 +- 3 files changed, 116 insertions(+), 143 deletions(-) diff --git a/lib/config/size_config.dart b/lib/config/size_config.dart index abb3ddd6..21859d3b 100644 --- a/lib/config/size_config.dart +++ b/lib/config/size_config.dart @@ -12,9 +12,8 @@ class SizeConfig { static double textMultiplier; static double imageSizeMultiplier; static double heightMultiplier; - static double widthMultiplier; - static bool isPortrait = true; + static double widthMultiplier; static bool isMobilePortrait = false; static bool isMobile = false; static bool isHeightShort = false; @@ -61,7 +60,7 @@ class SizeConfig { } _blockWidth = screenWidth / 100; _blockHeight = screenHeight / 100; - + textMultiplier = _blockHeight; imageSizeMultiplier = _blockWidth; heightMultiplier = _blockHeight; @@ -75,8 +74,6 @@ class SizeConfig { print('widthMultiplier $widthMultiplier'); print('isPortrait $isPortrait'); print('isMobilePortrait $isMobilePortrait'); - - } static getTextMultiplierBasedOnWidth({double width}) { @@ -102,5 +99,4 @@ class SizeConfig { } return heightMultiplier; } - } diff --git a/lib/screens/auth/login_screen.dart b/lib/screens/auth/login_screen.dart index 9563b29c..f562077b 100644 --- a/lib/screens/auth/login_screen.dart +++ b/lib/screens/auth/login_screen.dart @@ -16,7 +16,6 @@ import 'package:provider/provider.dart'; import '../../widgets/shared/app_scaffold_widget.dart'; - class LoginScreen extends StatefulWidget { @override _LoginScreenState createState() => _LoginScreenState(); @@ -55,151 +54,127 @@ class _LoginScreenState extends State { children: [ //TODO Use App Text rather than text Container( - child: Column( - crossAxisAlignment: CrossAxisAlignment - .start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, children: [ - Column( - crossAxisAlignment: CrossAxisAlignment - .start, - children: [ - SizedBox( - height: 30, - ), - ], + SizedBox( + height: 30, ), - Column( - crossAxisAlignment: CrossAxisAlignment - .start, children: [ + ], + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ SizedBox( height: 10, ), Text( - TranslationBase - .of(context) - .welcomeTo, + TranslationBase.of(context).welcomeTo, style: TextStyle( fontSize: 16, - fontWeight: FontWeight - .w600, + fontWeight: FontWeight.w600, fontFamily: 'Poppins'), ), Text( - TranslationBase - .of(context) + TranslationBase.of(context) .drSulaimanAlHabib, style: TextStyle( - color:Color(0xFF2B353E), - fontWeight: FontWeight - .bold, - fontSize: SizeConfig - .isMobile + color: Color(0xFF2B353E), + fontWeight: FontWeight.bold, + fontSize: SizeConfig.isMobile ? 24 - : SizeConfig - .realScreenWidth * - 0.029, + : SizeConfig.realScreenWidth * + 0.029, fontFamily: 'Poppins'), ), - Text( "Doctor App", style: TextStyle( - fontSize: - SizeConfig.isMobile + fontSize: SizeConfig.isMobile ? 16 - : SizeConfig - .realScreenWidth * - 0.030, - fontWeight: FontWeight - .w600, + : SizeConfig.realScreenWidth * + 0.030, + fontWeight: FontWeight.w600, color: Color(0xFFD02127)), ), ]), - ], - )), + ], + )), SizedBox( height: 40, ), Form( key: loginFormKey, child: Column( - mainAxisAlignment: MainAxisAlignment - .spaceBetween, + mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Container( - width: SizeConfig - .realScreenWidth * 0.90, - height: SizeConfig - .realScreenHeight * 0.65, - child: - Column( - crossAxisAlignment: CrossAxisAlignment - .start, children: [ - - buildSizedBox(), - 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(), - AppTextFieldCustom( - hintText: TranslationBase.of(context).selectYourProject, - hasBorder: true, - controller: projectIdController, - isTextFieldHasSuffix: true, - enabled: false, - onClick: (){ - Helpers - .showCupertinoPicker( - context, - projectsList, - 'facilityName', - onSelectProject, - authenticationViewModel); - }, - - - ), - buildSizedBox() - ]), + width: SizeConfig.realScreenWidth * 0.90, + height: SizeConfig.realScreenHeight * 0.65, + child: Column( + crossAxisAlignment: + CrossAxisAlignment.start, + children: [ + buildSizedBox(), + 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(), + AppTextFieldCustom( + hintText: TranslationBase.of(context) + .selectYourProject, + hasBorder: true, + controller: projectIdController, + isTextFieldHasSuffix: true, + enabled: false, + onClick: () { + Helpers.showCupertinoPicker( + context, + projectsList, + 'facilityName', + onSelectProject, + authenticationViewModel); + }, + ), + buildSizedBox() + ]), ), ], ), @@ -210,7 +185,6 @@ class _LoginScreenState extends State { ]), ), bottomSheet: Container( - height: 90, width: double.infinity, child: Center( @@ -220,26 +194,23 @@ class _LoginScreenState extends State { mainAxisAlignment: MainAxisAlignment.end, children: [ AppButton( - title: TranslationBase - .of(context) - .login, + title: TranslationBase.of(context).login, color: Color(0xFFD02127), fontWeight: FontWeight.w700, - disabled: authenticationViewModel.userInfo - .userID == null || - authenticationViewModel.userInfo - .password == - null, + disabled: authenticationViewModel.userInfo.userID == null || + authenticationViewModel.userInfo.password == null, onPressed: () { login(context); }, ), - - SizedBox(height: 25,) + SizedBox( + height: 25, + ) ], ), ), - ),), + ), + ), ); } @@ -249,7 +220,9 @@ class _LoginScreenState extends State { ); } - login(context,) async { + login( + context, + ) async { if (loginFormKey.currentState.validate()) { loginFormKey.currentState.save(); GifLoaderDialogUtils.showMyDialog(context); @@ -259,7 +232,7 @@ class _LoginScreenState extends State { Helpers.showErrorToast(authenticationViewModel.error); } else { GifLoaderDialogUtils.hideDialog(context); - authenticationViewModel.setUnverified(true,isFromLogin: true); + authenticationViewModel.setUnverified(true, isFromLogin: true); // Navigator.of(context).pushReplacement( // MaterialPageRoute( // builder: (BuildContext context) => @@ -275,22 +248,25 @@ class _LoginScreenState extends State { onSelectProject(index) { setState(() { - authenticationViewModel.userInfo.projectID = projectsList[index].facilityId; + authenticationViewModel.userInfo.projectID = + projectsList[index].facilityId; projectIdController.text = projectsList[index].facilityName; }); primaryFocus.unfocus(); } - String memberID =""; - getProjects(memberID)async { + + String memberID = ""; + getProjects(memberID) async { if (memberID != null && memberID != '') { - if (this.memberID !=memberID) { + if (this.memberID != memberID) { this.memberID = memberID; await authenticationViewModel.getHospitalsList(memberID); - if(authenticationViewModel.state == ViewState.Idle) { + if (authenticationViewModel.state == ViewState.Idle) { projectsList = authenticationViewModel.hospitals; setState(() { - authenticationViewModel.userInfo.projectID = projectsList[0].facilityId; + authenticationViewModel.userInfo.projectID = + projectsList[0].facilityId; projectIdController.text = projectsList[0].facilityName; }); } diff --git a/lib/widgets/shared/text_fields/app-textfield-custom.dart b/lib/widgets/shared/text_fields/app-textfield-custom.dart index 086375bb..98207888 100644 --- a/lib/widgets/shared/text_fields/app-textfield-custom.dart +++ b/lib/widgets/shared/text_fields/app-textfield-custom.dart @@ -130,10 +130,11 @@ class _AppTextFieldCustomState extends State { // marginTop: widget.hasHintmargin ? 0 : 30, color: Color(0xFF2E303A), fontSize: widget.isPrscription == false - ? SizeConfig.getHeightMultiplier() * - (SizeConfig.isWidthLarge ? 1.1 : 1.3) + ? 11.0 + // SizeConfig.getHeightMultiplier() * + // (SizeConfig.isWidthLarge ? 1.1 : 1.3) : 0, - fontWeight: FontWeight.w700, + fontWeight: FontWeight.w500, ), widget.dropDownText == null ? Container( From 3bfee08b9d182804e3f1b89f4863f6111b65c18f Mon Sep 17 00:00:00 2001 From: hussam al-habibeh Date: Mon, 6 Dec 2021 16:50:59 +0200 Subject: [PATCH 2/2] textfiled and app button design change --- lib/main.dart | 5 +++-- lib/screens/auth/login_screen.dart | 2 +- .../prescription_in_patinets_widget.dart | 2 +- .../shared/buttons/app_buttons_widget.dart | 22 +++++++++++++------ .../text_fields/app-textfield-custom.dart | 19 +++++++++++----- .../shared/text_fields/text_fields_utils.dart | 17 +++++++------- 6 files changed, 42 insertions(+), 25 deletions(-) diff --git a/lib/main.dart b/lib/main.dart index 450c046f..37f3d3d0 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -36,7 +36,8 @@ class MyApp extends StatelessWidget { SizeConfig().init(constraints, orientation); return MultiProvider( providers: [ - ChangeNotifierProvider(create: (context) => AuthenticationViewModel()), + ChangeNotifierProvider( + create: (context) => AuthenticationViewModel()), ChangeNotifierProvider( create: (context) => ProjectViewModel(), ), @@ -67,7 +68,7 @@ class MyApp extends StatelessWidget { theme: ThemeData( primarySwatch: Colors.grey, primaryColor: Colors.grey, - buttonColor: HexColor('#B8382C'), + buttonColor: HexColor('#D02127'), fontFamily: 'Poppins', dividerColor: Colors.grey[350], backgroundColor: Color.fromRGBO(255, 255, 255, 1), diff --git a/lib/screens/auth/login_screen.dart b/lib/screens/auth/login_screen.dart index f562077b..083c2ab3 100644 --- a/lib/screens/auth/login_screen.dart +++ b/lib/screens/auth/login_screen.dart @@ -196,7 +196,7 @@ class _LoginScreenState extends State { AppButton( title: TranslationBase.of(context).login, color: Color(0xFFD02127), - fontWeight: FontWeight.w700, + fontWeight: FontWeight.w600, disabled: authenticationViewModel.userInfo.userID == null || authenticationViewModel.userInfo.password == null, onPressed: () { diff --git a/lib/widgets/patients/profile/prescription_in_patinets_widget.dart b/lib/widgets/patients/profile/prescription_in_patinets_widget.dart index 9d22962a..0d622420 100644 --- a/lib/widgets/patients/profile/prescription_in_patinets_widget.dart +++ b/lib/widgets/patients/profile/prescription_in_patinets_widget.dart @@ -29,7 +29,7 @@ class PrescriptionInPatientWidget extends StatelessWidget { padding: EdgeInsets.all(40), decoration: BoxDecoration( border: - Border.all(color: HexColor('#B8382C'), width: 4), + Border.all(color: HexColor('#D02127'), width: 4), borderRadius: BorderRadius.all(Radius.circular(100))), child: IconButton( icon: Icon( diff --git a/lib/widgets/shared/buttons/app_buttons_widget.dart b/lib/widgets/shared/buttons/app_buttons_widget.dart index acbd27fe..0a225dde 100644 --- a/lib/widgets/shared/buttons/app_buttons_widget.dart +++ b/lib/widgets/shared/buttons/app_buttons_widget.dart @@ -1,3 +1,5 @@ +import 'dart:ui'; + import 'package:doctor_app_flutter/config/size_config.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @@ -54,10 +56,13 @@ class _AppButtonState extends State { // height: MediaQuery.of(context).size.height * 0.075, height: widget.height, child: IgnorePointer( - ignoring: widget.loading ||widget.disabled, + ignoring: widget.loading || widget.disabled, child: RawMaterialButton( fillColor: widget.disabled - ? Colors.grey : widget.color != null ? widget.color : HexColor("#B8382C"), + ? Colors.grey + : widget.color != null + ? widget.color + : HexColor("#D02127"), splashColor: widget.color, child: Padding( padding: (widget.hPadding > 0 || widget.vPadding > 0) @@ -103,18 +108,21 @@ class _AppButtonState extends State { widget.title, color: widget.fontColor, fontSize: SizeConfig.textMultiplier * widget.fontSize, - fontWeight: widget.fontWeight, + fontWeight: FontWeight.w600, + letterSpacing: -0.48, ), ), ], ), ), - onPressed: widget.disabled ? (){} : widget.onPressed, + onPressed: widget.disabled ? () {} : widget.onPressed, shape: RoundedRectangleBorder( side: BorderSide( - color: - widget.hasBorder ? widget.borderColor : widget.disabled - ? Colors.grey : widget.color ?? Color(0xFFB8382C), + color: widget.hasBorder + ? widget.borderColor + : widget.disabled + ? Colors.grey + : widget.color ?? Color(0xFFB8382C), width: 0.8, ), borderRadius: BorderRadius.all(Radius.circular(widget.radius))), diff --git a/lib/widgets/shared/text_fields/app-textfield-custom.dart b/lib/widgets/shared/text_fields/app-textfield-custom.dart index 98207888..2a77eb2d 100644 --- a/lib/widgets/shared/text_fields/app-textfield-custom.dart +++ b/lib/widgets/shared/text_fields/app-textfield-custom.dart @@ -102,7 +102,8 @@ class _AppTextFieldCustomState extends State { Color(0Xffffffff), widget.validationError == null ? Color(0xFFEFEFEF) - : Colors.red.shade700) + : Colors.red.shade700, + ) : null, padding: EdgeInsets.only(top: 4.0, bottom: 4.0, left: 8.0, right: 8.0), @@ -116,8 +117,8 @@ class _AppTextFieldCustomState extends State { padding: widget.dropDownText == null ? widget.isSearchTextField ? EdgeInsets.only(top: 10) - : EdgeInsets.symmetric(vertical: 0) - : EdgeInsets.symmetric(vertical: 0), // 8.0 + : EdgeInsets.only(top: 7.5) + : EdgeInsets.only(top: 0), // 8.0 child: Column( crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, @@ -135,6 +136,8 @@ class _AppTextFieldCustomState extends State { // (SizeConfig.isWidthLarge ? 1.1 : 1.3) : 0, fontWeight: FontWeight.w500, + letterSpacing: -0.44, + fontFamily: 'Poppins', ), widget.dropDownText == null ? Container( @@ -147,14 +150,17 @@ class _AppTextFieldCustomState extends State { ? TextAlign.right : TextAlign.left, focusNode: _focusNode, - textAlignVertical: TextAlignVertical.center, + textAlignVertical: TextAlignVertical.top, decoration: TextFieldsUtils .textFieldSelectorDecoration( widget.hintText, null, true), style: TextStyle( - fontSize: SizeConfig.textMultiplier * 1.7, + fontSize: + 14.0, //SizeConfig.textMultiplier * 1.7, fontFamily: 'Poppins', color: Color(0xFF575757), + fontWeight: FontWeight.w400, + letterSpacing: -0.56, ), controller: widget.controller, keyboardType: widget.inputType ?? @@ -203,7 +209,8 @@ class _AppTextFieldCustomState extends State { Icons.keyboard_arrow_down, color: widget.dropDownColor != null ? widget.dropDownColor - : Colors.black, + : Color(0xff2E303A), + size: 12.0, ), ) : Container(), diff --git a/lib/widgets/shared/text_fields/text_fields_utils.dart b/lib/widgets/shared/text_fields/text_fields_utils.dart index 1f1ff2bb..8ca24a68 100644 --- a/lib/widgets/shared/text_fields/text_fields_utils.dart +++ b/lib/widgets/shared/text_fields/text_fields_utils.dart @@ -1,10 +1,9 @@ import 'package:flutter/material.dart'; -class TextFieldsUtils{ - +class TextFieldsUtils { static BoxDecoration containerBorderDecoration( Color containerColor, Color borderColor, - {double borderWidth = -1, double borderRadius = 12}) { + {double borderWidth = -1, double borderRadius = 10.0}) { return BoxDecoration( color: containerColor, shape: BoxShape.rectangle, @@ -46,13 +45,15 @@ class TextFieldsUtils{ borderSide: BorderSide(color: Color(0xFFCCCCCC), width: 2.0), borderRadius: BorderRadius.circular(8), ),*/ - hintText: selectedText != null ? selectedText : hintText??"", - suffixIcon: Icon(suffixIcon??null, color: Colors.grey.shade600,), - + hintText: selectedText != null ? selectedText : hintText ?? "", + suffixIcon: Icon( + suffixIcon ?? null, + color: Colors.grey.shade600, + ), hintStyle: TextStyle( - fontSize: 14, + fontSize: 11, color: Colors.grey.shade600, ), ); } -} \ No newline at end of file +}