login, registration, contact us

development-design-2.0
Sikander Saleem 3 years ago
parent f9706254d5
commit e3741d5907

@ -54,14 +54,9 @@ class _ContactUsScreenState extends State<ContactUsScreen> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait; bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
return Scaffold( Widget _header = SizedBox(height: isPortrait ? null : double.infinity, width: double.infinity, child: CommonHeader("اتصل بنا", "assets/icons/new/contact_bg.jpg", Color(0xff416A6C)));
backgroundColor: ColorConsts.greyF4Color,
body: SingleChildScrollView( Widget _inputDataList = Column(
physics: BouncingScrollPhysics(),
child: Column(
children: [
CommonHeader("اتصل بنا", "assets/icons/new/contact_bg.jpg", Color(0xff416A6C)),
Column(
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
@ -129,9 +124,30 @@ class _ContactUsScreenState extends State<ContactUsScreen> {
), ),
), ),
], ],
).paddingAll(35), );
return Scaffold(
backgroundColor: ColorConsts.greyF4Color,
body: isPortrait
? SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Column(
children: [
_header,
_inputDataList.paddingAll(35),
], ],
), ),
)
: Row(
children: [
Expanded(child: _header, flex: 4),
Expanded(
child: SingleChildScrollView(
physics: BouncingScrollPhysics(),
padding: EdgeInsets.all(36),
child: _inputDataList,
),
flex: 6)
],
), ),
); );
} }

