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) {
screenHeight = constraints.maxHeight;
screenWidth = constraints.maxWidth;
_blockWidth = screenWidth / 100;
_blockHeight = screenHeight / 100;
if(constraints.maxWidth<= MAX_SMALL_SCREEN){
isMobile = true;
}
if (orientation == Orientation.portrait) { if (orientation == Orientation.portrait) {
screenHeight = constraints.maxHeight;
screenWidth = constraints.maxWidth;
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,110 +9,106 @@ class AuthHeader extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
var smallScreenSize = 660; var screen = Container(
return LayoutBuilder(builder: (ctx, constraints) { margin: SizeConfig.isMobile
bool isSmallScreen = constraints.maxWidth <= smallScreenSize; ? null
var screen = Container( : EdgeInsetsDirectional.fromSTEB(SizeConfig.screenWidth * 0.30,
margin: isSmallScreen SizeConfig.screenWidth * 0.1, 0, 0),
? null child: Column(
: EdgeInsetsDirectional.fromSTEB(constraints.maxWidth * 0.30, crossAxisAlignment: CrossAxisAlignment.start,
constraints.maxWidth * 0.1, 0, 0), children: <Widget>[
child: Column( Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[ children: <Widget>[
Column( Container(
crossAxisAlignment: CrossAxisAlignment.start, margin: SizeConfig.isMobile
children: <Widget>[ ? EdgeInsetsDirectional.fromSTEB(0, 50, 0, 0)
Container( : EdgeInsetsDirectional.fromSTEB(
margin: isSmallScreen SizeConfig.screenWidth * 0.13, 0, 0, 0),
? EdgeInsetsDirectional.fromSTEB(0, 50, 0, 0) child: Image.asset(
: EdgeInsetsDirectional.fromSTEB( 'assets/images/login_icon.png',
constraints.maxWidth * 0.13, 0, 0, 0), fit: BoxFit.cover,
child: Image.asset( height: SizeConfig.isMobile
'assets/images/login_icon.png', ? null
fit: BoxFit.cover, : SizeConfig.screenWidth * 0.09,
height:
isSmallScreen ? null : constraints.maxWidth * 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( Column(
constraints.maxWidth * 0.13, 0, 0, 0), crossAxisAlignment: CrossAxisAlignment.start,
child: Text( children: SizeConfig.isMobile
"LOGIN", ? <Widget>[
style: TextStyle( SizedBox(
fontSize: height: 10,
isSmallScreen ? 30 : constraints.maxWidth * 0.035, ),
fontWeight: FontWeight.w800), buildWelText(),
), buildDrSulText(context),
) ]
], : <Widget>[
), SizedBox(
Column( height: 10,
crossAxisAlignment: CrossAxisAlignment.start, ),
children: isSmallScreen Row(
? <Widget>[ mainAxisAlignment: MainAxisAlignment.start,
SizedBox( children: <Widget>[
height: 10, buildWelText(),
), buildDrSulText(context),
buildWelText(isSmallScreen, constraints), ],
buildDrSulText(isSmallScreen, constraints, context), ),
] ],
: <Widget>[ ),
SizedBox( buildDrAppContainer(context)
height: 10, ],
), ));
Row( return screen;
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
buildWelText(isSmallScreen, constraints),
buildDrSulText(isSmallScreen, constraints, context),
],
),
],
),
buildDrAppContainer(isSmallScreen, constraints, context)
],
));
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,85 +89,72 @@ 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( return Column(
builder: (ctx, constraints) { mainAxisAlignment: MainAxisAlignment.start,
int maxSmallScreenSize = MAX_SMALL_SCREEN; children: <Widget>[
bool isSmallScreen = Stack(children: [
constraints.maxWidth <= maxSmallScreenSize; Container(
return Column( decoration: BoxDecoration(
mainAxisAlignment: MainAxisAlignment.start, border: Border.all(
children: <Widget>[ color: Hexcolor('#CCCCCC'),
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: <Widget>[
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: <Widget>[
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),
)
],
),
)
],
), ),
), borderRadius: BorderRadius.circular(50)),
Positioned( margin: const EdgeInsets.fromLTRB(0, 20.0, 30, 0),
top: 7, child: Row(
right: 70, // mainAxisAlignment: MainAxisAlignment.spaceBetween,
child: Image.asset( children: <Widget>[
'assets/images/close_icon.png', Container(
fit: BoxFit.cover, height: 100,
)) width: 100,
]), decoration: new BoxDecoration(
buildVerificationTypeImageContainer(), // color: Colors.green, // border color
buildButtonsContainer( shape: BoxShape.circle,
isSmallScreen, constraints, context) 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: <Widget>[
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<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,24 +54,47 @@ class _LoginFormState extends State<LoginForm> {
} }
AuthProvider authProv = Provider.of<AuthProvider>(context); AuthProvider authProv = Provider.of<AuthProvider>(context);
return LayoutBuilder(builder: (ctx, constraints) { return Form(
var smallScreenSize = 660; key: loginFormKey,
bool isSmallScreen = constraints.maxWidth <= smallScreenSize; child: Container(
return Form( width: SizeConfig.widthMultiplier * 90,
key: loginFormKey, child: Column(
child: Container( crossAxisAlignment: CrossAxisAlignment.start,
width: constraints.maxWidth * 0.9, children: <Widget>[
child: Column( buildSizedBox(),
crossAxisAlignment: CrossAxisAlignment.start, TextFormField(
children: <Widget>[ keyboardType: TextInputType.number,
SizedBox( decoration: InputDecoration(
height: 20, prefixIcon: Image.asset('assets/images/user_id_icon.png'),
), hintText: 'Enter ID',
TextFormField( hintStyle: TextStyle(fontSize: 2 * SizeConfig.textMultiplier),
keyboardType: TextInputType.number, 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( decoration: InputDecoration(
prefixIcon: Image.asset('assets/images/user_id_icon.png'), prefixIcon: Image.asset('assets/images/password_icon.png'),
hintText: 'Enter ID', hintText: 'Enter Password',
hintStyle: hintStyle:
TextStyle(fontSize: 2 * SizeConfig.textMultiplier), TextStyle(fontSize: 2 * SizeConfig.textMultiplier),
enabledBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
@ -87,141 +110,110 @@ 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.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;
}, },
), items: projectsList.map((item) {
SizedBox( return DropdownMenuItem(
height: 20, child: Text(
), '${item['Desciption']}',
TextFormField( ),
obscureText: true, value: item['ID'],
decoration: InputDecoration( );
prefixIcon: }).toList(),
Image.asset('assets/images/password_icon.png'), onChanged: (value) {
hintText: 'Enter Password', userInfo.ProjectID = value;
hintStyle: }),
TextStyle(fontSize: 2 * SizeConfig.textMultiplier), buildSizedBox(),
enabledBorder: OutlineInputBorder( Row(
borderRadius: BorderRadius.all(Radius.circular(20)), mainAxisAlignment: MainAxisAlignment.spaceBetween,
borderSide: BorderSide(color: Hexcolor('#CCCCCC')), children: <Widget>[
), Container(
focusedBorder: OutlineInputBorder( child: Row(
borderRadius: BorderRadius.all(Radius.circular(10.0)), mainAxisAlignment: MainAxisAlignment.start,
borderSide: children: <Widget>[
BorderSide(color: Theme.of(context).primaryColor), Checkbox(
) value: true,
//BorderRadius.all(Radius.circular(20)); activeColor: Theme.of(context).primaryColor,
), onChanged: (bool newValue) {}),
validator: (value) { Text("Remember me",
if (value.isEmpty) { style: TextStyle(
return 'Please enter some text'; fontSize: 2 * SizeConfig.textMultiplier)),
} ],
return null; ),
}, ),
onSaved: (value) { RaisedButton(
userInfo.Password = value; onPressed: () {
}), login(context, authProv);
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) { textColor: Colors.white,
return DropdownMenuItem( elevation: 0.0,
child: Text( padding: const EdgeInsets.all(0.0),
'${item['Desciption']}', shape: RoundedRectangleBorder(
), borderRadius: BorderRadius.circular(10),
value: item['ID'], side: BorderSide(width: 0.5, color: Hexcolor('#CCCCCC'))),
); child: Container(
}).toList(), padding: const EdgeInsets.all(10.0),
onChanged: (value) { height:50,
userInfo.ProjectID = value; width: SizeConfig.widthMultiplier * 30,
}),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[ children: <Widget>[
Checkbox( Text('LOGIN',
value: true,
activeColor: Theme.of(context).primaryColor,
onChanged: (bool newValue) {}),
Text("Remember me",
style: TextStyle( 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: <Widget>[
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) { login(context, AuthProvider authProv) {

Loading…
Cancel
Save