From 3284bf99edd381c8c48cd376556d77e9b783bc2d Mon Sep 17 00:00:00 2001 From: IthavinduU Date: Sat, 25 Mar 2023 16:35:23 +0530 Subject: [PATCH 1/5] updated pubspec --- frontend/pubspec.yaml | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) 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 From 83126dd66cba8d629c5e469711825cbe04a8c96c Mon Sep 17 00:00:00 2001 From: IthavinduU Date: Sat, 25 Mar 2023 17:15:32 +0530 Subject: [PATCH 2/5] Updated UI --- .../Forgot_Password_Screen.dart | 218 +++++++++ .../Feature/Login Screen/Login_Screen.dart | 302 ++++++++++++ .../lib/Feature/Pin Code/Pin_Code_Screen.dart | 341 +++++++++++++ .../Feature/Sign Up Screen/SignUp_Screen.dart | 449 ++++++++++++++++++ 4 files changed, 1310 insertions(+) create mode 100644 frontend/lib/Feature/Forgot Password/Forgot_Password_Screen.dart create mode 100644 frontend/lib/Feature/Login Screen/Login_Screen.dart create mode 100644 frontend/lib/Feature/Pin Code/Pin_Code_Screen.dart create mode 100644 frontend/lib/Feature/Sign Up Screen/SignUp_Screen.dart 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..0e899e1 --- /dev/null +++ b/frontend/lib/Feature/Forgot Password/Forgot_Password_Screen.dart @@ -0,0 +1,218 @@ +import 'package:flutter/material.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("#4b4293").withOpacity(0.8), + HexColor("#4b4293"), + HexColor("#08418e"), + HexColor("#08418e") + ], + ), + image: DecorationImage( + fit: BoxFit.cover, + colorFilter: ColorFilter.mode( + HexColor("#fff").withOpacity(0.2), 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, 171, 211, 250).withOpacity(0.4), + 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: Image.network( + "CsDWgAcAB4AIABhwGIAe4FkgEDMC42mAEAoAEBqgELZ3dzLXdpei1pbWfAAQE&sclient=img&ei=47QdZMnBI9GM8QOuvbmICw&bih=656&biw=1396&rlz=1C1GCEU_en-GBLK1045LK1045#imgrc=05tMcxFCgSEOiM", + 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: '0102756960', + ); + })); + }, + child: Text( + "Continue", + style: TextStyle( + color: Colors.white, + letterSpacing: 0.5, + fontSize: 16.0, + fontWeight: FontWeight.bold, + ), + ), + style: TextButton.styleFrom( + backgroundColor: const Color(0xFF2697FF), + 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("Sing 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..31d5319 --- /dev/null +++ b/frontend/lib/Feature/Login Screen/Login_Screen.dart @@ -0,0 +1,302 @@ +import 'package:flutter/material.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") + ], + ), + image: DecorationImage( + fit: BoxFit.cover, + colorFilter: ColorFilter.mode( + HexColor("#fff").withOpacity(0.2), 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).withOpacity(0.4), + 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: Image.network( + "https://cdni.iconscout.com/illustration/premium/thumb/job-starting-date-2537382-2146478.png", + width: 100, + height: 100, + ), + ), + 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(0xF7C8E0), + 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: Text("Can't Log In?", + style: TextStyle( + color: Colors.black.withOpacity(0.9), + 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, + 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: 14)), + ), + ], + ), + ), + ], + ), + ), + ), + ), + ); + } +} 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..a706a47 --- /dev/null +++ b/frontend/lib/Feature/Pin Code/Pin_Code_Screen.dart @@ -0,0 +1,341 @@ +import 'dart:async'; + +import 'package:flutter/material.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("#4b4293").withOpacity(0.8), + HexColor("#4b4293"), + HexColor("#08418e"), + HexColor("#08418e") + ], + ), + image: DecorationImage( + fit: BoxFit.cover, + colorFilter: ColorFilter.mode( + HexColor("#fff").withOpacity(0.2), 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, 171, 211, 250).withOpacity(0.4), + 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: Image.network( + "https://cdni.iconscout.com/illustration/premium/thumb/job-starting-date-2537382-2146478.png", + 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, + ), + 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(0xFF91D3B3), + 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!!"); + }, + ); + } + }, + child: Text( + "Verify", + style: TextStyle( + color: Colors.white, + letterSpacing: 0.5, + fontSize: 16.0, + fontWeight: FontWeight.bold, + ), + ), + style: TextButton.styleFrom( + backgroundColor: const Color(0xFF2697FF), + 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("Sing in", + style: TextStyle( + color: Colors.white.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..2d7db30 --- /dev/null +++ b/frontend/lib/Feature/Sign Up Screen/SignUp_Screen.dart @@ -0,0 +1,449 @@ +import 'package:flutter/material.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("#4b4293").withOpacity(0.8), + HexColor("#4b4293"), + HexColor("#08418e"), + HexColor("#08418e") + ], + ), + image: DecorationImage( + fit: BoxFit.cover, + colorFilter: ColorFilter.mode( + HexColor("#fff").withOpacity(0.2), 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, 171, 211, 250).withOpacity(0.4), + 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: Image.network( + "https://cdni.iconscout.com/illustration/premium/thumb/job-starting-date-2537382-2146478.png", + width: 100, + height: 100, + ), + ), + const SizedBox( + height: 10, + ), + FadeAnimation( + delay: 1, + child: Container( + child: Text( + "Create your account", + 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: 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: () {}, + child: Text( + "Sign Up", + style: TextStyle( + color: Colors.white, + letterSpacing: 0.5, + fontSize: 16.0, + fontWeight: FontWeight.bold, + ), + ), + style: TextButton.styleFrom( + backgroundColor: const Color(0xFF2697FF), + 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("If you have an account ", + style: TextStyle( + color: Colors.grey, + letterSpacing: 0.5, + )), + GestureDetector( + onTap: () { + Navigator.pop(context); + Navigator.of(context) + .push(MaterialPageRoute(builder: (context) { + return LoginScreen(); + })); + }, + child: Text("Sing in", + style: TextStyle( + color: Colors.white.withOpacity(0.9), + fontWeight: FontWeight.bold, + letterSpacing: 0.5, + fontSize: 14)), + ), + ], + ), + ), + ], + ), + ), + ), + ), + ); + } +} From c617751d97b3427a6942ab7623feb539444d3dc9 Mon Sep 17 00:00:00 2001 From: IthavinduU Date: Sat, 25 Mar 2023 19:50:38 +0530 Subject: [PATCH 3/5] signup page --- frontend/lib/Feature/Sign Up Screen/SignUp_Screen.dart | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/lib/Feature/Sign Up Screen/SignUp_Screen.dart b/frontend/lib/Feature/Sign Up Screen/SignUp_Screen.dart index 2d7db30..813aecf 100644 --- a/frontend/lib/Feature/Sign Up Screen/SignUp_Screen.dart +++ b/frontend/lib/Feature/Sign Up Screen/SignUp_Screen.dart @@ -1,7 +1,7 @@ import 'package:flutter/material.dart'; -import '../../Core/Animation/Fade_Animation.dart'; -import '../../Core/Colors/Hex_Color.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 } From f26fc7cfba7ca8ec7b25203c7748b67deaa6de5d Mon Sep 17 00:00:00 2001 From: IthavinduU Date: Sun, 26 Mar 2023 01:23:31 +0530 Subject: [PATCH 4/5] Improved UI pages --- frontend/.dart_tool/version | 1 + .../Forgot_Password_Screen.dart | 33 +++++------ .../Feature/Login Screen/Login_Screen.dart | 40 ++++++------- .../Feature/Sign Up Screen/SignUp_Screen.dart | 56 +++++++++---------- 4 files changed, 61 insertions(+), 69 deletions(-) create mode 100644 frontend/.dart_tool/version 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 index 0e899e1..2f88b02 100644 --- a/frontend/lib/Feature/Forgot Password/Forgot_Password_Screen.dart +++ b/frontend/lib/Feature/Forgot Password/Forgot_Password_Screen.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:lottie/lottie.dart'; import '../../Core/Animation/Fade_Animation.dart'; import '../../Core/Colors/Hex_Color.dart'; @@ -17,7 +18,7 @@ class _ForgotPasswordScreenState extends State { Color enabledtxt = Colors.white; Color deaible = Colors.grey; Color backgroundColor = const Color(0xFF1F1A30); - bool ispasswordev = true; + bool ispasswordev = true; FormData? selected; @@ -33,18 +34,18 @@ class _ForgotPasswordScreenState extends State { end: Alignment.bottomRight, stops: const [0.1, 0.4, 0.7, 0.9], colors: [ - HexColor("#4b4293").withOpacity(0.8), - HexColor("#4b4293"), - HexColor("#08418e"), - HexColor("#08418e") + 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: const NetworkImage( - 'https://mir-s3-cdn-cf.behance.net/project_modules/fs/01b4bd84253993.5d56acc35e143.jpg', + image: NetworkImage( + 'https://assets7.lottiefiles.com/private_files/lf30_GjhcdO.json', ), ), ), @@ -55,8 +56,7 @@ class _ForgotPasswordScreenState extends State { children: [ Card( elevation: 5, - color: - const Color.fromARGB(255, 171, 211, 250).withOpacity(0.4), + color: const Color.fromARGB(255, 236, 118, 174), child: Container( width: 400, padding: const EdgeInsets.all(40.0), @@ -68,8 +68,8 @@ class _ForgotPasswordScreenState extends State { children: [ FadeAnimation( delay: 0.8, - child: Image.network( - "CsDWgAcAB4AIABhwGIAe4FkgEDMC42mAEAoAEBqgELZ3dzLXdpei1pbWfAAQE&sclient=img&ei=47QdZMnBI9GM8QOuvbmICw&bih=656&biw=1396&rlz=1C1GCEU_en-GBLK1045LK1045#imgrc=05tMcxFCgSEOiM", + child: Lottie.network( + 'https://assets7.lottiefiles.com/private_files/lf30_GjhcdO.json', width: 100, height: 100, ), @@ -116,7 +116,8 @@ class _ForgotPasswordScreenState extends State { prefixIcon: Icon( Icons.email_outlined, color: selected == FormData.Email - ? enabledtxt : deaible, + ? enabledtxt + : deaible, size: 20, ), hintText: 'Email', @@ -147,21 +148,21 @@ class _ForgotPasswordScreenState extends State { Navigator.of(context) .push(MaterialPageRoute(builder: (context) { return const PinCodeVerificationScreen( - phoneNumber: '0102756960', + phoneNumber: '', ); })); }, child: Text( "Continue", style: TextStyle( - color: Colors.white, + color: Colors.black, letterSpacing: 0.5, fontSize: 16.0, fontWeight: FontWeight.bold, ), ), style: TextButton.styleFrom( - backgroundColor: const Color(0xFF2697FF), + backgroundColor: Color(0x95BDFFff), padding: const EdgeInsets.symmetric( vertical: 14.0, horizontal: 80), shape: RoundedRectangleBorder( @@ -198,7 +199,7 @@ class _ForgotPasswordScreenState extends State { return LoginScreen(); })); }, - child: Text("Sing in", + child: Text("Sign in", style: TextStyle( color: Colors.white.withOpacity(0.9), fontWeight: FontWeight.bold, diff --git a/frontend/lib/Feature/Login Screen/Login_Screen.dart b/frontend/lib/Feature/Login Screen/Login_Screen.dart index 31d5319..718935b 100644 --- a/frontend/lib/Feature/Login Screen/Login_Screen.dart +++ b/frontend/lib/Feature/Login Screen/Login_Screen.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:lottie/lottie.dart'; import '../../Core/Animation/Fade_Animation.dart'; import '../../Core/Colors/Hex_Color.dart'; @@ -42,14 +43,6 @@ class _LoginScreenState extends State { HexColor("#F7C8E0") ], ), - image: DecorationImage( - fit: BoxFit.cover, - colorFilter: ColorFilter.mode( - HexColor("#fff").withOpacity(0.2), BlendMode.dstATop), - image: const NetworkImage( - 'https://mir-s3-cdn-cf.behance.net/project_modules/fs/01b4bd84253993.5d56acc35e143.jpg', - ), - ), ), child: Center( child: SingleChildScrollView( @@ -58,23 +51,22 @@ class _LoginScreenState extends State { children: [ Card( elevation: 5, - color: - const Color.fromARGB(255, 236, 118, 174).withOpacity(0.4), + color: const Color.fromARGB(255, 236, 118, 174), child: Container( width: 400, - padding: const EdgeInsets.all(40.0), + padding: const EdgeInsets.all(40), decoration: BoxDecoration( - borderRadius: BorderRadius.circular(8), + borderRadius: BorderRadius.circular(30), ), child: Column( mainAxisSize: MainAxisSize.min, children: [ FadeAnimation( delay: 0.8, - child: Image.network( - "https://cdni.iconscout.com/illustration/premium/thumb/job-starting-date-2537382-2146478.png", - width: 100, - height: 100, + child: Lottie.network( + 'https://assets4.lottiefiles.com/packages/lf20_1t8na1gy.json', + width: 150, + height: 150, ), ), const SizedBox( @@ -85,8 +77,9 @@ class _LoginScreenState extends State { child: const Text( "Please log in to continue", style: TextStyle( - fontSize: 22, - color: Colors.black, letterSpacing: 0.5), + fontSize: 22, + color: Colors.black, + letterSpacing: 0.5), ), ), const SizedBox( @@ -219,7 +212,7 @@ class _LoginScreenState extends State { // })); }, style: TextButton.styleFrom( - backgroundColor: Color(0xF7C8E0), + backgroundColor: Color(0x95BDFFff), padding: const EdgeInsets.symmetric( vertical: 14.0, horizontal: 80), shape: RoundedRectangleBorder( @@ -255,9 +248,11 @@ class _LoginScreenState extends State { return ForgotPasswordScreen(); })); }), - child: Text("Can't Log In?", + child: const Text("Can't Log In?", style: TextStyle( - color: Colors.black.withOpacity(0.9), + color: Colors.black, + fontSize: 18, + fontStyle: FontStyle.italic, letterSpacing: 0.5, )), ), @@ -272,6 +267,7 @@ class _LoginScreenState extends State { const Text("Don't have an account? ", style: TextStyle( color: Colors.black54, + fontSize: 18, letterSpacing: 0.5, )), GestureDetector( @@ -287,7 +283,7 @@ class _LoginScreenState extends State { color: Colors.black.withOpacity(0.9), fontWeight: FontWeight.bold, letterSpacing: 0.5, - fontSize: 14)), + fontSize: 18)), ), ], ), diff --git a/frontend/lib/Feature/Sign Up Screen/SignUp_Screen.dart b/frontend/lib/Feature/Sign Up Screen/SignUp_Screen.dart index 813aecf..3d9f3c4 100644 --- a/frontend/lib/Feature/Sign Up Screen/SignUp_Screen.dart +++ b/frontend/lib/Feature/Sign Up Screen/SignUp_Screen.dart @@ -1,7 +1,8 @@ import 'package:flutter/material.dart'; +import 'package:lottie/lottie.dart'; -import '../../../Core/Animation/Fade_Animation.dart'; -import '../../../Core/Colors/Hex_Color.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 } @@ -36,20 +37,12 @@ class _SignupScreenState extends State { end: Alignment.bottomRight, stops: const [0.1, 0.4, 0.7, 0.9], colors: [ - HexColor("#4b4293").withOpacity(0.8), - HexColor("#4b4293"), - HexColor("#08418e"), - HexColor("#08418e") + 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: const NetworkImage( - 'https://mir-s3-cdn-cf.behance.net/project_modules/fs/01b4bd84253993.5d56acc35e143.jpg', - ), - ), ), child: Center( child: SingleChildScrollView( @@ -59,7 +52,7 @@ class _SignupScreenState extends State { Card( elevation: 5, color: - const Color.fromARGB(255, 171, 211, 250).withOpacity(0.4), + const Color.fromARGB(255, 222, 88, 138).withOpacity(0.7), child: Container( width: 400, padding: const EdgeInsets.all(40.0), @@ -71,8 +64,8 @@ class _SignupScreenState extends State { children: [ FadeAnimation( delay: 0.8, - child: Image.network( - "https://cdni.iconscout.com/illustration/premium/thumb/job-starting-date-2537382-2146478.png", + child: Lottie.network( + 'https://assets2.lottiefiles.com/packages/lf20_mjlh3hcy.json', width: 100, height: 100, ), @@ -86,7 +79,8 @@ class _SignupScreenState extends State { child: Text( "Create your account", style: TextStyle( - color: Colors.white.withOpacity(0.9), + color: Colors.black, + fontSize: 22, letterSpacing: 0.5), ), ), @@ -382,22 +376,22 @@ class _SignupScreenState extends State { delay: 1, child: TextButton( onPressed: () {}, - child: Text( + 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.white, + color: Colors.black, letterSpacing: 0.5, fontSize: 16.0, fontWeight: FontWeight.bold, ), - ), - style: TextButton.styleFrom( - backgroundColor: const Color(0xFF2697FF), - padding: const EdgeInsets.symmetric( - vertical: 14.0, horizontal: 80), - shape: RoundedRectangleBorder( - borderRadius: - BorderRadius.circular(12.0)))), + )), ), ], ), @@ -418,7 +412,7 @@ class _SignupScreenState extends State { children: [ const Text("If you have an account ", style: TextStyle( - color: Colors.grey, + color: Colors.black54, letterSpacing: 0.5, )), GestureDetector( @@ -429,9 +423,9 @@ class _SignupScreenState extends State { return LoginScreen(); })); }, - child: Text("Sing in", + child: Text("Sign in", style: TextStyle( - color: Colors.white.withOpacity(0.9), + color: Colors.black, fontWeight: FontWeight.bold, letterSpacing: 0.5, fontSize: 14)), From 846a94c966e0caa361dfa23252edd740ae2f23e2 Mon Sep 17 00:00:00 2001 From: IthavinduU Date: Sun, 26 Mar 2023 17:03:06 +0530 Subject: [PATCH 5/5] pincode UI --- .../lib/Feature/Pin Code/Pin_Code_Screen.dart | 49 ++++++++++--------- 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/frontend/lib/Feature/Pin Code/Pin_Code_Screen.dart b/frontend/lib/Feature/Pin Code/Pin_Code_Screen.dart index a706a47..81e4b63 100644 --- a/frontend/lib/Feature/Pin Code/Pin_Code_Screen.dart +++ b/frontend/lib/Feature/Pin Code/Pin_Code_Screen.dart @@ -1,6 +1,7 @@ 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'; @@ -61,16 +62,16 @@ class _PinCodeVerificationScreenState extends State { end: Alignment.bottomRight, stops: const [0.1, 0.4, 0.7, 0.9], colors: [ - HexColor("#4b4293").withOpacity(0.8), - HexColor("#4b4293"), - HexColor("#08418e"), - HexColor("#08418e") + HexColor("#B4E4FF"), + HexColor("#F7C8E0"), + HexColor("#B4E4FF"), + HexColor("#F7C8E0") ], ), image: DecorationImage( fit: BoxFit.cover, colorFilter: ColorFilter.mode( - HexColor("#fff").withOpacity(0.2), BlendMode.dstATop), + HexColor("#fff").withOpacity(0), BlendMode.dstATop), image: const NetworkImage( 'https://mir-s3-cdn-cf.behance.net/project_modules/fs/01b4bd84253993.5d56acc35e143.jpg', ), @@ -83,8 +84,7 @@ class _PinCodeVerificationScreenState extends State { children: [ Card( elevation: 5, - color: - const Color.fromARGB(255, 171, 211, 250).withOpacity(0.4), + color: const Color.fromARGB(255, 236, 118, 174), child: Container( width: 500, padding: const EdgeInsets.all(30.0), @@ -96,8 +96,8 @@ class _PinCodeVerificationScreenState extends State { children: [ FadeAnimation( delay: 0.8, - child: Image.network( - "https://cdni.iconscout.com/illustration/premium/thumb/job-starting-date-2537382-2146478.png", + child: Lottie.network( + 'https://assets5.lottiefiles.com/packages/lf20_Mbg0iw.json', width: 100, height: 100, ), @@ -111,7 +111,8 @@ class _PinCodeVerificationScreenState extends State { child: Text( "Let us help you", style: TextStyle( - color: Colors.white.withOpacity(0.9), + color: Colors.black.withOpacity(0.9), + fontSize: 20, letterSpacing: 0.5), ), ), @@ -244,7 +245,7 @@ class _PinCodeVerificationScreenState extends State { child: const Text( "RESEND", style: TextStyle( - color: Color(0xFF91D3B3), + color: Color(0xffffffff), fontWeight: FontWeight.bold, fontSize: 16), ), @@ -274,22 +275,22 @@ class _PinCodeVerificationScreenState extends State { ); } }, - child: Text( + 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.white, + color: Colors.black, letterSpacing: 0.5, fontSize: 16.0, fontWeight: FontWeight.bold, ), - ), - style: TextButton.styleFrom( - backgroundColor: const Color(0xFF2697FF), - padding: const EdgeInsets.symmetric( - vertical: 14.0, horizontal: 80), - shape: RoundedRectangleBorder( - borderRadius: - BorderRadius.circular(12.0)))), + )), ), ], ), @@ -310,7 +311,7 @@ class _PinCodeVerificationScreenState extends State { children: [ const Text("Want to try again? ", style: TextStyle( - color: Colors.grey, + color: Colors.black54, letterSpacing: 0.5, )), GestureDetector( @@ -321,9 +322,9 @@ class _PinCodeVerificationScreenState extends State { return LoginScreen(); })); }, - child: Text("Sing in", + child: Text("Sign in", style: TextStyle( - color: Colors.white.withOpacity(0.9), + color: Colors.black.withOpacity(0.9), fontWeight: FontWeight.bold, letterSpacing: 0.5, fontSize: 14)),