diff --git a/frontend/.dart_tool/version b/frontend/.dart_tool/version new file mode 100644 index 0000000..54a1992 --- /dev/null +++ b/frontend/.dart_tool/version @@ -0,0 +1 @@ +3.7.5 \ No newline at end of file diff --git a/frontend/lib/Feature/Forgot Password/Forgot_Password_Screen.dart b/frontend/lib/Feature/Forgot Password/Forgot_Password_Screen.dart new file mode 100644 index 0000000..2f88b02 --- /dev/null +++ b/frontend/lib/Feature/Forgot Password/Forgot_Password_Screen.dart @@ -0,0 +1,219 @@ +import 'package:flutter/material.dart'; +import 'package:lottie/lottie.dart'; + +import '../../Core/Animation/Fade_Animation.dart'; +import '../../Core/Colors/Hex_Color.dart'; +import '../Login Screen/Login_Screen.dart'; +import '../Pin Code/Pin_Code_Screen.dart'; + +enum FormData { Email } + +class ForgotPasswordScreen extends StatefulWidget { + @override + State createState() => _ForgotPasswordScreenState(); +} + +class _ForgotPasswordScreenState extends State { + Color enabled = const Color.fromARGB(255, 63, 56, 89); + Color enabledtxt = Colors.white; + Color deaible = Colors.grey; + Color backgroundColor = const Color(0xFF1F1A30); + bool ispasswordev = true; + + FormData? selected; + + TextEditingController emailController = new TextEditingController(); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Container( + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + stops: const [0.1, 0.4, 0.7, 0.9], + colors: [ + HexColor("#B4E4FF").withOpacity(0.8), + HexColor("#F7C8E0"), + HexColor("#B4E4FF"), + HexColor("#F7C8E0") + ], + ), + image: DecorationImage( + fit: BoxFit.cover, + colorFilter: ColorFilter.mode( + HexColor("#fff").withOpacity(0.2), BlendMode.dstATop), + image: NetworkImage( + 'https://assets7.lottiefiles.com/private_files/lf30_GjhcdO.json', + ), + ), + ), + child: Center( + child: SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Card( + elevation: 5, + color: const Color.fromARGB(255, 236, 118, 174), + child: Container( + width: 400, + padding: const EdgeInsets.all(40.0), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8), + ), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + FadeAnimation( + delay: 0.8, + child: Lottie.network( + 'https://assets7.lottiefiles.com/private_files/lf30_GjhcdO.json', + width: 100, + height: 100, + ), + ), + const SizedBox( + height: 10, + ), + FadeAnimation( + delay: 1, + child: Container( + child: Text( + "Let us help you", + style: TextStyle( + color: Colors.white.withOpacity(0.9), + letterSpacing: 0.5), + ), + ), + ), + const SizedBox( + height: 20, + ), + FadeAnimation( + delay: 1, + child: Container( + width: 300, + height: 40, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(12.0), + color: selected == FormData.Email + ? enabled + : backgroundColor, + ), + padding: const EdgeInsets.all(5.0), + child: TextField( + controller: emailController, + onTap: () { + setState(() { + selected = FormData.Email; + }); + }, + decoration: InputDecoration( + enabledBorder: InputBorder.none, + border: InputBorder.none, + prefixIcon: Icon( + Icons.email_outlined, + color: selected == FormData.Email + ? enabledtxt + : deaible, + size: 20, + ), + hintText: 'Email', + hintStyle: TextStyle( + color: selected == FormData.Email + ? enabledtxt + : deaible, + fontSize: 12), + ), + textAlignVertical: TextAlignVertical.center, + style: TextStyle( + color: selected == FormData.Email + ? enabledtxt + : deaible, + fontWeight: FontWeight.bold, + fontSize: 12), + ), + ), + ), + const SizedBox( + height: 25, + ), + FadeAnimation( + delay: 1, + child: TextButton( + onPressed: () { + Navigator.pop(context); + Navigator.of(context) + .push(MaterialPageRoute(builder: (context) { + return const PinCodeVerificationScreen( + phoneNumber: '', + ); + })); + }, + child: Text( + "Continue", + style: TextStyle( + color: Colors.black, + letterSpacing: 0.5, + fontSize: 16.0, + fontWeight: FontWeight.bold, + ), + ), + style: TextButton.styleFrom( + backgroundColor: Color(0x95BDFFff), + padding: const EdgeInsets.symmetric( + vertical: 14.0, horizontal: 80), + shape: RoundedRectangleBorder( + borderRadius: + BorderRadius.circular(12.0)))), + ), + ], + ), + ), + ), + + //End of Center Card + //Start of outer card + const SizedBox( + height: 20, + ), + + FadeAnimation( + delay: 1, + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + mainAxisSize: MainAxisSize.min, + children: [ + const Text("Want to try again? ", + style: TextStyle( + color: Colors.grey, + letterSpacing: 0.5, + )), + GestureDetector( + onTap: () { + Navigator.pop(context); + Navigator.of(context) + .push(MaterialPageRoute(builder: (context) { + return LoginScreen(); + })); + }, + child: Text("Sign in", + style: TextStyle( + color: Colors.white.withOpacity(0.9), + fontWeight: FontWeight.bold, + letterSpacing: 0.5, + fontSize: 14)), + ), + ], + ), + ), + ], + ), + ), + ), + ), + ); + } +} diff --git a/frontend/lib/Feature/Login Screen/Login_Screen.dart b/frontend/lib/Feature/Login Screen/Login_Screen.dart new file mode 100644 index 0000000..718935b --- /dev/null +++ b/frontend/lib/Feature/Login Screen/Login_Screen.dart @@ -0,0 +1,298 @@ +import 'package:flutter/material.dart'; +import 'package:lottie/lottie.dart'; + +import '../../Core/Animation/Fade_Animation.dart'; +import '../../Core/Colors/Hex_Color.dart'; +import '../Forgot Password/Forgot_Password_Screen.dart'; +import '../Sign Up Screen/SignUp_Screen.dart'; + +enum FormData { + Email, + password, +} + +class LoginScreen extends StatefulWidget { + @override + State createState() => _LoginScreenState(); +} + +class _LoginScreenState extends State { + Color enabled = const Color.fromARGB(255, 247, 200, 224); + Color enabledtxt = Colors.white; + Color deaible = Colors.grey; + Color backgroundColor = const Color(0xFF1F1A30); + bool ispasswordev = true; + FormData? selected; + + TextEditingController emailController = new TextEditingController(); + TextEditingController passwordController = new TextEditingController(); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Container( + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + stops: const [0.1, 0.4, 0.7, 0.9], + colors: [ + HexColor("#B4E4FF").withOpacity(0.8), + HexColor("#F7C8E0"), + HexColor("#B4E4FF"), + HexColor("#F7C8E0") + ], + ), + ), + child: Center( + child: SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Card( + elevation: 5, + color: const Color.fromARGB(255, 236, 118, 174), + child: Container( + width: 400, + padding: const EdgeInsets.all(40), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(30), + ), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + FadeAnimation( + delay: 0.8, + child: Lottie.network( + 'https://assets4.lottiefiles.com/packages/lf20_1t8na1gy.json', + width: 150, + height: 150, + ), + ), + const SizedBox( + height: 10, + ), + FadeAnimation( + delay: 1, + child: const Text( + "Please log in to continue", + style: TextStyle( + fontSize: 22, + color: Colors.black, + letterSpacing: 0.5), + ), + ), + const SizedBox( + height: 40, + ), + FadeAnimation( + delay: 1, + child: Container( + width: 300, + height: 40, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(12.0), + color: selected == FormData.Email + ? enabled + : backgroundColor, + ), + padding: const EdgeInsets.all(5.0), + child: TextField( + controller: emailController, + onTap: () { + setState(() { + selected = FormData.Email; + }); + }, + decoration: InputDecoration( + enabledBorder: InputBorder.none, + border: InputBorder.none, + prefixIcon: Icon( + Icons.email_outlined, + color: selected == FormData.Email + ? enabledtxt + : deaible, + size: 20, + ), + hintText: 'Email', + hintStyle: TextStyle( + color: selected == FormData.Email + ? enabledtxt + : deaible, + fontSize: 12), + ), + textAlignVertical: TextAlignVertical.center, + style: TextStyle( + color: selected == FormData.Email + ? enabledtxt + : deaible, + fontWeight: FontWeight.bold, + fontSize: 12), + ), + ), + ), + const SizedBox( + height: 20, + ), + FadeAnimation( + delay: 1, + child: Container( + width: 300, + height: 40, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(12.0), + color: selected == FormData.password + ? enabled + : backgroundColor), + padding: const EdgeInsets.all(5.0), + child: TextField( + controller: passwordController, + onTap: () { + setState(() { + selected = FormData.password; + }); + }, + decoration: InputDecoration( + enabledBorder: InputBorder.none, + border: InputBorder.none, + prefixIcon: Icon( + Icons.lock_open_outlined, + color: selected == FormData.password + ? enabledtxt + : deaible, + size: 20, + ), + suffixIcon: IconButton( + icon: ispasswordev + ? Icon( + Icons.visibility_off, + color: selected == FormData.password + ? enabledtxt + : deaible, + size: 20, + ) + : Icon( + Icons.visibility, + color: selected == FormData.password + ? enabledtxt + : deaible, + size: 20, + ), + onPressed: () => setState( + () => ispasswordev = !ispasswordev), + ), + hintText: 'Password', + hintStyle: TextStyle( + color: selected == FormData.password + ? enabledtxt + : deaible, + fontSize: 12)), + obscureText: ispasswordev, + textAlignVertical: TextAlignVertical.center, + style: TextStyle( + color: selected == FormData.password + ? enabledtxt + : deaible, + fontWeight: FontWeight.bold, + fontSize: 12), + ), + ), + ), + const SizedBox( + height: 20, + ), + FadeAnimation( + delay: 1, + child: TextButton( + onPressed: () { + // Navigator.pop(context); + // Navigator.of(context) + // .push(MaterialPageRoute(builder: (context) { + // return MyApp(isLogin: true); + // })); + }, + style: TextButton.styleFrom( + backgroundColor: Color(0x95BDFFff), + padding: const EdgeInsets.symmetric( + vertical: 14.0, horizontal: 80), + shape: RoundedRectangleBorder( + borderRadius: + BorderRadius.circular(12.0))), + child: const Text( + "Login", + style: TextStyle( + color: Colors.black, + letterSpacing: 0.5, + fontSize: 20.0, + fontWeight: FontWeight.bold, + ), + )), + ), + ], + ), + ), + ), + + //End of Center Card + //Start of outer card + const SizedBox( + height: 20, + ), + FadeAnimation( + delay: 1, + child: GestureDetector( + onTap: (() { + Navigator.pop(context); + Navigator.of(context) + .push(MaterialPageRoute(builder: (context) { + return ForgotPasswordScreen(); + })); + }), + child: const Text("Can't Log In?", + style: TextStyle( + color: Colors.black, + fontSize: 18, + fontStyle: FontStyle.italic, + letterSpacing: 0.5, + )), + ), + ), + const SizedBox(height: 10), + FadeAnimation( + delay: 1, + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + mainAxisSize: MainAxisSize.min, + children: [ + const Text("Don't have an account? ", + style: TextStyle( + color: Colors.black54, + fontSize: 18, + letterSpacing: 0.5, + )), + GestureDetector( + onTap: () { + Navigator.pop(context); + Navigator.of(context) + .push(MaterialPageRoute(builder: (context) { + return SignupScreen(); + })); + }, + child: Text("Sign up", + style: TextStyle( + color: Colors.black.withOpacity(0.9), + fontWeight: FontWeight.bold, + letterSpacing: 0.5, + fontSize: 18)), + ), + ], + ), + ), + ], + ), + ), + ), + ), + ); + } +} diff --git a/frontend/lib/Feature/Pin Code/Pin_Code_Screen.dart b/frontend/lib/Feature/Pin Code/Pin_Code_Screen.dart new file mode 100644 index 0000000..81e4b63 --- /dev/null +++ b/frontend/lib/Feature/Pin Code/Pin_Code_Screen.dart @@ -0,0 +1,342 @@ +import 'dart:async'; + +import 'package:flutter/material.dart'; +import 'package:lottie/lottie.dart'; +import 'package:pin_code_fields/pin_code_fields.dart'; + +import '../../Core/Animation/Fade_Animation.dart'; +import '../../Core/Colors/Hex_Color.dart'; +import '../Login Screen/Login_Screen.dart'; + +class PinCodeVerificationScreen extends StatefulWidget { + final String? phoneNumber; + + const PinCodeVerificationScreen({ + Key? key, + this.phoneNumber, + }) : super(key: key); + @override + State createState() => + _PinCodeVerificationScreenState(); +} + +class _PinCodeVerificationScreenState extends State { + TextEditingController textEditingController = TextEditingController(); + // ignore: close_sinks + StreamController? errorController; + + bool hasError = false; + String currentText = ""; + final formKey = GlobalKey(); + + @override + void initState() { + errorController = StreamController(); + super.initState(); + } + + @override + void dispose() { + errorController!.close(); + + super.dispose(); + } + + // snackBar Widget + snackBar(String? message) { + return ScaffoldMessenger.of(context).showSnackBar( + SnackBar( + content: Text(message!), + duration: const Duration(seconds: 2), + ), + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Container( + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + stops: const [0.1, 0.4, 0.7, 0.9], + colors: [ + HexColor("#B4E4FF"), + HexColor("#F7C8E0"), + HexColor("#B4E4FF"), + HexColor("#F7C8E0") + ], + ), + image: DecorationImage( + fit: BoxFit.cover, + colorFilter: ColorFilter.mode( + HexColor("#fff").withOpacity(0), BlendMode.dstATop), + image: const NetworkImage( + 'https://mir-s3-cdn-cf.behance.net/project_modules/fs/01b4bd84253993.5d56acc35e143.jpg', + ), + ), + ), + child: Center( + child: SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Card( + elevation: 5, + color: const Color.fromARGB(255, 236, 118, 174), + child: Container( + width: 500, + padding: const EdgeInsets.all(30.0), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8), + ), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + FadeAnimation( + delay: 0.8, + child: Lottie.network( + 'https://assets5.lottiefiles.com/packages/lf20_Mbg0iw.json', + width: 100, + height: 100, + ), + ), + const SizedBox( + height: 10, + ), + FadeAnimation( + delay: 1, + child: Container( + child: Text( + "Let us help you", + style: TextStyle( + color: Colors.black.withOpacity(0.9), + fontSize: 20, + letterSpacing: 0.5), + ), + ), + ), + const SizedBox( + height: 20, + ), + const Padding( + padding: EdgeInsets.symmetric(vertical: 8.0), + child: Text( + 'Phone Number Verification', + style: TextStyle( + fontWeight: FontWeight.bold, fontSize: 22), + textAlign: TextAlign.center, + ), + ), + Padding( + padding: const EdgeInsets.symmetric( + horizontal: 30.0, vertical: 8), + child: RichText( + text: TextSpan( + text: "Enter the code sent to ", + children: [ + TextSpan( + text: "${widget.phoneNumber}", + style: const TextStyle( + color: Colors.black, + fontWeight: FontWeight.bold, + fontSize: 15)), + ], + style: const TextStyle( + color: Colors.black54, fontSize: 15)), + textAlign: TextAlign.center, + ), + ), + const SizedBox( + height: 20, + ), + Form( + key: formKey, + child: PinCodeTextField( + appContext: context, + pastedTextStyle: TextStyle( + color: Theme.of(context).primaryColor, + fontWeight: FontWeight.bold, + ), + length: 6, + obscureText: true, + obscuringCharacter: '*', + obscuringWidget: const Icon( + Icons.pets, + color: Colors.blue, + size: 24, + ), + blinkWhenObscuring: true, + animationType: AnimationType.fade, + validator: (v) { + if (v!.length < 3) { + return "Validate me"; + } else { + return null; + } + }, + pinTheme: PinTheme( + shape: PinCodeFieldShape.box, + borderRadius: BorderRadius.circular(5), + fieldHeight: 50, + fieldWidth: 40, + activeFillColor: Colors.white, + inactiveFillColor: Colors.white), + cursorColor: Colors.black, + animationDuration: + const Duration(milliseconds: 300), + enableActiveFill: true, + errorAnimationController: errorController, + controller: textEditingController, + keyboardType: TextInputType.number, + boxShadows: const [ + BoxShadow( + offset: Offset(0, 1), + color: Colors.black12, + blurRadius: 10, + ) + ], + onCompleted: (v) { + debugPrint("Completed"); + }, + // onTap: () { + // print("Pressed"); + // }, + onChanged: (value) { + debugPrint(value); + setState(() { + currentText = value; + }); + }, + beforeTextPaste: (text) { + debugPrint("Allowing to paste $text"); + //if you return true then it will show the paste confirmation dialog. Otherwise if false, then nothing will happen. + //but you can show anything you want here, like your pop up saying wrong paste format or etc + return true; + }, + ), + ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 30.0), + child: Text( + hasError + ? "*Please fill up all the cells properly" + : "", + style: const TextStyle( + color: Colors.red, + fontSize: 12, + fontWeight: FontWeight.w400), + ), + ), + const SizedBox( + height: 20, + ), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Text( + "Didn't receive the code? ", + style: TextStyle( + color: Colors.black54, fontSize: 15), + ), + TextButton( + onPressed: () => snackBar("OTP resend!!"), + child: const Text( + "RESEND", + style: TextStyle( + color: Color(0xffffffff), + fontWeight: FontWeight.bold, + fontSize: 16), + ), + ) + ], + ), + const SizedBox( + height: 25, + ), + FadeAnimation( + delay: 1, + child: TextButton( + onPressed: () { + formKey.currentState!.validate(); + // conditions for validating + if (currentText.length != 6 || + currentText != "123456") { + errorController!.add(ErrorAnimationType + .shake); // Triggering error shake animation + setState(() => hasError = true); + } else { + setState( + () { + hasError = false; + snackBar("OTP Verified!!"); + }, + ); + } + }, + style: TextButton.styleFrom( + backgroundColor: const Color(0x95BDFFff), + padding: const EdgeInsets.symmetric( + vertical: 14.0, horizontal: 80), + shape: RoundedRectangleBorder( + borderRadius: + BorderRadius.circular(12.0))), + child: const Text( + "Verify", + style: TextStyle( + color: Colors.black, + letterSpacing: 0.5, + fontSize: 16.0, + fontWeight: FontWeight.bold, + ), + )), + ), + ], + ), + ), + ), + + //End of Center Card + //Start of outer card + const SizedBox( + height: 20, + ), + + FadeAnimation( + delay: 1, + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + mainAxisSize: MainAxisSize.min, + children: [ + const Text("Want to try again? ", + style: TextStyle( + color: Colors.black54, + letterSpacing: 0.5, + )), + GestureDetector( + onTap: () { + Navigator.pop(context); + Navigator.of(context) + .push(MaterialPageRoute(builder: (context) { + return LoginScreen(); + })); + }, + child: Text("Sign in", + style: TextStyle( + color: Colors.black.withOpacity(0.9), + fontWeight: FontWeight.bold, + letterSpacing: 0.5, + fontSize: 14)), + ), + ], + ), + ), + ], + ), + ), + ), + ), + ); + } +} diff --git a/frontend/lib/Feature/Sign Up Screen/SignUp_Screen.dart b/frontend/lib/Feature/Sign Up Screen/SignUp_Screen.dart new file mode 100644 index 0000000..3d9f3c4 --- /dev/null +++ b/frontend/lib/Feature/Sign Up Screen/SignUp_Screen.dart @@ -0,0 +1,443 @@ +import 'package:flutter/material.dart'; +import 'package:lottie/lottie.dart'; + +import '../../Core/Animation/Fade_Animation.dart'; +import '../../Core/Colors/Hex_Color.dart'; +import '../Login Screen/Login_Screen.dart'; + +enum FormData { Name, Phone, Email, Gender, password, ConfirmPassword } + +class SignupScreen extends StatefulWidget { + @override + State createState() => _SignupScreenState(); +} + +class _SignupScreenState extends State { + Color enabled = const Color.fromARGB(255, 63, 56, 89); + Color enabledtxt = Colors.white; + Color deaible = Colors.grey; + Color backgroundColor = const Color(0xFF1F1A30); + bool ispasswordev = true; + + FormData? selected; + + TextEditingController nameController = new TextEditingController(); + TextEditingController phoneController = new TextEditingController(); + TextEditingController emailController = new TextEditingController(); + TextEditingController passwordController = new TextEditingController(); + TextEditingController confirmPasswordController = new TextEditingController(); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Container( + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + stops: const [0.1, 0.4, 0.7, 0.9], + colors: [ + HexColor("#B4E4FF").withOpacity(0.8), + HexColor("#F7C8E0"), + HexColor("#B4E4FF"), + HexColor("#F7C8E0") + ], + ), + ), + child: Center( + child: SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Card( + elevation: 5, + color: + const Color.fromARGB(255, 222, 88, 138).withOpacity(0.7), + child: Container( + width: 400, + padding: const EdgeInsets.all(40.0), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8), + ), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + FadeAnimation( + delay: 0.8, + child: Lottie.network( + 'https://assets2.lottiefiles.com/packages/lf20_mjlh3hcy.json', + width: 100, + height: 100, + ), + ), + const SizedBox( + height: 10, + ), + FadeAnimation( + delay: 1, + child: Container( + child: Text( + "Create your account", + style: TextStyle( + color: Colors.black, + fontSize: 22, + letterSpacing: 0.5), + ), + ), + ), + const SizedBox( + height: 20, + ), + FadeAnimation( + delay: 1, + child: Container( + width: 300, + height: 40, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(12.0), + color: selected == FormData.Email + ? enabled + : backgroundColor, + ), + padding: const EdgeInsets.all(5.0), + child: TextField( + controller: nameController, + onTap: () { + setState(() { + selected = FormData.Name; + }); + }, + decoration: InputDecoration( + enabledBorder: InputBorder.none, + border: InputBorder.none, + prefixIcon: Icon( + Icons.title, + color: selected == FormData.Name + ? enabledtxt + : deaible, + size: 20, + ), + hintText: 'Full Name', + hintStyle: TextStyle( + color: selected == FormData.Name + ? enabledtxt + : deaible, + fontSize: 12), + ), + textAlignVertical: TextAlignVertical.center, + style: TextStyle( + color: selected == FormData.Name + ? enabledtxt + : deaible, + fontWeight: FontWeight.bold, + fontSize: 12), + ), + ), + ), + const SizedBox( + height: 20, + ), + FadeAnimation( + delay: 1, + child: Container( + width: 300, + height: 40, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(12.0), + color: selected == FormData.Phone + ? enabled + : backgroundColor, + ), + padding: const EdgeInsets.all(5.0), + child: TextField( + controller: phoneController, + onTap: () { + setState(() { + selected = FormData.Phone; + }); + }, + decoration: InputDecoration( + enabledBorder: InputBorder.none, + border: InputBorder.none, + prefixIcon: Icon( + Icons.phone_android_rounded, + color: selected == FormData.Phone + ? enabledtxt + : deaible, + size: 20, + ), + hintText: 'Phone Number', + hintStyle: TextStyle( + color: selected == FormData.Phone + ? enabledtxt + : deaible, + fontSize: 12), + ), + textAlignVertical: TextAlignVertical.center, + style: TextStyle( + color: selected == FormData.Phone + ? enabledtxt + : deaible, + fontWeight: FontWeight.bold, + fontSize: 12), + ), + ), + ), + const SizedBox( + height: 20, + ), + FadeAnimation( + delay: 1, + child: Container( + width: 300, + height: 40, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(12.0), + color: selected == FormData.Email + ? enabled + : backgroundColor, + ), + padding: const EdgeInsets.all(5.0), + child: TextField( + controller: emailController, + onTap: () { + setState(() { + selected = FormData.Email; + }); + }, + decoration: InputDecoration( + enabledBorder: InputBorder.none, + border: InputBorder.none, + prefixIcon: Icon( + Icons.email_outlined, + color: selected == FormData.Email + ? enabledtxt + : deaible, + size: 20, + ), + hintText: 'Email', + hintStyle: TextStyle( + color: selected == FormData.Email + ? enabledtxt + : deaible, + fontSize: 12), + ), + textAlignVertical: TextAlignVertical.center, + style: TextStyle( + color: selected == FormData.Email + ? enabledtxt + : deaible, + fontWeight: FontWeight.bold, + fontSize: 12), + ), + ), + ), + const SizedBox( + height: 20, + ), + FadeAnimation( + delay: 1, + child: Container( + width: 300, + height: 40, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(12.0), + color: selected == FormData.password + ? enabled + : backgroundColor), + padding: const EdgeInsets.all(5.0), + child: TextField( + controller: passwordController, + onTap: () { + setState(() { + selected = FormData.password; + }); + }, + decoration: InputDecoration( + enabledBorder: InputBorder.none, + border: InputBorder.none, + prefixIcon: Icon( + Icons.lock_open_outlined, + color: selected == FormData.password + ? enabledtxt + : deaible, + size: 20, + ), + suffixIcon: IconButton( + icon: ispasswordev + ? Icon( + Icons.visibility_off, + color: selected == FormData.password + ? enabledtxt + : deaible, + size: 20, + ) + : Icon( + Icons.visibility, + color: selected == FormData.password + ? enabledtxt + : deaible, + size: 20, + ), + onPressed: () => setState( + () => ispasswordev = !ispasswordev), + ), + hintText: 'Password', + hintStyle: TextStyle( + color: selected == FormData.password + ? enabledtxt + : deaible, + fontSize: 12)), + obscureText: ispasswordev, + textAlignVertical: TextAlignVertical.center, + style: TextStyle( + color: selected == FormData.password + ? enabledtxt + : deaible, + fontWeight: FontWeight.bold, + fontSize: 12), + ), + ), + ), + const SizedBox( + height: 20, + ), + FadeAnimation( + delay: 1, + child: Container( + width: 300, + height: 40, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(12.0), + color: selected == FormData.ConfirmPassword + ? enabled + : backgroundColor), + padding: const EdgeInsets.all(5.0), + child: TextField( + controller: confirmPasswordController, + onTap: () { + setState(() { + selected = FormData.ConfirmPassword; + }); + }, + decoration: InputDecoration( + enabledBorder: InputBorder.none, + border: InputBorder.none, + prefixIcon: Icon( + Icons.lock_open_outlined, + color: selected == FormData.ConfirmPassword + ? enabledtxt + : deaible, + size: 20, + ), + suffixIcon: IconButton( + icon: ispasswordev + ? Icon( + Icons.visibility_off, + color: selected == + FormData.ConfirmPassword + ? enabledtxt + : deaible, + size: 20, + ) + : Icon( + Icons.visibility, + color: selected == + FormData.ConfirmPassword + ? enabledtxt + : deaible, + size: 20, + ), + onPressed: () => setState( + () => ispasswordev = !ispasswordev), + ), + hintText: 'Confirm Password', + hintStyle: TextStyle( + color: + selected == FormData.ConfirmPassword + ? enabledtxt + : deaible, + fontSize: 12)), + obscureText: ispasswordev, + textAlignVertical: TextAlignVertical.center, + style: TextStyle( + color: selected == FormData.ConfirmPassword + ? enabledtxt + : deaible, + fontWeight: FontWeight.bold, + fontSize: 12), + ), + ), + ), + const SizedBox( + height: 25, + ), + FadeAnimation( + delay: 1, + child: TextButton( + onPressed: () {}, + style: TextButton.styleFrom( + backgroundColor: const Color(0x95BDFFff), + padding: const EdgeInsets.symmetric( + vertical: 14.0, horizontal: 80), + shape: RoundedRectangleBorder( + borderRadius: + BorderRadius.circular(12.0))), + child: const Text( + "Sign Up", + style: TextStyle( + color: Colors.black, + letterSpacing: 0.5, + fontSize: 16.0, + fontWeight: FontWeight.bold, + ), + )), + ), + ], + ), + ), + ), + + //End of Center Card + //Start of outer card + const SizedBox( + height: 20, + ), + + FadeAnimation( + delay: 1, + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + mainAxisSize: MainAxisSize.min, + children: [ + const Text("If you have an account ", + style: TextStyle( + color: Colors.black54, + letterSpacing: 0.5, + )), + GestureDetector( + onTap: () { + Navigator.pop(context); + Navigator.of(context) + .push(MaterialPageRoute(builder: (context) { + return LoginScreen(); + })); + }, + child: Text("Sign in", + style: TextStyle( + color: Colors.black, + fontWeight: FontWeight.bold, + letterSpacing: 0.5, + fontSize: 14)), + ), + ], + ), + ), + ], + ), + ), + ), + ), + ); + } +} diff --git a/frontend/pubspec.yaml b/frontend/pubspec.yaml index 1423846..298d510 100644 --- a/frontend/pubspec.yaml +++ b/frontend/pubspec.yaml @@ -1,4 +1,4 @@ -name: prettify1 +name: login_ui description: A new Flutter project. # The following line prevents the package from being accidentally published to @@ -31,14 +31,16 @@ environment: dependencies: flutter: sdk: flutter - image_picker: ^0.8.4+4 - path_provider: ^2.0.8 # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.2 - lottie: ^2.2.0 + simple_animations: ^4.1.0 + supercharged: ^2.1.1 + build_runner: ^2.1.11 + build_web_compilers: ^3.2.3 + pin_code_fields: ^7.4.0 dev_dependencies: flutter_test: @@ -50,6 +52,8 @@ dev_dependencies: # package. See that file for information about deactivating specific lint # rules and activating additional ones. flutter_lints: ^2.0.0 + characters: ^1.2.0 + permission_handler: ^5.1.0+2 # For information on the generic Dart part of this file, see the # following page: https://dart.dev/tools/pub/pubspec @@ -63,8 +67,9 @@ flutter: uses-material-design: true # To add assets to your application, add an assets section, like this: - assets: - - images/ + # assets: + # - images/a_dot_burr.jpeg + # - images/a_dot_ham.jpeg # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.dev/assets-and-images/#resolution-aware