New UI implementation 2

assets/images/bc_Intro.svg

@@ -0,0 +1,26 @@
+<svg width="375" height="812" viewBox="0 0 375 812" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2_18)">
+<rect width="375" height="812" rx="24" fill="white"/>
+<g filter="url(#filter0_f_2_18)">
+<circle cx="17" cy="55" r="138" fill="#F58C21" fill-opacity="0.11"/>
+</g>
+<g filter="url(#filter1_f_2_18)">
+<circle cx="306" cy="223" r="138" fill="#F58C21" fill-opacity="0.11"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_2_18" x="-297" y="-259" width="628" height="628" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="88" result="effect1_foregroundBlur_2_18"/>
+</filter>
+<filter id="filter1_f_2_18" x="-8" y="-91" width="628" height="628" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="88" result="effect1_foregroundBlur_2_18"/>
+</filter>
+<clipPath id="clip0_2_18">
+<rect width="375" height="812" rx="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

lib/pages/dashboard/dashboard_page.dart

@@ -75,7 +75,9 @@ class _DashboardPageState extends State<DashboardPage> {
                 width: double.infinity,
                 height: 200,
                 color: MyColors.darkPrimaryColor.withOpacity(0.01),
-                child: Image.network(ApiConsts.baseUrlServices + AppState().getUser.data!.userInfo!.userImageUrl.toString()),
+                child: Image.network(
+                  ApiConsts.baseUrlServices + AppState().getUser.data!.userInfo!.userImageUrl.toString(),
+                ),
               ),
               Positioned(
                 top: 10,
@@ -215,8 +217,8 @@ class _DashboardPageState extends State<DashboardPage> {
     showDialog<ImageSource>(
       context: context,
       builder: (context) => AlertDialog(content: Text("Choose image source"), actions: [
-        FlatButton(child: Text("Camera"), onPressed: () => cameraImage()),
-        FlatButton(child: Text("Gallery"), onPressed: () => gallaryImage()),
+        TextButton(child: Text("Camera"), onPressed: () => cameraImage()),
+        TextButton(child: Text("Gallery"), onPressed: () => gallaryImage()),
       ]),
       //     .then((ImageSource source) async {
       //   if (source != null) {

lib/pages/user/edit_account_page.dart

@@ -52,7 +52,12 @@ class _EditAccountPageState extends State<EditAccountPage> {
                 ),
                 20.width,
                 Expanded(child: LocaleKeys.changePassword.tr().toText12(isBold: true)),
-                RaisedButton(
+                ElevatedButton(
+                  style: ElevatedButton.styleFrom(
+                    textStyle: const TextStyle(color: Colors.white),
+                    backgroundColor: MyColors.darkPrimaryColor,
+                    padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+                  ),
                   onPressed: () {
                     navigateWithName(context, AppRoutes.changePassword);
                   },
@@ -63,9 +68,6 @@ class _EditAccountPageState extends State<EditAccountPage> {
                       fontWeight: FontWeight.w600,
                     ),
                   ),
-                  color: MyColors.darkPrimaryColor,
-                  textColor: Colors.white,
-                  padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
                 ),
               ],
             ),
@@ -83,7 +85,12 @@ class _EditAccountPageState extends State<EditAccountPage> {
                 Expanded(child: LocaleKeys.changeMobile.tr().toText12(isBold: true)),
                 LocaleKeys.verify.tr().toText12(color: Colors.green),
                 20.width,
-                RaisedButton(
+                ElevatedButton(
+                  style: ElevatedButton.styleFrom(
+                    textStyle: const TextStyle(color: Colors.white),
+                    backgroundColor: MyColors.darkPrimaryColor,
+                    padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+                  ),
                   onPressed: () {
                     navigateWithName(context, AppRoutes.changeMobilePage);
                   },
@@ -94,9 +101,6 @@ class _EditAccountPageState extends State<EditAccountPage> {
                       fontWeight: FontWeight.w600,
                     ),
                   ),
-                  textColor: Colors.white,
-                  color: MyColors.darkPrimaryColor,
-                  padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
                 )
               ],
             ),
@@ -121,20 +125,23 @@ class _EditAccountPageState extends State<EditAccountPage> {
                         },
                 ),
                 20.width,
