diff --git a/lib/extensions/widget_extensions.dart b/lib/extensions/widget_extensions.dart index df4ced6..45a15f1 100644 --- a/lib/extensions/widget_extensions.dart +++ b/lib/extensions/widget_extensions.dart @@ -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, +// ); } diff --git a/lib/ui/screens/login_screen.dart b/lib/ui/screens/login_screen.dart index df026ca..1e2c873 100644 --- a/lib/ui/screens/login_screen.dart +++ b/lib/ui/screens/login_screen.dart @@ -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 { @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); + }) + ], ), ), ), diff --git a/lib/widgets/common_textfield_widget.dart b/lib/widgets/common_textfield_widget.dart index 55dee4b..38618fa 100644 --- a/lib/widgets/common_textfield_widget.dart +++ b/lib/widgets/common_textfield_widget.dart @@ -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 { ); } } + + diff --git a/lib/widgets/login_textfield_widget.dart b/lib/widgets/login_textfield_widget.dart new file mode 100644 index 0000000..bd86b25 --- /dev/null +++ b/lib/widgets/login_textfield_widget.dart @@ -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), + ), + ), + ); + } +} \ No newline at end of file