login, registration, contact us

3 years ago · e3741d5907
parent f9706254d5
commit e3741d5907
4 changed files with 405 additions and 308 deletions
--- a/lib/ui/screens/contact_us_screen.dart
+++ b/lib/ui/screens/contact_us_screen.dart
@ -54,14 +54,9 @@ class _ContactUsScreenState extends State<ContactUsScreen> {
  Widget build(BuildContext context) {
    bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;

-    return Scaffold(
-      backgroundColor: ColorConsts.greyF4Color,
-      body: SingleChildScrollView(
-        physics: BouncingScrollPhysics(),
-        child: Column(
-          children: [
-            CommonHeader("اتصل بنا", "assets/icons/new/contact_bg.jpg", Color(0xff416A6C)),
-            Column(
+    Widget _header = SizedBox(height: isPortrait ? null : double.infinity, width: double.infinity, child: CommonHeader("اتصل بنا", "assets/icons/new/contact_bg.jpg", Color(0xff416A6C)));
+
+    Widget _inputDataList = Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      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)
+              ],
            ),
    );
  }
--- a/lib/ui/screens/login_screen.dart
+++ b/lib/ui/screens/login_screen.dart
@ -86,27 +86,7 @@ class _LoginScreenState extends State<LoginScreen> {
  Widget build(BuildContext context) {
    bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;

-    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: 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(
+    Widget _options = Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
@ -130,11 +110,11 @@ class _LoginScreenState extends State<LoginScreen> {
          Navigator.pushNamed(context, ForgotPasswordScreen.routeName);
        })
      ],
-                ),
-                20.height,
-                SizedBox(
+    );
+
+    Widget _loginButton = SizedBox(
      width: double.infinity,
-                  height: 50,
+      height: isPortrait ? 50 : 45,
      child: TextButton(
        onPressed: () {
          if (_emailController.text.length < 1) {
@ -160,19 +140,11 @@ class _LoginScreenState extends State<LoginScreen> {
        ),
        child: Text("تسجيل الدخول"),
      ),
-                ),
-                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(
+    );
+
+    Widget _registrationButton = SizedBox(
      width: double.infinity,
-                  height: 48,
+      height: isPortrait ? 48 : 32,
      child: TextButton(
        onPressed: () {
          Navigator.pushNamed(context, RegistrationScreen.routeName);
@ -180,13 +152,76 @@ class _LoginScreenState extends State<LoginScreen> {
        style: TextButton.styleFrom(
          backgroundColor: Colors.transparent,
          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)),
        ),
        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,
+                ] 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(
                  mainAxisSize: MainAxisSize.min,
                  children: [
--- a/lib/ui/screens/registration_screen.dart
+++ b/lib/ui/screens/registration_screen.dart
@ -88,22 +88,9 @@ class _RegistrationScreenState extends State<RegistrationScreen> {

  @override
  Widget build(BuildContext context) {
-    return 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,
+    bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
+
+    Widget _header = Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Padding(
@ -111,10 +98,10 @@ class _RegistrationScreenState extends State<RegistrationScreen> {
          child: SvgPicture.asset("assets/logos/tangheem_logo.svg", width: 72, height: 72),
        ),
        "انشاء حساب جديد".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,
      children: [
        CommonTextFieldWidget(hint: "البريد الإلكتروني", controller: _emailController, isEmail: true),
@ -143,27 +130,28 @@ class _RegistrationScreenState extends State<RegistrationScreen> {
        CommonTextFieldWidget(hint: "تأكيد كلمة المرور", controller: _confirmPasswordController),
        Row(
          mainAxisSize: MainAxisSize.min,
-                        crossAxisAlignment: CrossAxisAlignment.center,
          children: [
-                          InkWell(
-                            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),
-                          ),
+            Icon(_isAccept ? Icons.check_box_rounded : Icons.check_box_outline_blank_rounded, color: ColorConsts.borderDark2Text, size: 17),
            SizedBox(width: 8),
            "جميع البيانات صحيحة ضمن اتفاقية الاستخدام".toText(14, color: ColorConsts.darkText).expanded,
          ],
-                      ).paddingOnly(left: 30, right: 30, top: 30, bottom: 26),
-                    ],
-                  ).paddingOnly(left: 12, right: 12),
+        ).onPress(() {
+          setState(() {
+            _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,
      height: 50,
      child: TextButton(
@ -228,8 +216,9 @@ class _RegistrationScreenState extends State<RegistrationScreen> {
        ),
        child: Text("انشئ حسابك"),
      ),
-            ).paddingOnly(left: 35, right: 35, bottom: 35),
-            Column(
+    );
+
+    Widget _contactUsButton = Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        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(() {
      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),
+            ],
          );
  }

--- a/lib/widgets/login_textfield_widget.dart
+++ b/lib/widgets/login_textfield_widget.dart
@ -13,6 +13,8 @@ class LoginTextFieldWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
+    bool isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
+
    return isForChangePassword
        ? SizedBox(
            height: 45,
@ -71,7 +73,7 @@ class LoginTextFieldWidget extends StatelessWidget {
            maxLines: 1,
            scrollPhysics: BouncingScrollPhysics(),
            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,
              fillColor: Color(0xff598A8D),
              filled: true,