login ui changes

development-design-2.0
Sikander Saleem 3 years ago
parent d9bd5134c0
commit 0253eef6b1

@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart'; import 'package:flutter/widgets.dart';
extension WidgetExtensions on Widget { 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); 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 toExpanded({int flex = 1}) => Expanded(flex: flex, child: this);
// Widget toShimmer({bool isShow = true}) => isShow // Widget toShimmer({bool isShow = true}) => isShow
// ? Shimmer.fromColors( // ? Shimmer.fromColors(
// baseColor: Color(0xffe8eff0), // baseColor: Color(0xffe8eff0),
// highlightColor: Colors.white, // highlightColor: Colors.white,
// child: Container( // child: Container(
// color: Colors.white, // color: Colors.white,
// child: this, // child: this,
// ), // ),
// ) // )
// : Container( // : Container(
// child: this, // child: this,
// ); // );
} }

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

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

@ -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),
),
),
);
}
}
Loading…
Cancel
Save