@ -86,27 +86,7 @@ class _LoginScreenState extends State<LoginScreen> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait; bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
return Scaffold( Widget _options = Row(
backgroundColor: ColorConsts.darkText,
body: SafeArea(
child: Directionality(
textDirection: TextDirection.rtl,
child: SingleChildScrollView(
padding: EdgeInsets.only(top: isPortrait ? 140 : 40, bottom: 50, left: 40, right: 40),
physics: BouncingScrollPhysics(),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Image.asset("assets/icons/new/Tangeem-logo-W.png", width: 136, height: 74),
50.height,
"تسجيل الدخول".toText(18),
32.height,
LoginTextFieldWidget(hint: "البريد الإلكتروني", controller: _emailController, iconData: Icons.email_rounded),
20.height,
LoginTextFieldWidget(hint: "كلمة المرور", controller: _passwordController, iconData: Icons.lock_rounded, isPassword: true),
20.height,
Row(
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
@ -130,11 +110,11 @@ class _LoginScreenState extends State<LoginScreen> {
Navigator.pushNamed(context, ForgotPasswordScreen.routeName); Navigator.pushNamed(context, ForgotPasswordScreen.routeName);
}) })
], ],
), );
20.height,
SizedBox( Widget _loginButton = SizedBox(
width: double.infinity, width: double.infinity,
height: 50, height: isPortrait ? 50 : 45,
child: TextButton( child: TextButton(
onPressed: () { onPressed: () {
if (_emailController.text.length < 1) { if (_emailController.text.length < 1) {
@ -160,19 +140,11 @@ class _LoginScreenState extends State<LoginScreen> {
), ),
child: Text("تسجيل الدخول"), child: Text("تسجيل الدخول"),
), ),
), );
20.height,
Row( Widget _registrationButton = SizedBox(
children: [
Divider(height: 1, color: Colors.white).expanded,
"ليس لديك حساب؟".toText(14).paddingOnly(left: 24, right: 24),
Divider(height: 1, color: Colors.white).expanded,
],
),
20.height,
SizedBox(
width: double.infinity, width: double.infinity,
height: 48, height: isPortrait ? 48 : 32,
child: TextButton( child: TextButton(
onPressed: () { onPressed: () {
Navigator.pushNamed(context, RegistrationScreen.routeName); Navigator.pushNamed(context, RegistrationScreen.routeName);
@ -180,13 +152,76 @@ class _LoginScreenState extends State<LoginScreen> {
style: TextButton.styleFrom( style: TextButton.styleFrom(
backgroundColor: Colors.transparent, backgroundColor: Colors.transparent,
foregroundColor: Colors.white, foregroundColor: Colors.white,
textStyle: TextStyle(fontSize: 18), padding: EdgeInsets.zero,
textStyle: TextStyle(fontSize: isPortrait ? 18 : 16),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0), side: BorderSide(color: Colors.white, width: 1)), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0), side: BorderSide(color: Colors.white, width: 1)),
), ),
child: Text("إنشاء حساب جديد"), child: Text("إنشاء حساب جديد"),
), ),
), );
Widget _registrationText = Row(
children: [
Divider(height: 1, color: Colors.white).expanded,
"ليس لديك حساب؟".toText(14).paddingOnly(left: 24, right: 24),
Divider(height: 1, color: Colors.white).expanded,
],
);
return Scaffold(
backgroundColor: ColorConsts.darkText,
body: SafeArea(
child: Directionality(
textDirection: TextDirection.rtl,
child: SingleChildScrollView(
padding: EdgeInsets.only(top: isPortrait ? 140 : 40, bottom: 50, left: 40, right: 40),
physics: BouncingScrollPhysics(),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Image.asset("assets/icons/new/Tangeem-logo-W.png", width: isPortrait ? 136 : 100, height: 74),
isPortrait ? 50.height : 0.height,
"تسجيل الدخول".toText(isPortrait ? 18 : 20),
32.height,
if (isPortrait) ...[
LoginTextFieldWidget(hint: "البريد الإلكتروني", controller: _emailController, iconData: Icons.email_rounded),
20.height,
LoginTextFieldWidget(hint: "كلمة المرور", controller: _passwordController, iconData: Icons.lock_rounded, isPassword: true),
20.height,
_options,
20.height,
_loginButton,
20.height,
_registrationText,
20.height,
_registrationButton,
46.height, 46.height,
] else ...[
Row(
children: [
Column(
children: [
LoginTextFieldWidget(hint: "البريد الإلكتروني", controller: _emailController, iconData: Icons.email_rounded),
20.height,
LoginTextFieldWidget(hint: "كلمة المرور", controller: _passwordController, iconData: Icons.lock_rounded, isPassword: true),
],
).expanded,
24.width,
Column(
children: [
_loginButton,
14.height,
_registrationText,
10.height,
_registrationButton,
],
).expanded
],
).paddingOnly(left: 42, right: 42),
16.height,
_options.paddingOnly(left: 42, right: 42),
],
Column( Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [

@ -88,22 +88,9 @@ class _RegistrationScreenState extends State<RegistrationScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
backgroundColor: ColorConsts.greyF8Color,
body: SingleChildScrollView( Widget _header = Column(
padding: EdgeInsets.only(top: 100, bottom: 24),
physics: BouncingScrollPhysics(),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Image.asset("assets/icons/new/Tangeem-logo.png", width: 116, height: 62),
30.height,
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(20.0), color: Colors.white),
margin: EdgeInsets.only(left: 24, right: 24, top: 24, bottom: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Padding( Padding(
@ -111,10 +98,10 @@ class _RegistrationScreenState extends State<RegistrationScreen> {
child: SvgPicture.asset("assets/logos/tangheem_logo.svg", width: 72, height: 72), child: SvgPicture.asset("assets/logos/tangheem_logo.svg", width: 72, height: 72),
), ),
"انشاء حساب جديد".toText(18, color: ColorConsts.darkText), "انشاء حساب جديد".toText(18, color: ColorConsts.darkText),
"قم بتعبئة بيانات طلب انشاء الحساب و ستصلك رسالة تأكيد, ومن ثم يمكنك الدخول لحسابك الجديد" ],
.toText(13, color: ColorConsts.grey9FColor, textAlign: TextAlign.center) );
.paddingOnly(left: 24, right: 24, top: 18, bottom: 18),
Column( Widget _dataInput = Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
CommonTextFieldWidget(hint: "البريد الإلكتروني", controller: _emailController, isEmail: true), CommonTextFieldWidget(hint: "البريد الإلكتروني", controller: _emailController, isEmail: true),
@ -143,27 +130,28 @@ class _RegistrationScreenState extends State<RegistrationScreen> {
CommonTextFieldWidget(hint: "تأكيد كلمة المرور", controller: _confirmPasswordController), CommonTextFieldWidget(hint: "تأكيد كلمة المرور", controller: _confirmPasswordController),
Row( Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
InkWell( Icon(_isAccept ? Icons.check_box_rounded : Icons.check_box_outline_blank_rounded, color: ColorConsts.borderDark2Text, size: 17),
onTap: () {
setState(() {
_isAccept = !_isAccept;
});
},
child: Icon(_isAccept ? Icons.check_box_rounded : Icons.check_box_outline_blank_rounded, color: ColorConsts.borderDark2Text, size: 17),
//child: SvgPicture.asset(_isAccept ? "assets/icons/checkOn.svg" : "assets/icons/checkOff.svg", width: 16, height: 16,color: ColorConsts.borderDarkText),
),
SizedBox(width: 8), SizedBox(width: 8),
"جميع البيانات صحيحة ضمن اتفاقية الاستخدام".toText(14, color: ColorConsts.darkText).expanded, "جميع البيانات صحيحة ضمن اتفاقية الاستخدام".toText(14, color: ColorConsts.darkText).expanded,
], ],
).paddingOnly(left: 30, right: 30, top: 30, bottom: 26), ).onPress(() {
], setState(() {
).paddingOnly(left: 12, right: 12), _isAccept = !_isAccept;
});
}).paddingOnly(top: 24, bottom: 24, left: 16, right: 16),
], ],
), );
),
SizedBox( List<Widget> _dataList = [
_header,
"قم بتعبئة بيانات طلب انشاء الحساب و ستصلك رسالة تأكيد, ومن ثم يمكنك الدخول لحسابك الجديد"
.toText(13, color: ColorConsts.grey9FColor, textAlign: TextAlign.center)
.paddingOnly(left: 24, right: 24, top: 18, bottom: 18),
_dataInput.paddingOnly(left: 12, right: 12),
];
Widget _registrationButton = SizedBox(
width: double.infinity, width: double.infinity,
height: 50, height: 50,
child: TextButton( child: TextButton(
@ -228,8 +216,9 @@ class _RegistrationScreenState extends State<RegistrationScreen> {
), ),
child: Text("انشئ حسابك"), child: Text("انشئ حسابك"),
), ),
).paddingOnly(left: 35, right: 35, bottom: 35), );
Column(
Widget _contactUsButton = Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
SvgPicture.asset("assets/icons/new/contact_us.svg", width: 26, height: 24, color: ColorConsts.greyC4Color), SvgPicture.asset("assets/icons/new/contact_us.svg", width: 26, height: 24, color: ColorConsts.greyC4Color),
@ -238,10 +227,65 @@ class _RegistrationScreenState extends State<RegistrationScreen> {
], ],
).onPress(() { ).onPress(() {
Navigator.pushNamed(context, ContactUsScreen.routeName); Navigator.pushNamed(context, ContactUsScreen.routeName);
}) });
return isPortrait
? Scaffold(
backgroundColor: ColorConsts.greyF8Color,
body: SingleChildScrollView(
padding: EdgeInsets.only(top: 100, bottom: 24),
physics: BouncingScrollPhysics(),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Image.asset("assets/icons/new/Tangeem-logo.png", width: 116, height: 62),
30.height,
Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(20.0), color: Colors.white),
margin: EdgeInsets.only(left: 24, right: 24, top: 24, bottom: 20),
child: Column(crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: _dataList),
),
_registrationButton.paddingOnly(left: 35, right: 35, bottom: 35),
_contactUsButton,
],
),
),
)
: Row(
children: [
Expanded(child: Image.asset("assets/icons/new/Tangeem-logo.png", width: 116, height: 62).paddingOnly(right: 70), flex: 3),
Expanded(
child: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(20.0), color: Colors.white),
margin: EdgeInsets.all(24),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Expanded(child: _header, flex: 2),
Expanded(
child: SingleChildScrollView(
padding: EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
"قم بتعبئة بيانات طلب انشاء الحساب و ستصلك رسالة تأكيد, ومن ثم يمكنك الدخول لحسابك الجديد".toText(14, color: ColorConsts.grey9FColor, textAlign: TextAlign.center),
24.height,
_dataInput,
_registrationButton,
24.height,
_contactUsButton,
], ],
), ),
), ),
flex: 4),
],
),
),
flex: 7),
],
); );
} }

@ -13,6 +13,8 @@ class LoginTextFieldWidget extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
return isForChangePassword return isForChangePassword
? SizedBox( ? SizedBox(
height: 45, height: 45,
@ -71,7 +73,7 @@ class LoginTextFieldWidget extends StatelessWidget {
maxLines: 1, maxLines: 1,
scrollPhysics: BouncingScrollPhysics(), scrollPhysics: BouncingScrollPhysics(),
decoration: InputDecoration( decoration: InputDecoration(
contentPadding: EdgeInsets.only(top: 19, bottom: 19, right: 32, left: 4), contentPadding: EdgeInsets.only(top: isPortrait ? 19 : 0, bottom: isPortrait ? 19 : 0, right: 32, left: 4),
alignLabelWithHint: true, alignLabelWithHint: true,
fillColor: Color(0xff598A8D), fillColor: Color(0xff598A8D),
filled: true, filled: true,

Loading…
Cancel
Save