Haroon6138
/
tangheem
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

login ui changes

Browse Source
development-design-2.0
Sikander Saleem 3 years ago
parent d9bd5134c0
commit 0253eef6b1
4 changed files with 176 additions and 130 deletions
Show Stats Download Patch File Download Diff File

29
lib/extensions/widget_extensions.dart
Unescape Escape View File

@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
extension WidgetExtensions on Widget {
Widget onPress(VoidCallback onTap) => InkWell(onTap: onTap, child: this);
Widget onPress(VoidCallback onTap) => InkWell(onTap: onTap, child: this, splashColor: Colors.transparent, highlightColor: Colors.transparent);
Widget get expanded => Expanded(child: this);
@ -17,19 +17,16 @@ extension WidgetExtensions on Widget {
Widget toExpanded({int flex = 1}) => Expanded(flex: flex, child: this);
// Widget toShimmer({bool isShow = true}) => isShow
// ? Shimmer.fromColors(
// baseColor: Color(0xffe8eff0),
// highlightColor: Colors.white,
// child: Container(
// color: Colors.white,
// child: this,
// ),
// )
// : Container(
// child: this,
// );
// Widget toShimmer({bool isShow = true}) => isShow
// ? Shimmer.fromColors(
// baseColor: Color(0xffe8eff0),
// highlightColor: Colors.white,
// child: Container(
// color: Colors.white,
// child: this,
// ),
// )
// : Container(
// child: this,
// );
}

215
lib/ui/screens/login_screen.dart
Unescape Escape View File

@ -8,11 +8,14 @@ import 'package:tangheem/app_state/app_state.dart';
import 'package:tangheem/classes/colors.dart';
import 'package:tangheem/classes/consts.dart';
import 'package:tangheem/classes/utils.dart';
import 'package:tangheem/extensions/int_extensions.dart';
import 'package:tangheem/extensions/string_extensions.dart';
import 'package:tangheem/extensions/widget_extensions.dart';
import 'package:tangheem/models/authentication_user_model.dart';
import 'package:tangheem/ui/screens/contact_us_screen.dart';
import 'package:tangheem/ui/screens/forgot_password_screen.dart';
import 'package:tangheem/ui/screens/registration_screen.dart';
import 'package:tangheem/widgets/common_textfield_widget.dart';
import 'package:tangheem/widgets/login_textfield_widget.dart';
class LoginScreen extends StatefulWidget {
static const String routeName = "/login";
@ -82,133 +85,117 @@ class _LoginScreenState extends State<LoginScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: ColorConsts.secondaryWhite,
backgroundColor: ColorConsts.darkText,
body: SafeArea(
child: Directionality(
textDirection: TextDirection.rtl,
child: SingleChildScrollView(
padding: EdgeInsets.all(21.0),
padding: EdgeInsets.only(top: 140, bottom: 50, left: 40, right: 40),
physics: BouncingScrollPhysics(),
child: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(8.0), color: Colors.white),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: EdgeInsets.only(top: 24, bottom: 24),
child: SvgPicture.asset("assets/logos/tangheem_logo.svg", width: 100, height: 100),
),
Text(
"تسجيل الدخول",
style: TextStyle(fontSize: 22, color: ColorConsts.primaryBlue),
),
Container(
margin: EdgeInsets.only(top: 16),
width: double.infinity,
padding: EdgeInsets.all(32.0),
color: ColorConsts.primaryBlue,
child: Column(
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,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
CommonTextFieldWidget(hint: "البريد الإلكتروني", controller: _emailController, prefixIcon: "assets/icons/email.svg"),
SizedBox(height: 16),
CommonTextFieldWidget(hint: "كلمة المرور", controller: _passwordController, isPassword: true, prefixIcon: "assets/icons/password.svg"),
SizedBox(height: 16),
SizedBox(
width: double.infinity,
height: 50,
child: TextButton(
onPressed: () {
if (_emailController.text.length < 1) {
Utils.showToast("يرجى إدخال البريد الإلكتروني");
return;
} else if (!_emailController.text.isValidEmail()) {
Utils.showToast("صيغة البريد الإلكتروني خاطئة");
return;
}
if (_passwordController.text.length < 1) {
Utils.showToast("يرجى إدخال كلمة المرور");
return;
}
performLogin(_emailController.text, _passwordController.text);
},
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor: ColorConsts.secondaryPink,
textStyle: TextStyle(fontSize: 16, fontFamily: "DroidKufi"),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6.0),
),
),
child: Text("تسجيل الدخول"),
),
),
SizedBox(height: 8),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
"تذكرني",
style: TextStyle(color: Colors.white),
),
SizedBox(width: 8),
InkWell(
onTap: () {
setState(() {
_isRemember = !_isRemember;
});
},
child: SvgPicture.asset(_isRemember ? "assets/icons/checkOn.svg" : "assets/icons/checkOff.svg", width: 16, height: 16))
],
),
InkWell(
onTap: () {
Navigator.pushNamed(context, ForgotPasswordScreen.routeName);
},
child: Text(
"نسيت كلمة المرور؟",
style: TextStyle(color: Colors.white),
),
),
],
InkWell(
onTap: () {
setState(() {
_isRemember = !_isRemember;
});
},
child: Icon(_isRemember ? 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),
),
10.width,
"تذكرني".toText(14),
],
),
"هل نسيت كلمة المرور؟".toText(14).onPress(() {
Navigator.pushNamed(context, ForgotPasswordScreen.routeName);
})
],
),
20.height,
SizedBox(
width: double.infinity,
height: 50,
child: TextButton(
onPressed: () {
if (_emailController.text.length < 1) {
Utils.showToast("يرجى إدخال البريد الإلكتروني");
return;
} else if (!_emailController.text.isValidEmail()) {
Utils.showToast("صيغة البريد الإلكتروني خاطئة");
return;
}
if (_passwordController.text.length < 1) {
Utils.showToast("يرجى إدخال كلمة المرور");
return;
}
performLogin(_emailController.text, _passwordController.text);
},
style: TextButton.styleFrom(
backgroundColor: ColorConsts.brownLightColor,
foregroundColor: Colors.white,
textStyle: TextStyle(fontSize: 18),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
child: Text("تسجيل الدخول"),
),
InkWell(
onTap: () {
),
20.height,
Row(
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,
height: 48,
child: TextButton(
onPressed: () {
Navigator.pushNamed(context, RegistrationScreen.routeName);
},
child: Container(
height: 50,
alignment: Alignment.center,
decoration: BoxDecoration(
color: ColorConsts.tertiaryPurple,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(8),
bottomRight: Radius.circular(8),
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
" حساب جديد",
style: TextStyle(fontSize: 14, color: Colors.white),
),
Icon(Icons.arrow_forward_ios, color: Colors.white, size: 12),
],
),
style: TextButton.styleFrom(
backgroundColor: Colors.transparent,
foregroundColor: Colors.white,
textStyle: TextStyle(fontSize: 18),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0), side: BorderSide(color: Colors.white, width: 1)),
),
)
],
),
child: Text("إنشاء حساب جديد"),
),
),
46.height,
Column(
mainAxisSize: MainAxisSize.min,
children: [
SvgPicture.asset("assets/icons/new/contact_us.svg", width: 26, height: 24, color: ColorConsts.greyC4Color),
8.height,
"اتصل بنا".toText(14, color: ColorConsts.greyC4Color),
],
).onPress(() {
Navigator.pushNamed(context, ContactUsScreen.routeName);
})
],
),
),
),

