From f75c6376b5712f8535b4887166b61d079ddb3e16 Mon Sep 17 00:00:00 2001 From: Elham Rababah Date: Tue, 31 Mar 2020 15:54:57 +0300 Subject: [PATCH] add size config in order to help dev build responsive desing --- lib/config/size_config.dart | 27 ++- lib/widgets/auth/auth_header.dart | 160 +++++++-------- lib/widgets/auth/known_user_login.dart | 155 +++++++------- lib/widgets/auth/login_form.dart | 270 ++++++++++++------------- 4 files changed, 296 insertions(+), 316 deletions(-) diff --git a/lib/config/size_config.dart b/lib/config/size_config.dart index 3b443ea7..b029c89c 100644 --- a/lib/config/size_config.dart +++ b/lib/config/size_config.dart @@ -1,3 +1,4 @@ +import 'package:doctor_app_flutter/config/config.dart'; import 'package:flutter/cupertino.dart'; class SizeConfig { @@ -13,30 +14,36 @@ class SizeConfig { static bool isPortrait = true; static bool isMobilePortrait = false; + static bool isMobile = false; void init(BoxConstraints constraints, Orientation orientation) { + + screenHeight = constraints.maxHeight; + screenWidth = constraints.maxWidth; + + _blockWidth = screenWidth / 100; + _blockHeight = screenHeight / 100; + if(constraints.maxWidth<= MAX_SMALL_SCREEN){ + isMobile = true; + } if (orientation == Orientation.portrait) { - screenHeight = constraints.maxHeight; - screenWidth = constraints.maxWidth; isPortrait = true; if (screenWidth < 450) { isMobilePortrait = true; } + textMultiplier = _blockHeight; + imageSizeMultiplier = _blockWidth; } else { - screenHeight = constraints.maxWidth; - screenWidth = constraints.maxHeight; isPortrait = false; isMobilePortrait = false; + textMultiplier = _blockWidth; + imageSizeMultiplier = _blockHeight; } - - _blockWidth = screenWidth / 100; - _blockHeight = screenHeight / 100; - - textMultiplier = _blockHeight; - imageSizeMultiplier = _blockWidth; heightMultiplier = _blockHeight; widthMultiplier = _blockWidth; + print('screenWidth $screenWidth'); + print('screenHeight $screenHeight'); print('textMultiplier $textMultiplier'); print('imageSizeMultiplier $imageSizeMultiplier'); print('heightMultiplier$heightMultiplier'); diff --git a/lib/widgets/auth/auth_header.dart b/lib/widgets/auth/auth_header.dart index 7c9de094..efd351cf 100644 --- a/lib/widgets/auth/auth_header.dart +++ b/lib/widgets/auth/auth_header.dart @@ -1,7 +1,7 @@ -import 'package:doctor_app_flutter/lookups/auth_lookup.dart'; +import '../../config/size_config.dart'; +import '../../lookups/auth_lookup.dart'; import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; -import 'package:flutter_device_type/flutter_device_type.dart'; class AuthHeader extends StatelessWidget { var userType; @@ -9,110 +9,106 @@ class AuthHeader extends StatelessWidget { @override Widget build(BuildContext context) { - var smallScreenSize = 660; - return LayoutBuilder(builder: (ctx, constraints) { - bool isSmallScreen = constraints.maxWidth <= smallScreenSize; - var screen = Container( - margin: isSmallScreen - ? null - : EdgeInsetsDirectional.fromSTEB(constraints.maxWidth * 0.30, - constraints.maxWidth * 0.1, 0, 0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Container( - margin: isSmallScreen - ? EdgeInsetsDirectional.fromSTEB(0, 50, 0, 0) - : EdgeInsetsDirectional.fromSTEB( - constraints.maxWidth * 0.13, 0, 0, 0), - child: Image.asset( - 'assets/images/login_icon.png', - fit: BoxFit.cover, - height: - isSmallScreen ? null : constraints.maxWidth * 0.09, - ), + var screen = Container( + margin: SizeConfig.isMobile + ? null + : EdgeInsetsDirectional.fromSTEB(SizeConfig.screenWidth * 0.30, + SizeConfig.screenWidth * 0.1, 0, 0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + margin: SizeConfig.isMobile + ? EdgeInsetsDirectional.fromSTEB(0, 50, 0, 0) + : EdgeInsetsDirectional.fromSTEB( + SizeConfig.screenWidth * 0.13, 0, 0, 0), + child: Image.asset( + 'assets/images/login_icon.png', + fit: BoxFit.cover, + height: SizeConfig.isMobile + ? null + : SizeConfig.screenWidth * 0.09, ), - SizedBox( - height: 10, + ), + SizedBox( + height: 10, + ), + Container( + margin: SizeConfig.isMobile + ? null + : EdgeInsetsDirectional.fromSTEB( + SizeConfig.screenWidth * 0.13, 0, 0, 0), + child: Text( + "LOGIN", + style: TextStyle( + fontSize: SizeConfig.isMobile + ? 30 + : SizeConfig.screenWidth * 0.035, + fontWeight: FontWeight.w800), ), - Container( - margin: isSmallScreen - ? null - : EdgeInsetsDirectional.fromSTEB( - constraints.maxWidth * 0.13, 0, 0, 0), - child: Text( - "LOGIN", - style: TextStyle( - fontSize: - isSmallScreen ? 30 : constraints.maxWidth * 0.035, - fontWeight: FontWeight.w800), - ), - ) - ], - ), - Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: isSmallScreen - ? [ - SizedBox( - height: 10, - ), - buildWelText(isSmallScreen, constraints), - buildDrSulText(isSmallScreen, constraints, context), - ] - : [ - SizedBox( - height: 10, - ), - Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - buildWelText(isSmallScreen, constraints), - buildDrSulText(isSmallScreen, constraints, context), - ], - ), - ], - ), - buildDrAppContainer(isSmallScreen, constraints, context) - ], - )); - return screen; - }); + ) + ], + ), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: SizeConfig.isMobile + ? [ + SizedBox( + height: 10, + ), + buildWelText(), + buildDrSulText(context), + ] + : [ + SizedBox( + height: 10, + ), + Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + buildWelText(), + buildDrSulText(context), + ], + ), + ], + ), + buildDrAppContainer(context) + ], + )); + return screen; } - Container buildDrAppContainer( - bool isSmallScreen, BoxConstraints constraints, BuildContext context) { + Container buildDrAppContainer(BuildContext context) { return Container( - margin: isSmallScreen + margin: SizeConfig.isMobile ? null : EdgeInsetsDirectional.fromSTEB( - constraints.maxWidth * 0.13, 0, 0, 0), + SizeConfig.screenWidth * 0.13, 0, 0, 0), child: Text( "Doctor App", style: TextStyle( - fontSize: isSmallScreen ? 26 : constraints.maxWidth * 0.030, + fontSize: SizeConfig.isMobile ? 26 : SizeConfig.screenWidth * 0.030, fontWeight: FontWeight.w800, color: Theme.of(context).primaryColor), ), ); } - Text buildDrSulText( - bool isSmallScreen, BoxConstraints constraints, BuildContext context) { + Text buildDrSulText(BuildContext context) { return Text( 'Dr Sulaiman Al Habib', style: TextStyle( fontWeight: FontWeight.w800, - fontSize: isSmallScreen ? 24 : constraints.maxWidth * 0.029, + fontSize: SizeConfig.isMobile ? 24 : SizeConfig.screenWidth * 0.029, color: Theme.of(context).primaryColor, ), ); } - Text buildWelText(bool isSmallScreen, BoxConstraints constraints) { + Text buildWelText() { String text = 'Welcome to '; if (userType == loginType.unknownUser) { text = 'Welcome Back to '; @@ -121,7 +117,7 @@ class AuthHeader extends StatelessWidget { return Text( text, style: TextStyle( - fontSize: isSmallScreen ? 24 : constraints.maxWidth * 0.029), + fontSize: SizeConfig.isMobile ? 24 : SizeConfig.screenWidth * 0.029), ); } } diff --git a/lib/widgets/auth/known_user_login.dart b/lib/widgets/auth/known_user_login.dart index c6b2b3c6..9e7f26de 100644 --- a/lib/widgets/auth/known_user_login.dart +++ b/lib/widgets/auth/known_user_login.dart @@ -1,17 +1,18 @@ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:hexcolor/hexcolor.dart'; +import 'package:local_auth/error_codes.dart' as auth_error; import 'package:local_auth/local_auth.dart'; import 'package:provider/provider.dart'; import 'package:shared_preferences/shared_preferences.dart'; import '../../config/config.dart'; +import '../../config/size_config.dart'; import '../../providers/auth_provider.dart'; import '../../routes.dart'; import '../../util/dr_app_shared_pref.dart'; import '../../util/dr_app_toast_msg.dart'; import '../../widgets/shared/dr_app_circular_progress_Indeicator.dart'; -import 'package:local_auth/error_codes.dart' as auth_error; DrAppSharedPreferances sharedPref = new DrAppSharedPreferances(); DrAppToastMsg toastMsg = DrAppToastMsg(); @@ -88,85 +89,72 @@ class _KnownUserLoginState extends State { if (snapshot.hasError) { return Text('Error: ${snapshot.error}'); } else { - return LayoutBuilder( - builder: (ctx, constraints) { - int maxSmallScreenSize = MAX_SMALL_SCREEN; - bool isSmallScreen = - constraints.maxWidth <= maxSmallScreenSize; - return Column( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - Stack(children: [ - Container( - decoration: BoxDecoration( - border: Border.all( - color: Hexcolor('#CCCCCC'), - ), - borderRadius: BorderRadius.circular(50)), - margin: const EdgeInsets.fromLTRB(0, 20.0, 30, 0), - child: Row( - // mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Container( - height: 100, - width: 100, - decoration: new BoxDecoration( - // color: Colors.green, // border color - shape: BoxShape.circle, - border: Border.all( - color: Hexcolor('#CCCCCC'))), - child: CircleAvatar( - child: Image.asset( - 'assets/images/dr_avatar.png', - fit: BoxFit.cover, - ), - )), - Container( - margin: EdgeInsets.symmetric( - vertical: 3, horizontal: 15), - child: Column( - // mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: - CrossAxisAlignment.start, - children: [ - Text( - _loggedUser['List_MemberInformation'][0] - ['MemberName'], - style: TextStyle( - color: Hexcolor('515A5D'), - fontSize: isSmallScreen - ? 24 - : constraints.maxWidth * 0.029, - fontWeight: FontWeight.w800), - ), - Text( - 'ENT Spec', - style: TextStyle( - color: Hexcolor('515A5D'), - fontSize: isSmallScreen - ? 20 - : constraints.maxWidth * 0.025), - ) - ], - ), - ) - ], + return Column( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Stack(children: [ + Container( + decoration: BoxDecoration( + border: Border.all( + color: Hexcolor('#CCCCCC'), ), - ), - Positioned( - top: 7, - right: 70, - child: Image.asset( - 'assets/images/close_icon.png', - fit: BoxFit.cover, - )) - ]), - buildVerificationTypeImageContainer(), - buildButtonsContainer( - isSmallScreen, constraints, context) - ], - ); - }, + borderRadius: BorderRadius.circular(50)), + margin: const EdgeInsets.fromLTRB(0, 20.0, 30, 0), + child: Row( + // mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Container( + height: 100, + width: 100, + decoration: new BoxDecoration( + // color: Colors.green, // border color + shape: BoxShape.circle, + border: + Border.all(color: Hexcolor('#CCCCCC'))), + child: CircleAvatar( + child: Image.asset( + 'assets/images/dr_avatar.png', + fit: BoxFit.cover, + ), + )), + Container( + margin: EdgeInsets.symmetric( + vertical: 3, horizontal: 15), + child: Column( + // mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + _loggedUser['List_MemberInformation'][0] + ['MemberName'], + style: TextStyle( + color: Hexcolor('515A5D'), + fontSize: 2.5 *SizeConfig.textMultiplier, + fontWeight: FontWeight.w800), + ), + Text( + 'ENT Spec', + style: TextStyle( + color: Hexcolor('515A5D'), + fontSize: 1.5 *SizeConfig.textMultiplier), + ) + ], + ), + ) + ], + ), + ), + Positioned( + top: 7, + right: 70, + child: Image.asset( + 'assets/images/close_icon.png', + fit: BoxFit.cover, + )) + ]), + buildVerificationTypeImageContainer(), + buildButtonsContainer(context) + ], ); } } @@ -187,8 +175,7 @@ class _KnownUserLoginState extends State { } // - Container buildButtonsContainer( - bool isSmallScreen, BoxConstraints constraints, BuildContext context) { + Container buildButtonsContainer(BuildContext context) { return Container( margin: EdgeInsetsDirectional.fromSTEB(0, 0, 30, 0), width: double.infinity, @@ -207,8 +194,7 @@ class _KnownUserLoginState extends State { // textAlign: TextAlign.center, style: TextStyle( color: Colors.white, - fontSize: - isSmallScreen ? 20 : constraints.maxWidth * 0.029), + fontSize: 2.5 *SizeConfig.textMultiplier), ), ), ), @@ -234,8 +220,7 @@ class _KnownUserLoginState extends State { "More verification Options".toUpperCase(), style: TextStyle( color: Theme.of(context).primaryColor, - fontSize: - isSmallScreen ? 20 : constraints.maxWidth * 0.029), + fontSize: 2.5 *SizeConfig.textMultiplier), )), ), SizedBox( diff --git a/lib/widgets/auth/login_form.dart b/lib/widgets/auth/login_form.dart index da7c1d2c..ae2bf55b 100644 --- a/lib/widgets/auth/login_form.dart +++ b/lib/widgets/auth/login_form.dart @@ -54,24 +54,47 @@ class _LoginFormState extends State { } AuthProvider authProv = Provider.of(context); - return LayoutBuilder(builder: (ctx, constraints) { - var smallScreenSize = 660; - bool isSmallScreen = constraints.maxWidth <= smallScreenSize; - return Form( - key: loginFormKey, - child: Container( - width: constraints.maxWidth * 0.9, - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - SizedBox( - height: 20, - ), - TextFormField( - keyboardType: TextInputType.number, + return Form( + key: loginFormKey, + child: Container( + width: SizeConfig.widthMultiplier * 90, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + buildSizedBox(), + TextFormField( + keyboardType: TextInputType.number, + decoration: InputDecoration( + prefixIcon: Image.asset('assets/images/user_id_icon.png'), + hintText: 'Enter ID', + hintStyle: TextStyle(fontSize: 2 * SizeConfig.textMultiplier), + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.all(Radius.circular(20)), + borderSide: BorderSide(color: Hexcolor('#CCCCCC')), + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.all(Radius.circular(10.0)), + borderSide: + BorderSide(color: Theme.of(context).primaryColor), + ) + //BorderRadius.all(Radius.circular(20)); + ), + validator: (value) { + if (value.isEmpty) { + return 'Please enter your ID'; + } + return null; + }, + onSaved: (value) { + userInfo.UserID = value; + }, + ), + buildSizedBox(), + TextFormField( + obscureText: true, decoration: InputDecoration( - prefixIcon: Image.asset('assets/images/user_id_icon.png'), - hintText: 'Enter ID', + prefixIcon: Image.asset('assets/images/password_icon.png'), + hintText: 'Enter Password', hintStyle: TextStyle(fontSize: 2 * SizeConfig.textMultiplier), enabledBorder: OutlineInputBorder( @@ -87,141 +110,110 @@ class _LoginFormState extends State { ), validator: (value) { if (value.isEmpty) { - return 'Please enter some text'; + return 'Please enter your Password'; } return null; }, onSaved: (value) { - userInfo.UserID = value; + userInfo.Password = value; + }), + buildSizedBox(), + DropdownButtonFormField( + value: userInfo.ProjectID, + isExpanded: false, + decoration: InputDecoration( + contentPadding: EdgeInsets.all(10), + isDense: true, + prefixIcon: Image.asset('assets/images/hospital_icon.png'), + // hintText: 'Enter Password', + hintStyle: + TextStyle(fontSize: 2 * SizeConfig.textMultiplier), + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.all(Radius.circular(20)), + borderSide: BorderSide(color: Hexcolor('#CCCCCC')), + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.all(Radius.circular(10.0)), + borderSide: + BorderSide(color: Theme.of(context).primaryColor), + ) + //BorderRadius.all(Radius.circular(20)); + ), + validator: (value) { + print(value); + if (value == null) { + return 'Please select your project'; + } + return null; }, - ), - SizedBox( - height: 20, - ), - TextFormField( - obscureText: true, - decoration: InputDecoration( - prefixIcon: - Image.asset('assets/images/password_icon.png'), - hintText: 'Enter Password', - hintStyle: - TextStyle(fontSize: 2 * SizeConfig.textMultiplier), - enabledBorder: OutlineInputBorder( - borderRadius: BorderRadius.all(Radius.circular(20)), - borderSide: BorderSide(color: Hexcolor('#CCCCCC')), - ), - focusedBorder: OutlineInputBorder( - borderRadius: BorderRadius.all(Radius.circular(10.0)), - borderSide: - BorderSide(color: Theme.of(context).primaryColor), - ) - //BorderRadius.all(Radius.circular(20)); - ), - validator: (value) { - if (value.isEmpty) { - return 'Please enter some text'; - } - return null; - }, - onSaved: (value) { - userInfo.Password = value; - }), - SizedBox( - height: 20, - ), - DropdownButtonFormField( - value: userInfo.ProjectID, - isExpanded: false, - decoration: InputDecoration( - contentPadding: EdgeInsets.all(10), - isDense: true, - prefixIcon: - Image.asset('assets/images/hospital_icon.png'), - // hintText: 'Enter Password', - hintStyle: - TextStyle(fontSize: 2 * SizeConfig.textMultiplier), - enabledBorder: OutlineInputBorder( - borderRadius: BorderRadius.all(Radius.circular(20)), - borderSide: BorderSide(color: Hexcolor('#CCCCCC')), - ), - focusedBorder: OutlineInputBorder( - borderRadius: BorderRadius.all(Radius.circular(10.0)), - borderSide: - BorderSide(color: Theme.of(context).primaryColor), - ) - //BorderRadius.all(Radius.circular(20)); - ), - validator: (value) { - print(value); - if (value == null) { - return 'Please enter some text'; - } - return null; + items: projectsList.map((item) { + return DropdownMenuItem( + child: Text( + '${item['Desciption']}', + ), + value: item['ID'], + ); + }).toList(), + onChanged: (value) { + userInfo.ProjectID = value; + }), + buildSizedBox(), + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Container( + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Checkbox( + value: true, + activeColor: Theme.of(context).primaryColor, + onChanged: (bool newValue) {}), + Text("Remember me", + style: TextStyle( + fontSize: 2 * SizeConfig.textMultiplier)), + ], + ), + ), + RaisedButton( + onPressed: () { + login(context, authProv); }, - items: projectsList.map((item) { - return DropdownMenuItem( - child: Text( - '${item['Desciption']}', - ), - value: item['ID'], - ); - }).toList(), - onChanged: (value) { - userInfo.ProjectID = value; - }), - SizedBox( - height: 20, - ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Container( + textColor: Colors.white, + elevation: 0.0, + padding: const EdgeInsets.all(0.0), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(10), + side: BorderSide(width: 0.5, color: Hexcolor('#CCCCCC'))), + child: Container( + padding: const EdgeInsets.all(10.0), + height:50, + width: SizeConfig.widthMultiplier * 30, child: Row( - mainAxisAlignment: MainAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Checkbox( - value: true, - activeColor: Theme.of(context).primaryColor, - onChanged: (bool newValue) {}), - Text("Remember me", + Text('LOGIN', style: TextStyle( - fontSize: 2 * SizeConfig.textMultiplier)), + fontSize: SizeConfig.isMobilePortrait + ? 2.3 * SizeConfig.textMultiplier + : 2.3 * SizeConfig.textMultiplier)), + Image.asset('assets/images/login_btn_arrow_icon.png') ], ), ), - RaisedButton( - onPressed: () { - login(context, authProv); - }, - textColor: Colors.white, - elevation: 0.0, - padding: const EdgeInsets.all(0.0), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(10), - side: - BorderSide(width: 0.5, color: Hexcolor('#CCCCCC'))), - child: Container( - padding: const EdgeInsets.all(10.0), - height: 5*SizeConfig.heightMultiplier, - width: constraints.maxWidth * 0.30, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text('LOGIN', - style: TextStyle( - fontSize: SizeConfig.isMobilePortrait?2*SizeConfig.textMultiplier: 2.3*SizeConfig.textMultiplier)), - Image.asset('assets/images/login_btn_arrow_icon.png') - ], - ), - ), - ) - ], - ), - ], - ), + ) + ], + ), + ], ), - ); - }); + ), + ); + } + + SizedBox buildSizedBox() { + return SizedBox( + height: 20, + ); } login(context, AuthProvider authProv) {