Forgot password UI 🖌️

lib/core/res/colors.dart

@@ -54,6 +54,11 @@ class C {
   //Speaker Card fonts
   static final Color cardFontColor = HexColor("#A3A3A3");
 
+  ///Otp ring colors
+  static final Color firstRing = HexColor("#2DEBFF");
+  static final Color secondRing = HexColor("#FB28E6");
+  static final Color thirdRing = HexColor("#EFEA79");
+  static final Color fourthRing = HexColor("#AE82FF");
   //BQuiz Gradient Colors
   static final Color bQuizGradient1 = HexColor("#ffc158");
   static final Color bQuizGradient2 = HexColor("#dd19ad");

lib/core/res/strings.dart

@@ -143,6 +143,7 @@ class S {
   static const routeEvents = "/events";
   static const routeSponsors = "/sponsors";
   static const routeEsummit = "/esummit";
+  static const routeForgotPassword = "/forgotPassword";
   static const routeTeam = "/team";
   static const routeAboutUs = "/about_us";
   static const routeBQuiz = "/bquiz";

lib/main.dart

@@ -1,3 +1,6 @@
+import 'package:ecellapp/screens/forgot_password/cubit/forgot_password_cubit.dart';
+import 'package:ecellapp/screens/forgot_password/forgot_password.dart';
+import 'package:ecellapp/screens/forgot_password/forgot_password_repository.dart';
 import 'package:ecellapp/screens/b_quiz/bquiz.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -63,6 +66,10 @@ class ECellApp extends StatelessWidget {
           S.routeSponsors: (_) => BlocProvider(
               create: (_) => SponsorsCubit(APISponsorsRepository()), child: SponsorsScreen()),
           S.routeEsummit: (_) => ESummitScreen(),
+          S.routeForgotPassword: (_) => BlocProvider(
+                create: (_) => ForgotPasswordCubit(FakeForgotPasswordRepository()),
+                child: ForgotPasswordScreen(),
+              ),
           S.routeBQuiz: (_) => BQuiz(),
           S.routeAboutUs: (_) =>
               BlocProvider(create: (_) => TeamCubit(FakeTeamRepository()), child: AboutUsScreen()),

lib/screens/forgot_password/ask_email.dart

@@ -0,0 +1,178 @@
+import 'package:ecellapp/core/res/colors.dart';
+import 'package:ecellapp/core/res/dimens.dart';
+import 'package:ecellapp/core/res/strings.dart';
+import 'package:ecellapp/widgets/email_field.dart';
+import 'package:ecellapp/widgets/screen_background.dart';
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+import 'cubit/forgot_password_cubit.dart';
+
+class AskEmailScreen extends StatelessWidget {
+  const AskEmailScreen({Key key, this.onSubmit, this.emailController}) : super(key: key);
+
+  final Function(BuildContext context, ForgotPasswordState state) onSubmit;
+  final TextEditingController emailController;
+
+  @override
+  Widget build(BuildContext context) {
+    final ScrollController scrollController = ScrollController();
+    final formKey = GlobalKey<FormState>();
+
+    double width = MediaQuery.of(context).size.width;
+    double height = MediaQuery.of(context).size.height;
+    double bottom = MediaQuery.of(context).viewInsets.bottom;
+    double heightFactor = height / 1000;
+    if (scrollController.hasClients) {
+      if (bottom > height * 0.25) {
+        scrollController.animateTo(
+          bottom - height * 0.25,
+          duration: Duration(milliseconds: 300),
+          curve: Curves.ease,
+        );
+      } else {
+        scrollController.animateTo(0, duration: Duration(milliseconds: 300), curve: Curves.ease);
+      }
+    }
+    return DefaultTextStyle(
+      style: GoogleFonts.roboto().copyWith(color: C.primaryUnHighlightedColor),
+      child: Stack(
+        children: [
+          ScreenBackground(elementId: 1),
+          SingleChildScrollView(
+            physics: NeverScrollableScrollPhysics(),
+            controller: scrollController,
+            child: Container(
+              height: height * 1.25,
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Expanded(
+                      flex: 5,
+                      child: Container(
+                        padding: EdgeInsets.fromLTRB(0, heightFactor * 100, 0, 0),
+                        alignment: Alignment.center,
+                        child: Text(
+                          "Step 1/3",
+                          style:
+                              TextStyle(fontSize: 35 * heightFactor, fontWeight: FontWeight.w600),
+                        ),
+                      )),
+                  Flexible(
+                    flex: 7,
+                    child: Column(
+                      children: [
+                        // Logo
+                        Container(
+                          alignment: Alignment.centerLeft,
+                          padding: EdgeInsets.only(left: D.horizontalPadding + 1),
+                          child: Image.asset(
+                            S.assetEcellLogoWhite,
+                            width: width * 0.25 * heightFactor,
+                          ),
+                        ),
+                        Container(
+                          alignment: Alignment.centerLeft,
+                          padding: EdgeInsets.only(left: D.horizontalPadding, top: 20),
+                          child: Text(
+                            "Welcome",
+                            style:
+                                TextStyle(fontSize: 35 * heightFactor, fontWeight: FontWeight.w600),
+                          ),
+                        ),
+                        //Text Greeting
+                        Container(
+                          alignment: Alignment.centerLeft,
+                          padding: EdgeInsets.only(left: D.horizontalPadding, top: 5),
+                          child: RichText(
+                            text: TextSpan(
+                              children: [
+                                TextSpan(
+                                    text: "Forgot your ",
+                                    style: TextStyle(
+                                        color: C.primaryUnHighlightedColor,
+                                        fontWeight: FontWeight.w300)),
+                                TextSpan(
+                                  text: "Password ",
+                                  style: TextStyle(color: C.primaryHighlightedColor),
+                                ),
+                                TextSpan(
+                                    text: "? \n",
+                                    style: TextStyle(
+                                        color: C.primaryUnHighlightedColor,
+                                        fontWeight: FontWeight.w300)),
+                                TextSpan(
+                                    text:
+                                        "We got you covered.\nJust enter your registered email address.",
+                                    style: TextStyle(
+                                        color: C.primaryUnHighlightedColor,
+                                        fontWeight: FontWeight.w300)),
+                              ],
+                              style: TextStyle(fontSize: 25 * heightFactor),
+                            ),
+                          ),
+                        ),
+                        SizedBox(height: 23 * heightFactor),
+                        Form(
+                            key: formKey,
+                            child: Padding(
+                              padding: EdgeInsets.symmetric(horizontal: D.horizontalPadding),
+                              child: Column(
+                                children: [
+                                  EmailField(emailController),
+                                  SizedBox(height: 20 * heightFactor),
+                                  SizedBox(height: 10 * heightFactor),
+                                ],
+                              ),
+                            )),
+                      ],
+                    ),
+                  ),
+                  //LoginButton
+                  Expanded(
+                    child: Container(
+                      padding: EdgeInsets.only(right: D.horizontalPadding),
+                      alignment: Alignment.topRight,
+                      child: Container(
+                        decoration: BoxDecoration(
+                          borderRadius: BorderRadius.all(Radius.circular(30)),
+                          boxShadow: [
+                            BoxShadow(
+                              color: C.authButtonColor.withOpacity(0.2),
+                              blurRadius: 10,
+                              spreadRadius: 3,
+                              offset: Offset(0, 12),
+                            )
+                          ],
+                        ),
+                        child: RaisedButton(
+                          shape: RoundedRectangleBorder(
+                            borderRadius: BorderRadius.all(Radius.circular(30)),
+                          ),
+                          color: C.authButtonColor,
+                          onPressed: () => onSubmit,
+                          child: Container(
+                            height: 60,
+                            width: 120,
+                            alignment: Alignment.center,
+                            child: Text(
+                              "Submit",
+                              style: TextStyle(
+                                  color: C.primaryUnHighlightedColor, fontSize: 20 * heightFactor),
+                            ),
+                          ),
+                        ),
+                      ),
+                    ),
+                  ),
+                  //To flex background
+                  Expanded(flex: 9, child: Container()),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}