From 4195afc7bee9d72fb018b2cfe85652eb15c88ca2 Mon Sep 17 00:00:00 2001 From: Elham Rababah Date: Wed, 8 Apr 2020 12:40:21 +0300 Subject: [PATCH] Finish verification methods page --- lib/config/size_config.dart | 33 +++-- lib/lookups/auth_lookup.dart | 8 +- lib/routes.dart | 12 +- .../auth/verification_methods_screen.dart | 34 +++++ lib/screens/auth/verify_account_screen.dart | 5 +- lib/widgets/auth/auth_header.dart | 37 +++-- lib/widgets/auth/change_password.dart | 2 +- lib/widgets/auth/known_user_login.dart | 12 +- lib/widgets/auth/login_form.dart | 7 +- lib/widgets/auth/verfiy_account.dart | 15 ++- lib/widgets/auth/verification_methods.dart | 126 ++++++++++++++++++ pubspec.lock | 11 +- pubspec.yaml | 4 + 13 files changed, 247 insertions(+), 59 deletions(-) create mode 100644 lib/screens/auth/verification_methods_screen.dart create mode 100644 lib/widgets/auth/verification_methods.dart diff --git a/lib/config/size_config.dart b/lib/config/size_config.dart index b029c89c..6b996b3f 100644 --- a/lib/config/size_config.dart +++ b/lib/config/size_config.dart @@ -5,6 +5,8 @@ class SizeConfig { static double _blockWidth = 0; static double _blockHeight = 0; + static double realScreenWidth; + static double realScreenHeight; static double screenWidth; static double screenHeight; static double textMultiplier; @@ -17,33 +19,40 @@ class SizeConfig { static bool isMobile = false; void init(BoxConstraints constraints, Orientation orientation) { + realScreenHeight = constraints.maxHeight; + realScreenWidth = constraints.maxWidth; - screenHeight = constraints.maxHeight; - screenWidth = constraints.maxWidth; - _blockWidth = screenWidth / 100; - _blockHeight = screenHeight / 100; - if(constraints.maxWidth<= MAX_SMALL_SCREEN){ + if (constraints.maxWidth <= MAX_SMALL_SCREEN) { isMobile = true; } if (orientation == Orientation.portrait) { isPortrait = true; - if (screenWidth < 450) { + if (realScreenWidth < 450) { isMobilePortrait = true; } - textMultiplier = _blockHeight; - imageSizeMultiplier = _blockWidth; + // textMultiplier = _blockHeight; + // imageSizeMultiplier = _blockWidth; + screenHeight = realScreenHeight; + screenWidth = realScreenWidth; } else { isPortrait = false; isMobilePortrait = false; - textMultiplier = _blockWidth; - imageSizeMultiplier = _blockHeight; + // textMultiplier = _blockWidth; + // imageSizeMultiplier = _blockHeight; + screenHeight = realScreenWidth; + screenWidth = realScreenHeight; } + _blockWidth = screenWidth / 100; + _blockHeight = screenHeight / 100; + + textMultiplier = _blockHeight; + imageSizeMultiplier = _blockWidth; heightMultiplier = _blockHeight; widthMultiplier = _blockWidth; - print('screenWidth $screenWidth'); - print('screenHeight $screenHeight'); + print('realScreenWidth $realScreenWidth'); + print('realScreenHeight $realScreenHeight'); print('textMultiplier $textMultiplier'); print('imageSizeMultiplier $imageSizeMultiplier'); print('heightMultiplier$heightMultiplier'); diff --git a/lib/lookups/auth_lookup.dart b/lib/lookups/auth_lookup.dart index bc4d3821..058b2888 100644 --- a/lib/lookups/auth_lookup.dart +++ b/lib/lookups/auth_lookup.dart @@ -1 +1,7 @@ -enum loginType { knownUser, unknownUser, changePassword, verifyPassword } +enum loginType { + knownUser, + unknownUser, + changePassword, + verifyPassword, + verificationMethods +} diff --git a/lib/routes.dart b/lib/routes.dart index 45b45945..e6d9e805 100644 --- a/lib/routes.dart +++ b/lib/routes.dart @@ -1,22 +1,23 @@ -import 'package:doctor_app_flutter/screens/settings/settings_screen.dart'; - import './screens/QR_reader_screen.dart'; +import './screens/auth/change_password_screen.dart'; import './screens/auth/login_screen.dart'; +import './screens/auth/verification_methods_screen.dart'; +import './screens/auth/verify_account_screen.dart'; import './screens/blood_bank_screen.dart'; -import './screens/doctor_reply_screen.dart'; import './screens/dashboard.dart'; +import './screens/doctor_reply_screen.dart'; import './screens/medicine/medicine_search_screen.dart'; import './screens/my_schedule_screen.dart'; import './screens/patients/patient_search_screen.dart'; import './screens/patients/patients_list_screen.dart'; -import './screens/auth/change_password_screen.dart'; -import './screens/auth/verify_account_screen.dart'; +import './screens/settings/settings_screen.dart'; const String INIT_ROUTE = LOGIN; const String HOME = '/'; const String LOGIN = 'login'; const String CHANGE_PASSWORD = 'change-password'; const String VERIFY_ACCOUNT = 'verify-account'; +const String VERIFICATION_METHODS ='verification-methods'; const String MY_SCHEDULE = 'my-schedule'; const String QR_READER = 'qr-reader'; const String PATIENT_SEARCH = 'patients/patient-search'; @@ -39,4 +40,5 @@ var routes = { SETTINGS: (_) => SettingsScreen(), CHANGE_PASSWORD: (_) => ChangePasswordScreen(), VERIFY_ACCOUNT: (_) => VerifyAccountScreen(), + VERIFICATION_METHODS:(_)=> VerificationMethodsScreen(), }; diff --git a/lib/screens/auth/verification_methods_screen.dart b/lib/screens/auth/verification_methods_screen.dart new file mode 100644 index 00000000..23d36859 --- /dev/null +++ b/lib/screens/auth/verification_methods_screen.dart @@ -0,0 +1,34 @@ +import 'package:doctor_app_flutter/widgets/auth/verification_methods.dart'; +import 'package:flutter/material.dart'; + +import '../../lookups/auth_lookup.dart'; +import '../../widgets/auth/auth_header.dart'; +import '../../widgets/auth/verfiy_account.dart'; + +/* + *@author: Elham Rababah + *@Date:4/7/2020 + *@param: + *@return: + *@desc: Verification Methods screen + */ +class VerificationMethodsScreen extends StatelessWidget { + @override + Widget build(BuildContext context) { + // return Container()]; + return Scaffold( + backgroundColor: Colors.white, + body: SingleChildScrollView( + child: Container( + margin: EdgeInsetsDirectional.fromSTEB(30, 0, 30, 0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + AuthHeader(loginType.verificationMethods), + VerificationMethods(), + ], + ), + ), + )); + } +} diff --git a/lib/screens/auth/verify_account_screen.dart b/lib/screens/auth/verify_account_screen.dart index 73e59e19..2ebd8744 100644 --- a/lib/screens/auth/verify_account_screen.dart +++ b/lib/screens/auth/verify_account_screen.dart @@ -1,7 +1,8 @@ -import 'package:doctor_app_flutter/lookups/auth_lookup.dart'; -import 'package:doctor_app_flutter/widgets/auth/auth_header.dart'; +import '../../lookups/auth_lookup.dart'; +import '../../widgets/auth/auth_header.dart'; import 'package:flutter/material.dart'; import '../../widgets/auth/verfiy_account.dart'; + class VerifyAccountScreen extends StatelessWidget { @override Widget build(BuildContext context) { diff --git a/lib/widgets/auth/auth_header.dart b/lib/widgets/auth/auth_header.dart index a694615d..ef507fd6 100644 --- a/lib/widgets/auth/auth_header.dart +++ b/lib/widgets/auth/auth_header.dart @@ -13,8 +13,8 @@ class AuthHeader extends StatelessWidget { var screen = Container( margin: SizeConfig.isMobile ? null - : EdgeInsetsDirectional.fromSTEB(SizeConfig.screenWidth * 0.30, - SizeConfig.screenWidth * 0.1, 0, 0), + : EdgeInsetsDirectional.fromSTEB(SizeConfig.realScreenWidth * 0.30, + SizeConfig.realScreenWidth * 0.1, 0, 0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -25,7 +25,7 @@ class AuthHeader extends StatelessWidget { margin: SizeConfig.isMobile ? EdgeInsetsDirectional.fromSTEB(0, 50, 0, 0) : EdgeInsetsDirectional.fromSTEB( - SizeConfig.screenWidth * 0.13, 0, 0, 0), + SizeConfig.realScreenWidth * 0.13, 0, 0, 0), child: buildImageLogo(), ), SizedBox( @@ -68,14 +68,15 @@ class AuthHeader extends StatelessWidget { if (userType == loginType.unknownUser) { img = 'assets/images/welcome_login_icon.png'; } - if (userType == loginType.verifyPassword) { + if (userType == loginType.verifyPassword || + userType == loginType.verificationMethods) { img = 'assets/images/verified_icon.png'; } return Image.asset( img, fit: BoxFit.cover, - height: SizeConfig.isMobile ? null : SizeConfig.screenWidth * 0.09, + height: SizeConfig.isMobile ? null : SizeConfig.realScreenWidth * 0.09, ); } @@ -100,6 +101,10 @@ class AuthHeader extends StatelessWidget { text1 = 'Verify '; text2 = 'Your Account!'; } + if (userType == loginType.verificationMethods) { + text1 = 'Choose '; + text2 = 'Verification'; + } List childrens = [ Text( text1, @@ -127,9 +132,10 @@ class AuthHeader extends StatelessWidget { } } if (!SizeConfig.isMobile) { - double start = SizeConfig.screenWidth * 0.13; + double start = SizeConfig.realScreenWidth * 0.13; if (loginType.verifyPassword == userType || - loginType.changePassword == userType) { + loginType.changePassword == userType || + userType == loginType.verificationMethods) { start = 0; } containerMargin = EdgeInsetsDirectional.fromSTEB(start, 0, 0, 0); @@ -140,18 +146,19 @@ class AuthHeader extends StatelessWidget { Container buildDrAppContainer(BuildContext context) { if (userType == loginType.changePassword || - userType == loginType.verifyPassword) { + userType == loginType.verifyPassword || + userType == loginType.verificationMethods) { return Container(); } return Container( margin: SizeConfig.isMobile ? null : EdgeInsetsDirectional.fromSTEB( - SizeConfig.screenWidth * 0.13, 0, 0, 0), + SizeConfig.realScreenWidth * 0.13, 0, 0, 0), child: Text( "Doctor App", style: TextStyle( - fontSize: SizeConfig.isMobile ? 26 : SizeConfig.screenWidth * 0.030, + fontSize: SizeConfig.isMobile ? 26 : SizeConfig.realScreenWidth * 0.030, fontWeight: FontWeight.w800, color: Theme.of(context).primaryColor), ), @@ -160,14 +167,15 @@ class AuthHeader extends StatelessWidget { Text buildDrSulText(BuildContext context) { if (userType == loginType.changePassword || - userType == loginType.verifyPassword) { + userType == loginType.verifyPassword || + userType == loginType.verificationMethods) { return Text(''); } return Text( 'Dr Sulaiman Al Habib', style: TextStyle( fontWeight: FontWeight.w800, - fontSize: SizeConfig.isMobile ? 24 : SizeConfig.screenWidth * 0.029, + fontSize: SizeConfig.isMobile ? 24 : SizeConfig.realScreenWidth * 0.029, color: Theme.of(context).primaryColor, ), ); @@ -179,13 +187,14 @@ class AuthHeader extends StatelessWidget { text = 'Welcome Back to '; } if (userType == loginType.changePassword || - userType == loginType.verifyPassword) { + userType == loginType.verifyPassword || + userType == loginType.verificationMethods) { return Text(''); } return Text( text, style: TextStyle( - fontSize: SizeConfig.isMobile ? 24 : SizeConfig.screenWidth * 0.029), + fontSize: SizeConfig.isMobile ? 24 : SizeConfig.realScreenWidth * 0.029), ); } } diff --git a/lib/widgets/auth/change_password.dart b/lib/widgets/auth/change_password.dart index 5c231f6a..020c0472 100644 --- a/lib/widgets/auth/change_password.dart +++ b/lib/widgets/auth/change_password.dart @@ -15,7 +15,7 @@ class ChangePassword extends StatelessWidget { return Form( key: changePassFormKey, child: Container( - width: SizeConfig.widthMultiplier * 90, + width: SizeConfig.realScreenWidth * 0.90, child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: < Widget>[ diff --git a/lib/widgets/auth/known_user_login.dart b/lib/widgets/auth/known_user_login.dart index b39b9c1b..48eb0104 100644 --- a/lib/widgets/auth/known_user_login.dart +++ b/lib/widgets/auth/known_user_login.dart @@ -128,14 +128,16 @@ class _KnownUserLoginState extends State { ['MemberName'], style: TextStyle( color: Hexcolor('515A5D'), - fontSize: 2.5 *SizeConfig.textMultiplier, + fontSize: + 2.5 * SizeConfig.textMultiplier, fontWeight: FontWeight.w800), ), Text( 'ENT Spec', style: TextStyle( color: Hexcolor('515A5D'), - fontSize: 1.5 *SizeConfig.textMultiplier), + fontSize: + 1.5 * SizeConfig.textMultiplier), ) ], ), @@ -193,7 +195,7 @@ class _KnownUserLoginState extends State { // textAlign: TextAlign.center, style: TextStyle( color: Colors.white, - fontSize: 2.5 *SizeConfig.textMultiplier), + fontSize: 2.5 * SizeConfig.textMultiplier), ), ), ), @@ -219,7 +221,7 @@ class _KnownUserLoginState extends State { "More verification Options".toUpperCase(), style: TextStyle( color: Theme.of(context).primaryColor, - fontSize: 2.5 *SizeConfig.textMultiplier), + fontSize: 2.5 * SizeConfig.textMultiplier), )), ), SizedBox( @@ -231,7 +233,7 @@ class _KnownUserLoginState extends State { } navigateToMoreOption() { - Navigator.of(context).pushNamed('routeName'); + Navigator.of(context).pushNamed(VERIFICATION_METHODS); } _authenticate() { diff --git a/lib/widgets/auth/login_form.dart b/lib/widgets/auth/login_form.dart index e49f0d7b..1c277d4f 100644 --- a/lib/widgets/auth/login_form.dart +++ b/lib/widgets/auth/login_form.dart @@ -57,7 +57,7 @@ class _LoginFormState extends State { return Form( key: loginFormKey, child: Container( - width: SizeConfig.widthMultiplier * 90, + width: SizeConfig.realScreenWidth * 0.90, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -192,7 +192,7 @@ class _LoginFormState extends State { child: Container( padding: const EdgeInsets.all(10.0), height: 50, - width: SizeConfig.widthMultiplier * 30, + width: SizeConfig.realScreenWidth * 0.30, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ @@ -260,10 +260,11 @@ class _LoginFormState extends State { if (res['MessageStatus'] == 1) { setSharedPref('platformImei', _platformImei); saveObjToString('loggedUser', preRes); - Navigator.of(context).pushNamed(VERIFY_ACCOUNT); + Navigator.of(context).pushNamed(VERIFICATION_METHODS); // save imei on shared preferance } else { // handel error + print('Heeeeeeeeeeeer'); showLoginError(res['ErrorEndUserMessage']); } }).catchError((err) { diff --git a/lib/widgets/auth/verfiy_account.dart b/lib/widgets/auth/verfiy_account.dart index 8e248427..2ac31a0e 100644 --- a/lib/widgets/auth/verfiy_account.dart +++ b/lib/widgets/auth/verfiy_account.dart @@ -1,8 +1,9 @@ -import 'package:doctor_app_flutter/config/size_config.dart'; -import 'package:doctor_app_flutter/routes.dart'; import 'package:flutter/material.dart'; import 'package:hexcolor/hexcolor.dart'; +import '../../config/size_config.dart'; +import '../../routes.dart'; + class VerifyAccount extends StatelessWidget { final verifyAccountForm = GlobalKey(); @override @@ -10,7 +11,7 @@ class VerifyAccount extends StatelessWidget { return Form( key: verifyAccountForm, child: Container( - width: SizeConfig.widthMultiplier * 90, + width: SizeConfig.realScreenWidth * 0.90, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -19,7 +20,7 @@ class VerifyAccount extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Container( - width:SizeConfig.screenWidth*0.20, + width:SizeConfig.realScreenWidth*0.20, child: TextFormField( decoration: InputDecoration( // ts/images/password_icon.png @@ -39,7 +40,7 @@ class VerifyAccount extends StatelessWidget { onChanged: (_) {}, )), Container( - width:SizeConfig.screenWidth*0.20, + width:SizeConfig.realScreenWidth*0.20, child: TextFormField( decoration: InputDecoration( // ts/images/password_icon.png @@ -59,7 +60,7 @@ class VerifyAccount extends StatelessWidget { onChanged: (_) {}, )), Container( - width:SizeConfig.screenWidth*0.20, + width:SizeConfig.realScreenWidth*0.20, child: TextFormField( decoration: InputDecoration( // ts/images/password_icon.png @@ -79,7 +80,7 @@ class VerifyAccount extends StatelessWidget { onChanged: (_) {}, )), Container( - width:SizeConfig.screenWidth*0.20, + width:SizeConfig.realScreenWidth*0.20, child: TextFormField( decoration: InputDecoration( // ts/images/password_icon.png diff --git a/lib/widgets/auth/verification_methods.dart b/lib/widgets/auth/verification_methods.dart new file mode 100644 index 00000000..40bb77ba --- /dev/null +++ b/lib/widgets/auth/verification_methods.dart @@ -0,0 +1,126 @@ +import 'package:doctor_app_flutter/config/size_config.dart'; +import 'package:doctor_app_flutter/routes.dart'; +import 'package:flutter/material.dart'; +import 'package:hexcolor/hexcolor.dart'; + +/* + *@author: Elham Rababah + *@Date:4/7/2020 + *@param: + *@return: + *@desc: Verification Methods widget + */ +class VerificationMethods extends StatelessWidget { + MainAxisAlignment spaceBetweenMethods =MainAxisAlignment.spaceBetween; + + @override + Widget build(BuildContext context) { + // if(!SizeConfig.isMobile) { + // spaceBetweenMethods = MainAxisAlignment.spaceAround; + // } + return Container( + width: SizeConfig.realScreenWidth * 0.90, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Please choose one of the Following option to verify", + style: TextStyle( + fontSize: 3.5 * SizeConfig.textMultiplier, + ), + ), + SizedBox( + height: 40, + ), + Container( + width: SizeConfig.realScreenWidth * 80, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + mainAxisAlignment: spaceBetweenMethods, + children: [ + buildVerificationMethod(context, + 'assets/images/verification_fingerprint_icon.png', + 'Fingerprint', + () {}), + buildVerificationMethod(context, + 'assets/images/verification_faceid_icon.png', + 'Face ID', + () {}), + ], + ), + SizedBox( + height: 40, + ), + Row( + mainAxisAlignment: spaceBetweenMethods, + children: [ + buildVerificationMethod(context, + 'assets/images/verification_whatsapp_icon.png', + 'WhatsApp', + () {}), + buildVerificationMethod(context, + 'assets/images/verification_sms_icon.png', + 'SMS', + () {}), + ], + ) + ], + ), + ), + SizedBox( + height: SizeConfig.heightMultiplier * 2, + ) + ], + ), + ); + } + +/* + *@author: Elham Rababah + *@Date:07/4/2020 + *@param: url , dec, fun + *@return: InkWell widget + *@desc: Build Verification Method + */ + InkWell buildVerificationMethod(context,url, dec, fun) { + return InkWell( + onTap: (){ + Navigator.of(context).pushNamed(VERIFY_ACCOUNT); + + }, + child: Container( + // height: SizeConfig.heightMultiplier *2, + height: SizeConfig.heightMultiplier * 19, + width: SizeConfig.widthMultiplier * 37, + + padding: EdgeInsets.all(10), + decoration: BoxDecoration( + border: Border.all( + width: 1, + color: Hexcolor( + '#CCCCCC') // <--- border width here + ), + borderRadius: BorderRadius.all(Radius.circular(10))), + child: Column( + children: [ + Container( + margin: EdgeInsetsDirectional.only( + top: SizeConfig.heightMultiplier * 0.5), + child: Image.asset( + url, + height: SizeConfig.heightMultiplier * 10, + fit: BoxFit.cover, + ), + ), + SizedBox( + height: 10, + ), + Text(dec, style: TextStyle(fontSize:SizeConfig.textMultiplier*2 ),) + ], + ), + ), + ); + } +} diff --git a/pubspec.lock b/pubspec.lock index 7e582a27..b5106a1b 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -84,7 +84,7 @@ packages: name: build_resolvers url: "https://pub.dartlang.org" source: hosted - version: "1.3.3" + version: "1.3.4" build_runner: dependency: "direct dev" description: @@ -182,7 +182,7 @@ packages: name: dart_style url: "https://pub.dartlang.org" source: hosted - version: "1.3.3" + version: "1.3.4" fixnum: dependency: transitive description: @@ -387,13 +387,6 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "1.9.3" - package_resolver: - dependency: transitive - description: - name: package_resolver - url: "https://pub.dartlang.org" - source: hosted - version: "1.0.10" path: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 30b1bd23..7b87b081 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -69,6 +69,10 @@ flutter: - assets/images/verification_faceid_lg_icon.png - assets/images/verification_sms_lg_icon.png - assets/images/verification_whatsapp_lg_icon.png + - assets/images/verification_fingerprint_icon.png + - assets/images/verification_faceid_icon.png + - assets/images/verification_sms_icon.png + - assets/images/verification_whatsapp_icon.png - assets/images/close_icon.png - assets/images/welcome_login_icon.png - assets/images/verified_icon.png