change password UI

lib/lookups/auth_lookup.dart

@@ -1 +1 @@
-enum loginType { knownUser, unknownUser }
+enum loginType { knownUser, unknownUser, changePassword, verifyPassword }

lib/routes.dart

@@ -9,35 +9,31 @@ import './screens/medicine/medicine_search_screen.dart';
 import './screens/my_schedule_screen.dart';
 import './screens/patients/patient_search_screen.dart';
 import './screens/patients/patients_list_screen.dart';
+import './screens/auth/change_password_screen.dart';
 
 const String HOME = '/';
 const String LOGIN = 'login';
+const String CHANGE_PASSWORD = 'change-password';
 const String INIT_ROUTE = LOGIN;
 const String MY_SCHEDULE = 'my-schedule';
-const String QR_READER = 'qr_reader';
+const String QR_READER = 'qr-reader';
 const String PATIENT_SEARCH = 'patients/patient-search';
 const String PATIENTS = 'patients/patients';
-const String BLOOD_BANK = 'blood_bank';
-const String DOCTOR_REPLY = 'doctor_reply';
-const String MEDICINE_SEARCH='medicine_search';
-const String SETTINGS ='settings';
-
-
-
-
+const String BLOOD_BANK = 'blood-bank';
+const String DOCTOR_REPLY = 'doctor-reply';
+const String MEDICINE_SEARCH = 'medicine-search';
+const String SETTINGS = 'settings';
 
 var routes = {
-  HOME:(_)=>HomeScreen(),
-  INIT_ROUTE:(_)=>Loginsreen(),
-  MY_SCHEDULE:(_)=>MyScheduleScreen(),
-  PATIENT_SEARCH:(_)=>PatientSearchScreen(),
-  PATIENTS:(_)=>PatientsListScreen(),
-  QR_READER:(_)=>QrReaderScreen(),
-  BLOOD_BANK:(_)=>BloodBankScreen(),
-  DOCTOR_REPLY:(_)=>DoctorReplyScreen(),
-  MEDICINE_SEARCH:(_)=>MedicineSearchScreen(),
-  SETTINGS:(_)=>SettingsScreen()
-
-
-
+  HOME: (_) => HomeScreen(),
+  INIT_ROUTE: (_) => Loginsreen(),
+  MY_SCHEDULE: (_) => MyScheduleScreen(),
+  PATIENT_SEARCH: (_) => PatientSearchScreen(),
+  PATIENTS: (_) => PatientsListScreen(),
+  QR_READER: (_) => QrReaderScreen(),
+  BLOOD_BANK: (_) => BloodBankScreen(),
+  DOCTOR_REPLY: (_) => DoctorReplyScreen(),
+  MEDICINE_SEARCH: (_) => MedicineSearchScreen(),
+  SETTINGS: (_) => SettingsScreen(),
+  CHANGE_PASSWORD: (_) => ChangePasswordScreen()
 };

lib/screens/auth/change_password_screen.dart

@@ -0,0 +1,24 @@
+import 'package:doctor_app_flutter/lookups/auth_lookup.dart';
+import 'package:doctor_app_flutter/widgets/auth/auth_header.dart';
+import 'package:flutter/material.dart';
+import '../../widgets/auth/change_password.dart';
+class ChangePasswordScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    // return Container()];
+    return Scaffold(
+        backgroundColor: Colors.white,
+        body: SingleChildScrollView(
+          child: Container(
+            margin: EdgeInsetsDirectional.fromSTEB(30, 0, 0, 0),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: <Widget>[
+                AuthHeader(loginType.changePassword),
+                ChangePassword(),
+              ],
+            ),
+          ),
+        ));
+  }
+}

lib/widgets/auth/auth_header.dart

@@ -1,8 +1,9 @@
-import '../../config/size_config.dart';
-import '../../lookups/auth_lookup.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 
+import '../../config/size_config.dart';
+import '../../lookups/auth_lookup.dart';
+
 class AuthHeader extends StatelessWidget {
   var userType;
   AuthHeader(this.userType);
@@ -25,13 +26,7 @@ class AuthHeader extends StatelessWidget {
                       ? EdgeInsetsDirectional.fromSTEB(0, 50, 0, 0)
                       : EdgeInsetsDirectional.fromSTEB(
                           SizeConfig.screenWidth * 0.13, 0, 0, 0),
-                  child: Image.asset(
-                    'assets/images/login_icon.png',
-                    fit: BoxFit.cover,
-                    height: SizeConfig.isMobile
-                        ? null
-                        : SizeConfig.screenWidth * 0.09,
-                  ),
+                  child: buildImageLogo(),
                 ),
                 SizedBox(
                   height: 10,
@@ -41,14 +36,7 @@ class AuthHeader extends StatelessWidget {
                       ? null
                       : EdgeInsetsDirectional.fromSTEB(
                           SizeConfig.screenWidth * 0.13, 0, 0, 0),
-                  child: Text(
-                    "LOGIN",
-                    style: TextStyle(
-                        fontSize: SizeConfig.isMobile
-                            ? 30
-                            : SizeConfig.screenWidth * 0.035,
-                        fontWeight: FontWeight.w800),
-                  ),
+                  child: buildTextUnderLogo(context),
                 )
               ],
             ),
