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';
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');

@ -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: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
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: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
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
? <Widget>[
SizedBox(
height: 10,
),
buildWelText(isSmallScreen, constraints),
buildDrSulText(isSmallScreen, constraints, context),
]
: <Widget>[
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
buildWelText(isSmallScreen, constraints),
buildDrSulText(isSmallScreen, constraints, context),
],
),
],
),
buildDrAppContainer(isSmallScreen, constraints, context)
],
));
return screen;
});
)
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: SizeConfig.isMobile
? <Widget>[
SizedBox(
height: 10,
),
buildWelText(),
buildDrSulText(context),
]
: <Widget>[
SizedBox(
height: 10,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
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),
);
}
}

@ -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<KnownUserLogin> {
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: <Widget>[
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),
)
],
),
)
],
return Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
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: <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: 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(
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<KnownUserLogin> {
// 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<KnownUserLogin> {
"More verification Options".toUpperCase(),
style: TextStyle(
color: Theme.of(context).primaryColor,
fontSize:
isSmallScreen ? 20 : constraints.maxWidth * 0.029),
fontSize: 2.5 *SizeConfig.textMultiplier),
)),
),
SizedBox(

@ -54,24 +54,47 @@ class _LoginFormState extends State<LoginForm> {
}
AuthProvider authProv = Provider.of<AuthProvider>(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: <Widget>[
SizedBox(
height: 20,
),
TextFormField(
keyboardType: TextInputType.number,
return Form(
key: loginFormKey,
child: Container(
width: SizeConfig.widthMultiplier * 90,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
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<LoginForm> {
),
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: <Widget>[
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
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: <Widget>[
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: <Widget>[
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: <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) {

Loading…
Cancel
Save