add size config in order to help dev build responsive desing

pull/12/head
Elham Rababah 6 years ago
parent 47a897a2c9
commit f75c6376b5

@ -1,3 +1,4 @@
import 'package:doctor_app_flutter/config/config.dart';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
class SizeConfig { class SizeConfig {
@ -13,30 +14,36 @@ class SizeConfig {
static bool isPortrait = true; static bool isPortrait = true;
static bool isMobilePortrait = false; static bool isMobilePortrait = false;
static bool isMobile = false;
void init(BoxConstraints constraints, Orientation orientation) { void init(BoxConstraints constraints, Orientation orientation) {
if (orientation == Orientation.portrait) {
screenHeight = constraints.maxHeight; screenHeight = constraints.maxHeight;
screenWidth = constraints.maxWidth; screenWidth = constraints.maxWidth;
_blockWidth = screenWidth / 100;
_blockHeight = screenHeight / 100;
if(constraints.maxWidth<= MAX_SMALL_SCREEN){
isMobile = true;
}
if (orientation == Orientation.portrait) {
isPortrait = true; isPortrait = true;
if (screenWidth < 450) { if (screenWidth < 450) {
isMobilePortrait = true; isMobilePortrait = true;
} }
textMultiplier = _blockHeight;
imageSizeMultiplier = _blockWidth;
} else { } else {
screenHeight = constraints.maxWidth;
screenWidth = constraints.maxHeight;
isPortrait = false; isPortrait = false;
isMobilePortrait = false; isMobilePortrait = false;
textMultiplier = _blockWidth;
imageSizeMultiplier = _blockHeight;
} }
_blockWidth = screenWidth / 100;
_blockHeight = screenHeight / 100;
textMultiplier = _blockHeight;
imageSizeMultiplier = _blockWidth;
heightMultiplier = _blockHeight; heightMultiplier = _blockHeight;
widthMultiplier = _blockWidth; widthMultiplier = _blockWidth;
print('screenWidth $screenWidth');
print('screenHeight $screenHeight');
print('textMultiplier $textMultiplier'); print('textMultiplier $textMultiplier');
print('imageSizeMultiplier $imageSizeMultiplier'); print('imageSizeMultiplier $imageSizeMultiplier');
print('heightMultiplier$heightMultiplier'); print('heightMultiplier$heightMultiplier');

@ -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/material.dart';
import 'package:flutter/rendering.dart'; import 'package:flutter/rendering.dart';
import 'package:flutter_device_type/flutter_device_type.dart';
class AuthHeader extends StatelessWidget { class AuthHeader extends StatelessWidget {
var userType; var userType;
@ -9,14 +9,11 @@ class AuthHeader extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
var smallScreenSize = 660;
return LayoutBuilder(builder: (ctx, constraints) {
bool isSmallScreen = constraints.maxWidth <= smallScreenSize;
var screen = Container( var screen = Container(
margin: isSmallScreen margin: SizeConfig.isMobile
? null ? null
: EdgeInsetsDirectional.fromSTEB(constraints.maxWidth * 0.30, : EdgeInsetsDirectional.fromSTEB(SizeConfig.screenWidth * 0.30,
constraints.maxWidth * 0.1, 0, 0), SizeConfig.screenWidth * 0.1, 0, 0),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
@ -24,30 +21,32 @@ class AuthHeader extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
Container( Container(
margin: isSmallScreen margin: SizeConfig.isMobile
? EdgeInsetsDirectional.fromSTEB(0, 50, 0, 0) ? EdgeInsetsDirectional.fromSTEB(0, 50, 0, 0)
: EdgeInsetsDirectional.fromSTEB( : EdgeInsetsDirectional.fromSTEB(
constraints.maxWidth * 0.13, 0, 0, 0), SizeConfig.screenWidth * 0.13, 0, 0, 0),
child: Image.asset( child: Image.asset(
'assets/images/login_icon.png', 'assets/images/login_icon.png',
fit: BoxFit.cover, fit: BoxFit.cover,
height: height: SizeConfig.isMobile
isSmallScreen ? null : constraints.maxWidth * 0.09, ? null
: SizeConfig.screenWidth * 0.09,
), ),
), ),
SizedBox( SizedBox(
height: 10, height: 10,
), ),
Container( Container(
margin: isSmallScreen margin: SizeConfig.isMobile
? null ? null
: EdgeInsetsDirectional.fromSTEB( : EdgeInsetsDirectional.fromSTEB(
constraints.maxWidth * 0.13, 0, 0, 0), SizeConfig.screenWidth * 0.13, 0, 0, 0),
child: Text( child: Text(
"LOGIN", "LOGIN",
style: TextStyle( style: TextStyle(
fontSize: fontSize: SizeConfig.isMobile
isSmallScreen ? 30 : constraints.maxWidth * 0.035, ? 30
: SizeConfig.screenWidth * 0.035,
fontWeight: FontWeight.w800), fontWeight: FontWeight.w800),
), ),
) )
@ -55,13 +54,13 @@ class AuthHeader extends StatelessWidget {
), ),
Column( Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: isSmallScreen children: SizeConfig.isMobile
? <Widget>[ ? <Widget>[
SizedBox( SizedBox(
height: 10, height: 10,
), ),
buildWelText(isSmallScreen, constraints), buildWelText(),
buildDrSulText(isSmallScreen, constraints, context), buildDrSulText(context),
] ]
: <Widget>[ : <Widget>[
SizedBox( SizedBox(
@ -70,49 +69,46 @@ class AuthHeader extends StatelessWidget {
Row( Row(
mainAxisAlignment: MainAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[ children: <Widget>[
buildWelText(isSmallScreen, constraints), buildWelText(),
buildDrSulText(isSmallScreen, constraints, context), buildDrSulText(context),
], ],
), ),
], ],
), ),
buildDrAppContainer(isSmallScreen, constraints, context) buildDrAppContainer(context)
], ],
)); ));
return screen; return screen;
});
} }
Container buildDrAppContainer( Container buildDrAppContainer(BuildContext context) {
bool isSmallScreen, BoxConstraints constraints, BuildContext context) {
return Container( return Container(
margin: isSmallScreen margin: SizeConfig.isMobile
? null ? null
: EdgeInsetsDirectional.fromSTEB( : EdgeInsetsDirectional.fromSTEB(
constraints.maxWidth * 0.13, 0, 0, 0), SizeConfig.screenWidth * 0.13, 0, 0, 0),
child: Text( child: Text(
"Doctor App", "Doctor App",
style: TextStyle( style: TextStyle(
fontSize: isSmallScreen ? 26 : constraints.maxWidth * 0.030, fontSize: SizeConfig.isMobile ? 26 : SizeConfig.screenWidth * 0.030,
fontWeight: FontWeight.w800, fontWeight: FontWeight.w800,
color: Theme.of(context).primaryColor), color: Theme.of(context).primaryColor),
), ),
); );
} }
Text buildDrSulText( Text buildDrSulText(BuildContext context) {
bool isSmallScreen, BoxConstraints constraints, BuildContext context) {
return Text( return Text(
'Dr Sulaiman Al Habib', 'Dr Sulaiman Al Habib',
style: TextStyle( style: TextStyle(
fontWeight: FontWeight.w800, fontWeight: FontWeight.w800,
fontSize: isSmallScreen ? 24 : constraints.maxWidth * 0.029, fontSize: SizeConfig.isMobile ? 24 : SizeConfig.screenWidth * 0.029,
color: Theme.of(context).primaryColor, color: Theme.of(context).primaryColor,
), ),
); );
} }
Text buildWelText(bool isSmallScreen, BoxConstraints constraints) { Text buildWelText() {
String text = 'Welcome to '; String text = 'Welcome to ';
if (userType == loginType.unknownUser) { if (userType == loginType.unknownUser) {
text = 'Welcome Back to '; text = 'Welcome Back to ';
@ -121,7 +117,7 @@ class AuthHeader extends StatelessWidget {
return Text( return Text(
text, text,
style: TextStyle( style: TextStyle(
fontSize: isSmallScreen ? 24 : constraints.maxWidth * 0.029), fontSize: SizeConfig.isMobile ? 24 : SizeConfig.screenWidth * 0.029),
); );
} }
} }

@ -1,17 +1,18 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
import 'package:hexcolor/hexcolor.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:local_auth/local_auth.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart'; import 'package:shared_preferences/shared_preferences.dart';
import '../../config/config.dart'; import '../../config/config.dart';
import '../../config/size_config.dart';
import '../../providers/auth_provider.dart'; import '../../providers/auth_provider.dart';
import '../../routes.dart'; import '../../routes.dart';
import '../../util/dr_app_shared_pref.dart'; import '../../util/dr_app_shared_pref.dart';
import '../../util/dr_app_toast_msg.dart'; import '../../util/dr_app_toast_msg.dart';
import '../../widgets/shared/dr_app_circular_progress_Indeicator.dart'; import '../../widgets/shared/dr_app_circular_progress_Indeicator.dart';
import 'package:local_auth/error_codes.dart' as auth_error;
DrAppSharedPreferances sharedPref = new DrAppSharedPreferances(); DrAppSharedPreferances sharedPref = new DrAppSharedPreferances();
DrAppToastMsg toastMsg = DrAppToastMsg(); DrAppToastMsg toastMsg = DrAppToastMsg();
@ -88,11 +89,6 @@ class _KnownUserLoginState extends State<KnownUserLogin> {
if (snapshot.hasError) { if (snapshot.hasError) {
return Text('Error: ${snapshot.error}'); return Text('Error: ${snapshot.error}');
} else { } else {
return LayoutBuilder(
builder: (ctx, constraints) {
int maxSmallScreenSize = MAX_SMALL_SCREEN;
bool isSmallScreen =
constraints.maxWidth <= maxSmallScreenSize;
return Column( return Column(
mainAxisAlignment: MainAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[ children: <Widget>[
@ -113,8 +109,8 @@ class _KnownUserLoginState extends State<KnownUserLogin> {
decoration: new BoxDecoration( decoration: new BoxDecoration(
// color: Colors.green, // border color // color: Colors.green, // border color
shape: BoxShape.circle, shape: BoxShape.circle,
border: Border.all( border:
color: Hexcolor('#CCCCCC'))), Border.all(color: Hexcolor('#CCCCCC'))),
child: CircleAvatar( child: CircleAvatar(
child: Image.asset( child: Image.asset(
'assets/images/dr_avatar.png', 'assets/images/dr_avatar.png',
@ -126,26 +122,21 @@ class _KnownUserLoginState extends State<KnownUserLogin> {
vertical: 3, horizontal: 15), vertical: 3, horizontal: 15),
child: Column( child: Column(
// mainAxisAlignment: MainAxisAlignment.start, // mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: crossAxisAlignment: CrossAxisAlignment.start,
CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
Text( Text(
_loggedUser['List_MemberInformation'][0] _loggedUser['List_MemberInformation'][0]
['MemberName'], ['MemberName'],
style: TextStyle( style: TextStyle(
color: Hexcolor('515A5D'), color: Hexcolor('515A5D'),
fontSize: isSmallScreen fontSize: 2.5 *SizeConfig.textMultiplier,
? 24
: constraints.maxWidth * 0.029,
fontWeight: FontWeight.w800), fontWeight: FontWeight.w800),
), ),
Text( Text(
'ENT Spec', 'ENT Spec',
style: TextStyle( style: TextStyle(
color: Hexcolor('515A5D'), color: Hexcolor('515A5D'),
fontSize: isSmallScreen fontSize: 1.5 *SizeConfig.textMultiplier),
? 20
: constraints.maxWidth * 0.025),
) )
], ],
), ),
@ -162,12 +153,9 @@ class _KnownUserLoginState extends State<KnownUserLogin> {
)) ))
]), ]),
buildVerificationTypeImageContainer(), buildVerificationTypeImageContainer(),
buildButtonsContainer( buildButtonsContainer(context)
isSmallScreen, constraints, context)
], ],
); );
},
);
} }
} }
}); });
@ -187,8 +175,7 @@ class _KnownUserLoginState extends State<KnownUserLogin> {
} }
// //
Container buildButtonsContainer( Container buildButtonsContainer(BuildContext context) {
bool isSmallScreen, BoxConstraints constraints, BuildContext context) {
return Container( return Container(
margin: EdgeInsetsDirectional.fromSTEB(0, 0, 30, 0), margin: EdgeInsetsDirectional.fromSTEB(0, 0, 30, 0),
width: double.infinity, width: double.infinity,
@ -207,8 +194,7 @@ class _KnownUserLoginState extends State<KnownUserLogin> {
// textAlign: TextAlign.center, // textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
color: Colors.white, color: Colors.white,
fontSize: fontSize: 2.5 *SizeConfig.textMultiplier),
isSmallScreen ? 20 : constraints.maxWidth * 0.029),
), ),
), ),
), ),
@ -234,8 +220,7 @@ class _KnownUserLoginState extends State<KnownUserLogin> {
"More verification Options".toUpperCase(), "More verification Options".toUpperCase(),
style: TextStyle( style: TextStyle(
color: Theme.of(context).primaryColor, color: Theme.of(context).primaryColor,
fontSize: fontSize: 2.5 *SizeConfig.textMultiplier),
isSmallScreen ? 20 : constraints.maxWidth * 0.029),
)), )),
), ),
SizedBox( SizedBox(

@ -54,26 +54,20 @@ class _LoginFormState extends State<LoginForm> {
} }
AuthProvider authProv = Provider.of<AuthProvider>(context); AuthProvider authProv = Provider.of<AuthProvider>(context);
return LayoutBuilder(builder: (ctx, constraints) {
var smallScreenSize = 660;
bool isSmallScreen = constraints.maxWidth <= smallScreenSize;
return Form( return Form(
key: loginFormKey, key: loginFormKey,
child: Container( child: Container(
width: constraints.maxWidth * 0.9, width: SizeConfig.widthMultiplier * 90,
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
SizedBox( buildSizedBox(),
height: 20,
),
TextFormField( TextFormField(
keyboardType: TextInputType.number, keyboardType: TextInputType.number,
decoration: InputDecoration( decoration: InputDecoration(
prefixIcon: Image.asset('assets/images/user_id_icon.png'), prefixIcon: Image.asset('assets/images/user_id_icon.png'),
hintText: 'Enter ID', hintText: 'Enter ID',
hintStyle: hintStyle: TextStyle(fontSize: 2 * SizeConfig.textMultiplier),
TextStyle(fontSize: 2 * SizeConfig.textMultiplier),
enabledBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(20)), borderRadius: BorderRadius.all(Radius.circular(20)),
borderSide: BorderSide(color: Hexcolor('#CCCCCC')), borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
@ -87,7 +81,7 @@ class _LoginFormState extends State<LoginForm> {
), ),
validator: (value) { validator: (value) {
if (value.isEmpty) { if (value.isEmpty) {
return 'Please enter some text'; return 'Please enter your ID';
} }
return null; return null;
}, },
@ -95,14 +89,11 @@ class _LoginFormState extends State<LoginForm> {
userInfo.UserID = value; userInfo.UserID = value;
}, },
), ),
SizedBox( buildSizedBox(),
height: 20,
),
TextFormField( TextFormField(
obscureText: true, obscureText: true,
decoration: InputDecoration( decoration: InputDecoration(
prefixIcon: prefixIcon: Image.asset('assets/images/password_icon.png'),
Image.asset('assets/images/password_icon.png'),
hintText: 'Enter Password', hintText: 'Enter Password',
hintStyle: hintStyle:
TextStyle(fontSize: 2 * SizeConfig.textMultiplier), TextStyle(fontSize: 2 * SizeConfig.textMultiplier),
@ -119,24 +110,21 @@ class _LoginFormState extends State<LoginForm> {
), ),
validator: (value) { validator: (value) {
if (value.isEmpty) { if (value.isEmpty) {
return 'Please enter some text'; return 'Please enter your Password';
} }
return null; return null;
}, },
onSaved: (value) { onSaved: (value) {
userInfo.Password = value; userInfo.Password = value;
}), }),
SizedBox( buildSizedBox(),
height: 20,
),
DropdownButtonFormField( DropdownButtonFormField(
value: userInfo.ProjectID, value: userInfo.ProjectID,
isExpanded: false, isExpanded: false,
decoration: InputDecoration( decoration: InputDecoration(
contentPadding: EdgeInsets.all(10), contentPadding: EdgeInsets.all(10),
isDense: true, isDense: true,
prefixIcon: prefixIcon: Image.asset('assets/images/hospital_icon.png'),
Image.asset('assets/images/hospital_icon.png'),
// hintText: 'Enter Password', // hintText: 'Enter Password',
hintStyle: hintStyle:
TextStyle(fontSize: 2 * SizeConfig.textMultiplier), TextStyle(fontSize: 2 * SizeConfig.textMultiplier),
@ -154,7 +142,7 @@ class _LoginFormState extends State<LoginForm> {
validator: (value) { validator: (value) {
print(value); print(value);
if (value == null) { if (value == null) {
return 'Please enter some text'; return 'Please select your project';
} }
return null; return null;
}, },
@ -169,9 +157,7 @@ class _LoginFormState extends State<LoginForm> {
onChanged: (value) { onChanged: (value) {
userInfo.ProjectID = value; userInfo.ProjectID = value;
}), }),
SizedBox( buildSizedBox(),
height: 20,
),
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[ children: <Widget>[
@ -198,18 +184,19 @@ class _LoginFormState extends State<LoginForm> {
padding: const EdgeInsets.all(0.0), padding: const EdgeInsets.all(0.0),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
side: side: BorderSide(width: 0.5, color: Hexcolor('#CCCCCC'))),
BorderSide(width: 0.5, color: Hexcolor('#CCCCCC'))),
child: Container( child: Container(
padding: const EdgeInsets.all(10.0), padding: const EdgeInsets.all(10.0),
height: 5*SizeConfig.heightMultiplier, height:50,
width: constraints.maxWidth * 0.30, width: SizeConfig.widthMultiplier * 30,
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[ children: <Widget>[
Text('LOGIN', Text('LOGIN',
style: TextStyle( style: TextStyle(
fontSize: SizeConfig.isMobilePortrait?2*SizeConfig.textMultiplier: 2.3*SizeConfig.textMultiplier)), fontSize: SizeConfig.isMobilePortrait
? 2.3 * SizeConfig.textMultiplier
: 2.3 * SizeConfig.textMultiplier)),
Image.asset('assets/images/login_btn_arrow_icon.png') Image.asset('assets/images/login_btn_arrow_icon.png')
], ],
), ),
@ -221,7 +208,12 @@ class _LoginFormState extends State<LoginForm> {
), ),
), ),
); );
}); }
SizedBox buildSizedBox() {
return SizedBox(
height: 20,
);
} }
login(context, AuthProvider authProv) { login(context, AuthProvider authProv) {

Loading…
Cancel
Save