3
lib/widgets/common_textfield_widget.dart
Unescape Escape View File

@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:tangheem/classes/colors.dart';
import 'package:tangheem/extensions/int_extensions.dart';
import 'package:tangheem/extensions/string_extensions.dart';
import 'package:tangheem/extensions/widget_extensions.dart';
@ -136,3 +137,5 @@ class _CommonTextFieldWidgetState extends State<CommonTextFieldWidget> {
);
}
}

59
lib/widgets/login_textfield_widget.dart
Unescape Escape View File

@ -0,0 +1,59 @@
import 'package:flutter/material.dart';
import 'package:tangheem/extensions/int_extensions.dart';
import 'package:tangheem/extensions/widget_extensions.dart';
class LoginTextFieldWidget extends StatelessWidget {
final String hint;
final TextEditingController controller;
final bool isPassword;
final IconData iconData;
LoginTextFieldWidget({@required this.hint, @required this.controller, this.isPassword = false, @required this.iconData, Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return TextField(
textAlignVertical: TextAlignVertical.center,
controller: controller,
obscureText: isPassword,
textInputAction: TextInputAction.next,
style: TextStyle(color: Colors.white, fontSize: 14, fontFamily: "Montserrat"),
cursorColor: Colors.white,
maxLines: 1,
scrollPhysics: BouncingScrollPhysics(),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(top: 19, bottom: 19, right: 32, left: 4),
alignLabelWithHint: true,
fillColor: Color(0xff598A8D),
filled: true,
hintStyle: TextStyle(color: Colors.white, fontSize: 14, fontFamily: "Montserrat"),
hintText: hint,
suffixIcon: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 1,
height: 14,
color: Colors.white.withOpacity(.6),
),
14.width,
Icon(
iconData,
color: Colors.white.withOpacity(0.6),
size: 20,
),
],
).paddingOnly(left: 24),
suffixIconConstraints: BoxConstraints(),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.transparent, width: 1),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.transparent, width: 1),
),
),
);
}
}
Write Preview
Loading…
Cancel
Save