@@ -81,7 +69,66 @@ class AuthHeader extends StatelessWidget {
     return screen;
   }
 
+  Image buildImageLogo() {
+    String img = 'assets/images/login_icon.png';
+    if (userType == loginType.unknownUser) {
+      img = 'assets/images/welcome_login_icon.png';
+    }
+
+    return Image.asset(
+      img,
+      fit: BoxFit.cover,
+      height: SizeConfig.isMobile ? null : SizeConfig.screenWidth * 0.09,
+    );
+  }
+
+  Widget buildTextUnderLogo(context) {
+    if (userType == loginType.knownUser || userType == loginType.unknownUser) {
+      return Text(
+        "LOGIN",
+        style: TextStyle(
+            fontSize: SizeConfig.isMobile ? 30 : SizeConfig.screenWidth * 0.035,
+            fontWeight: FontWeight.w800),
+      );
+    } else {
+      String text1;
+      String text2;
+      if (userType == loginType.changePassword) {
+        text1 = 'Change';
+        text2 = 'Password!';
+      }
+      if (userType == loginType.verifyPassword) {
+        text1 = 'verify';
+        text2 = 'Your Account!';
+      }
+
+      return Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: <Widget>[
+          Text(
+            text1,
+            style: TextStyle(
+                fontSize:
+                    SizeConfig.isMobile ? 30 : SizeConfig.screenWidth * 0.035,
+                fontWeight: FontWeight.w800),
+          ),
+          Text(
+            text2,
+            style: TextStyle(
+                color: Theme.of(context).primaryColor,
+                fontSize:
+                    SizeConfig.isMobile ? 30 : SizeConfig.screenWidth * 0.035,
+                fontWeight: FontWeight.w800),
+          )
+        ],
+      );
+    }
+  }
+
   Container buildDrAppContainer(BuildContext context) {
+    if (userType == loginType.changePassword  || userType == loginType.verifyPassword ) {
+      return Container();
+    }
     return Container(
       margin: SizeConfig.isMobile
           ? null
@@ -98,6 +145,9 @@ class AuthHeader extends StatelessWidget {
   }
 
   Text buildDrSulText(BuildContext context) {
+    if (userType == loginType.changePassword  || userType == loginType.verifyPassword ) {
+      return Text('');
+    }
     return Text(
       'Dr Sulaiman Al Habib',
       style: TextStyle(
@@ -108,12 +158,14 @@ class AuthHeader extends StatelessWidget {
     );
   }
 
-  Text buildWelText() {
+  Widget buildWelText() {
     String text = 'Welcome to ';
     if (userType == loginType.unknownUser) {
       text = 'Welcome Back to ';
     }
-
+    if (userType == loginType.changePassword  || userType == loginType.verifyPassword ) {
+      return Text('');
+    }
     return Text(
       text,
       style: TextStyle(

lib/widgets/auth/change_password.dart

@@ -0,0 +1,159 @@
+import 'package:doctor_app_flutter/config/size_config.dart';
+import 'package:flutter/material.dart';
+import 'package:hexcolor/hexcolor.dart';
+
+class ChangePassword extends StatelessWidget {
+  final changePassFormKey = GlobalKey<FormState>();
+  var changePassFormValues = {
+    'currentPass': null,
+    'newPass': null,
+    'repeatedPass': null
+  };
+
+  @override
+  Widget build(BuildContext context) {
+    return Form(
+        key: changePassFormKey,
+        child: Container(
+            width: SizeConfig.widthMultiplier * 90,
+            child:
+                Column(crossAxisAlignment: CrossAxisAlignment.start, children: <
+                    Widget>[
+              buildSizedBox(),
+              TextFormField(
+                keyboardType: TextInputType.number,
+                decoration: InputDecoration(
+                    // ts/images/password_icon.png
+                    prefixIcon: Image.asset('assets/images/password_icon.png'),
+                    hintText: 'Current Password',
+                    hintStyle:
+                        TextStyle(fontSize: 2 * SizeConfig.textMultiplier),
+                    enabledBorder: OutlineInputBorder(
+                      borderRadius: BorderRadius.all(Radius.circular(20)),
+                      borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
+                    ),
+                    focusedBorder: OutlineInputBorder(
+                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
+                      borderSide:
+                          BorderSide(color: Theme.of(context).primaryColor),
+                    )
+                    //BorderRadius.all(Radius.circular(20));
+                    ),
+                validator: (value) {
+                  if (value.isEmpty) {
+                    return 'Please enter your Current Password';
+                  }
+                  return null;
+                },
+                onSaved: (value) {
+                  // changePassFormValues. = value;
+                },
+              ),
+              buildSizedBox(40),
+              // buildSizedBox(),
+              Text(
+                "New Password",
+                style: TextStyle(
+                    fontSize: 2.8 * SizeConfig.textMultiplier,
+                    fontWeight: FontWeight.w800),
+              ),
+              buildSizedBox(10.0),
+              // Text()
+              TextFormField(
+                keyboardType: TextInputType.number,
+                decoration: InputDecoration(
+                    // ts/images/password_icon.png
+                    prefixIcon: Image.asset('assets/images/password_icon.png'),
+                    hintText: 'New Password',
+                    hintStyle:
+                        TextStyle(fontSize: 2 * SizeConfig.textMultiplier),
+                    enabledBorder: OutlineInputBorder(
+                      borderRadius: BorderRadius.all(Radius.circular(20)),
+                      borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
+                    ),
+                    focusedBorder: OutlineInputBorder(
+                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
+                      borderSide:
+                          BorderSide(color: Theme.of(context).primaryColor),
+                    )
+                    //BorderRadius.all(Radius.circular(20));
+                    ),
+                validator: (value) {
+                  if (value.isEmpty) {
+                    return 'Please enter your New Password';
+                  }
+                  return null;
+                },
+                onSaved: (value) {
+                  // userInfo.UserID = value;
+                },
+              ),
+              buildSizedBox(),
+              TextFormField(
+                keyboardType: TextInputType.number,
+                decoration: InputDecoration(
+                    prefixIcon: Image.asset('assets/images/password_icon.png'),
+                    hintText: 'Repeat Password',
+                    hintStyle:
+                        TextStyle(fontSize: 2 * SizeConfig.textMultiplier),
+                    enabledBorder: OutlineInputBorder(
+                      borderRadius: BorderRadius.all(Radius.circular(20)),
+                      borderSide: BorderSide(color: Hexcolor('#CCCCCC')),
+                    ),
+                    focusedBorder: OutlineInputBorder(
+                      borderRadius: BorderRadius.all(Radius.circular(10.0)),
+                      borderSide:
+                          BorderSide(color: Theme.of(context).primaryColor),
+                    )
+                    //BorderRadius.all(Radius.circular(20));
+                    ),
+                validator: (value) {
+                  if (value.isEmpty) {
+                    return 'Please enter your Repeat Password';
+                  }
+                  return null;
+                },
+                onSaved: (value) {
+                  // userInfo.UserID = value;
+                },
+              ),
+              buildSizedBox(),
+              RaisedButton(
+                onPressed:changePass,
+                elevation: 0.0,
+                child: Container(
+                  width: double.infinity,
+                  height: 50,
+                  child: Center(
+                    child: Text(
+                      'Change Password'
+                          .toUpperCase(),
+                      // textAlign: TextAlign.center,
+                      style: TextStyle(
+                          color: Colors.white,
+                          fontSize: 2.5 * SizeConfig.textMultiplier),
+                    ),
+                  ),
+                ),
+                shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(10),
+                    side: BorderSide(width: 0.5, color: Hexcolor('#CCCCCC'))),
+              ),
+              SizedBox(
+                height: 10,
+              ),
+            ])));
+  }
+
+  SizedBox buildSizedBox([double height = 20]) {
+    return SizedBox(
+      height: height,
+    );
+  }
+  changePass(){
+    if(changePassFormKey.currentState.validate()){
+      changePassFormKey.currentState.save();
+      // call Api 
+    }
+  }
+}

pubspec.yaml

@@ -68,6 +68,7 @@ flutter:
    - assets/images/verification_sms_lg_icon.png
    - assets/images/verification_whatsapp_lg_icon.png
    - assets/images/close_icon.png
+   - assets/images/welcome_login_icon.png
   #  - images/a_dot_ham.jpeg
 
   # An image asset can refer to one or more resolution-specific "variants", see