-                RaisedButton(
-                    onPressed: () {
-                      navigateWithName(context, AppRoutes.changeEmailPage);
-                    },
-                    child: Text(
-                      LocaleKeys.change.tr(),
-                      style: TextStyle(
-                        fontSize: 14,
-                        fontWeight: FontWeight.w600,
-                      ),
+                ElevatedButton(
+                  style: ElevatedButton.styleFrom(
+                    textStyle: const TextStyle(color: Colors.white),
+                    backgroundColor: MyColors.darkPrimaryColor,
+                    padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+                  ),
+                  onPressed: () {
+                    navigateWithName(context, AppRoutes.changeEmailPage);
+                  },
+                  child: Text(
+                    LocaleKeys.change.tr(),
+                    style: TextStyle(
+                      fontSize: 14,
+                      fontWeight: FontWeight.w600,
                     ),
-                    textColor: Colors.white,
-                    color: MyColors.darkPrimaryColor,
-                    padding: EdgeInsets.symmetric(horizontal: 8, vertical: 8))
+                  ),
+                ),
               ],
             )
 

lib/pages/user/forget_password_page.dart

@@ -41,7 +41,7 @@ class _ForgetPasswordPageState extends State<ForgetPasswordPage> {
   int otpType = 1;
 
   String userName = "";
-  ClassType type = ClassType.NUMBER;
+  ClassType type = ClassType.EMAIL;
   Country? _country;
   String countryCode = "";
 

lib/pages/user/login_with_password_page.dart

@@ -38,7 +38,7 @@ class LoginWithPassword extends StatefulWidget {
 class _LoginWithPasswordState extends State<LoginWithPassword> {
   int otpType = 1;
 
-  ClassType type = ClassType.NUMBER;
+  ClassType type = ClassType.EMAIL;
   String phoneNum = "", password = "";
   String email = "";
   String countryCode = "";
@@ -68,11 +68,11 @@ class _LoginWithPasswordState extends State<LoginWithPassword> {
             children: [
               12.height,
               LocaleKeys.login.tr().toText20(),
-              20.height,
-              (type == ClassType.NUMBER ? LocaleKeys.enterPhoneNumber.tr() : LocaleKeys.enterEmail.tr()).toText14(
-                color: MyColors.lightTextColor,
-                textAlign: TextAlign.center,
-              ),
+              // 20.height,
+              // (type == ClassType.NUMBER ? LocaleKeys.enterPhoneNumber.tr() : LocaleKeys.enterEmail.tr()).toText14(
+              //   color: MyColors.lightTextColor,
+              //   textAlign: TextAlign.center,
+              // ),
               30.height,
               LoginEmailTab(
                 onSelection: (ClassType type) {
@@ -107,12 +107,14 @@ class _LoginWithPasswordState extends State<LoginWithPassword> {
                   ),
                 ],
               ),
-              10.height,
+              20.height,
+              LocaleKeys.forgetPasswordQ.tr().toText14(color: MyColors.textColor),
               ShowFillButton(
-                title: LocaleKeys.forgetPasswordRecover.tr(),
+                title: LocaleKeys.recover.tr(),
                 isFlatButton: true,
                 isBold: false,
                 fontSize: 14,
+                maxHeight: 24,
                 txtColor: MyColors.darkPrimaryColor,
                 onPressed: () {
                   navigateWithName(context, AppRoutes.forgetPassword);
@@ -163,5 +165,4 @@ class _LoginWithPasswordState extends State<LoginWithPassword> {
       Utils.showToast(user.message ?? "");
     }
   }
-
 }

lib/pages/user/register_page.dart

@@ -25,10 +25,18 @@ import 'package:flutter/material.dart';
 
 import '../../classes/colors.dart';
 
-class RegisterPage extends StatelessWidget {
+class RegisterPage extends StatefulWidget {
+  @override
+  State<RegisterPage> createState() => _RegisterPageState();
+}
+
+class _RegisterPageState extends State<RegisterPage> {
   String phoneNum = "", countryCode = "";
+
   int role = 4, countryId = -1;
 
+  TextEditingController emailController = TextEditingController();
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -46,9 +54,9 @@ class RegisterPage extends StatelessWidget {
                 LocaleKeys.signUp.tr().toText20(),
                 20.height,
                 LocaleKeys.enterPhoneNumber.tr().toText14(
-                  color: MyColors.lightTextColor,
-                  textAlign: TextAlign.center,
-                ),
+                      color: MyColors.lightTextColor,
+                      textAlign: TextAlign.center,
+                    ),
                 30.height,
                 FutureBuilder<Country>(
                   future: UserApiClent().getAllCountries(),
@@ -66,14 +74,20 @@ class RegisterPage extends StatelessWidget {
                       return Column(
                         children: [
                           LocaleKeys.selectYourCountry.tr().toText14(
-                            color: MyColors.lightTextColor,
-                            textAlign: TextAlign.center,
-                          ),
+                                color: MyColors.lightTextColor,
+                                textAlign: TextAlign.center,
+                              ),
                           10.height,
-                          DropdownField((DropValue value) {
-                            countryCode = value.subValue;
-                            countryId = value.id;
-                          }, list: dropList, hint: LocaleKeys.chooseCountry.tr()),
+                          DropdownField(
+                            (DropValue value) {
+                              setState(() {
+                                countryCode = value.subValue;
+                                countryId = value.id;
+                              });
+                            },
+                            list: dropList,
+                            hint: LocaleKeys.chooseCountry.tr(),
+                          ),
                         ],
                       );
                     } else {
@@ -83,17 +97,60 @@ class RegisterPage extends StatelessWidget {
                 ),
                 18.height,
                 LocaleKeys.enterPhoneForVerfication.tr().toText14(
-                  color: MyColors.lightTextColor,
-                  textAlign: TextAlign.center,
-                ),
+                      color: MyColors.lightTextColor,
+                      textAlign: TextAlign.center,
+                    ),
                 10.height,
-                TxtField(
-                  hint: "5********",
-                  value: phoneNum,
-                  onChanged: (v) {
-                    phoneNum = v;
-                  },
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    mExp(1),
+                    Expanded(
+                      flex: 3,
+                      child: Row(
+                        children: [
+                          Text(
+                            (countryCode.isEmpty ? "+00" : "+" + countryCode),
+                            style: const TextStyle(
+                              fontSize: 20,
+                              color: MyColors.black,
+                              fontWeight: FontWeight.bold,
+                            ),
+                          ),
+                          const Text(
+                            " | ",
+                            style: TextStyle(
+                              fontSize: 20,
+                              color: MyColors.black,
+                              fontWeight: FontWeight.bold,
+                            ),
+                          ),
+                          Flexible(
+                            child: TextField(
+                              controller: emailController,
+                              onChanged: (v){
+                                phoneNum=v;
+                              },
+                              style: const TextStyle(
+                                fontSize: 20,
+                                color: MyColors.black,
+                              ),
+                              decoration: const InputDecoration(
+                                hintStyle: TextStyle(color: MyColors.lightTextColor, fontSize: 20),
+                                hintText: "546758594",
+                                contentPadding: EdgeInsets.zero,
+                                border: InputBorder.none,
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                    mExp(1),
+                  ],
                 ),
+
                 40.height,
                 ShowFillButton(
                   title: LocaleKeys.continu.tr(),
@@ -138,15 +195,15 @@ class RegisterPage extends StatelessWidget {
     bool isValid = true;
     if (role == -1) {
       Utils.showToast(LocaleKeys.selectProviderRole.tr());
-        //("Please select Provider Role");
+      //("Please select Provider Role");
       isValid = false;
     } else if (countryCode.isEmpty) {
       Utils.showToast(LocaleKeys.selectCountryCode.tr());
-        //("Please select Country Code");
+      //("Please select Country Code");
       isValid = false;
     } else if (phoneNum.isEmpty) {
       Utils.showToast(LocaleKeys.addPhoneNo.tr());
-        //("Please add Phone No");
+      //("Please add Phone No");
       isValid = false;
     }
     return isValid;

lib/pages/user/register_selection_page.dart

@@ -21,14 +21,20 @@ class RegisterSelectionPage extends StatelessWidget {
       body: Container(
         width: double.infinity,
         height: double.infinity,
+        decoration: BoxDecoration(
+          image: DecorationImage(
+            image: AssetImage("assets/images/bn_Intro.png"),
+            fit: BoxFit.cover,
+          ),
+        ),
         child: Column(
           children: [
-            mFlex(4),
+            mFlex(6),
             SvgPicture.asset("assets/images/logo.svg"),
-            mFlex(3),
+            mFlex(4),
             LocaleKeys.welcomeMessage.tr().toText20(),
             LocaleKeys.welcomeDes.tr().toText14(color: MyColors.lightTextColor),
-            mFlex(4),
+            mFlex(1),
             ShowFillButton(
               title: LocaleKeys.login.tr(),
               maxWidth: double.infinity,
@@ -58,11 +64,19 @@ class RegisterSelectionPage extends StatelessWidget {
             //     navigateWithName(context, AppRoutes.forgetPassword);
             //   },
             // ),
-            mFlex(2),
-            SvgPicture.asset(
-              "assets/images/bn_logo.svg",
-              fit: BoxFit.cover,
-            )
+            mFlex(3),
+            TextButton(
+              onPressed: () {},
+              child: const Text(
+                "Continue as Guest",
+                style: TextStyle(
+                  color: MyColors.darkPrimaryColor,
+                  fontWeight: FontWeight.bold,
+                  decoration: TextDecoration.underline,
+                ),
+              ),
+            ),
+            mFlex(3),
           ],
         ),
       ),

lib/widgets/tab/login_email_tab.dart

@@ -17,7 +17,7 @@ class LoginEmailTab extends StatefulWidget {
 }
 
 class _LoginEmailTabState extends State<LoginEmailTab> {
-  ClassType type = ClassType.NUMBER;
+  ClassType type = ClassType.EMAIL;
 
   @override
   Widget build(BuildContext context) {
@@ -28,22 +28,22 @@ class _LoginEmailTabState extends State<LoginEmailTab> {
           Expanded(
             child: InkWell(
               onTap: () {
-                type = ClassType.NUMBER;
-                widget.onSelection(ClassType.NUMBER);
+                type = ClassType.EMAIL;
+                widget.onSelection(ClassType.EMAIL);
               },
               child: Container(
                 width: double.infinity,
                 height: 45,
                 decoration: BoxDecoration(
-                  color: type == ClassType.NUMBER ? MyColors.darkPrimaryColor : Colors.grey[200],
+                  color: type == ClassType.EMAIL ? MyColors.darkPrimaryColor : Colors.grey[200],
                   // border: Border.all(color: type == ClassType.NUMBER ? MyColors.darkPrimaryColor : Colors.transparent, width: 2),
                   borderRadius: BorderRadius.all(Radius.circular(0)),
                 ),
                 child: Center(
                   child: Text(
-                    LocaleKeys.number.tr(),
+                    LocaleKeys.email.tr(),
                     style: TextStyle(
-                      color: type == ClassType.NUMBER ? MyColors.white : Colors.black,
+                      color: type == ClassType.EMAIL ? MyColors.white : Colors.black,
                     ),
                   ),
                 ),
@@ -54,28 +54,29 @@ class _LoginEmailTabState extends State<LoginEmailTab> {
           Expanded(
             child: InkWell(
               onTap: () {
-                type = ClassType.EMAIL;
-                widget.onSelection(ClassType.EMAIL);
+                type = ClassType.NUMBER;
+                widget.onSelection(ClassType.NUMBER);
               },
               child: Container(
                 width: double.infinity,
                 height: 45,
                 decoration: BoxDecoration(
-                  color: type == ClassType.EMAIL ? MyColors.darkPrimaryColor : Colors.grey[200],
+                  color: type == ClassType.NUMBER ? MyColors.darkPrimaryColor : Colors.grey[200],
                   // border: Border.all(color: type == ClassType.NUMBER ? MyColors.darkPrimaryColor : Colors.transparent, width: 2),
                   borderRadius: BorderRadius.all(Radius.circular(0)),
                 ),
                 child: Center(
                   child: Text(
-                    LocaleKeys.email.tr(),
+                    LocaleKeys.phoneNumber.tr(),
                     style: TextStyle(
-                      color: type == ClassType.EMAIL ? MyColors.white : Colors.black,
+                      color: type == ClassType.NUMBER ? MyColors.white : Colors.black,
                     ),
                   ),
                 ),
               ),
             ),
           ),
+
         ],
       ),
     );

resources/langs/ar-SA.json

@@ -116,6 +116,9 @@
   "welcomeDes": "أنت مكان واحد لكل ما تحتاجه سيارتك",
   "log_in": "تسجيل الدخول",
   "send": "إرسال",
+  "phoneNumber": "رقم الهاتف",
+  "forgetPasswordQ": "نسيت كلمة المرور؟",
+  "recover": "استعادة",
   "retrivePassword": "استرجع كلمة المرور بإحدى الطرق التالية",
   "retriveOnPhone": "سوف نرسل الاختيار إلى رقم هاتفك المحمول المسجل",
   "retriveOnEmail": "سوف نرسل الاختيار إلى عنوان بريدك الإلكتروني المسجل",

resources/langs/en-US.json

@@ -116,6 +116,9 @@
   "welcomeDes": "You one stop place all your car needs",
   "log_in": "Log In",
   "send": "Send",
+  "phoneNumber": "Phone Number",
+  "forgetPasswordQ": "Forget Password?",
+  "recover": "Recover",
   "retrivePassword": "Retrive password by one of following method",
   "retriveOnPhone": "We will send the opt to your registered mobile number",
   "retriveOnEmail": "We will send the opt to your registered email address",