added-login-signup-screen

lib/defaults/buttons/ml_elevated_button.dart

@@ -4,10 +4,12 @@ import 'package:memory_lamp/helpers/size_mq.dart';
 class MLElevatedButton extends StatelessWidget {
   final double? width;
   final Widget child;
+  final Color? color;
   final Function() onPressed;
 
   const MLElevatedButton({
     this.width,
+    this.color,
     required this.child,
     required this.onPressed,
     Key? key,
@@ -18,6 +20,9 @@ class MLElevatedButton extends StatelessWidget {
     return SizedBox(
       width: width ?? SizeMQ.width! * .5,
       child: ElevatedButton(
+        style: ElevatedButton.styleFrom(
+          primary: color,
+        ),
         child: Padding(
           padding: EdgeInsets.all(8.0),
           child: child,

lib/defaults/ml_text.dart

@@ -5,11 +5,15 @@ class MLText extends StatelessWidget {
   final TextStyle? style;
   final FontWeight? fontWeight;
   final double? fontSize;
+  final Color? color;
+  final TextDecoration? textDecoration;
   final FontStyle? fontStyle;
 
   const MLText(
     this.text, {
+    this.textDecoration,
     this.style,
+    this.color,
     this.fontWeight,
     this.fontSize,
     this.fontStyle,
@@ -29,6 +33,8 @@ class MLText extends StatelessWidget {
           TextStyle(
             fontWeight: fontWeight,
             fontSize: fontSize,
+            color: color,
+            decoration: textDecoration,
             fontStyle: fontStyle,
           ),
     );

lib/form/ml_form.dart

@@ -0,0 +1,153 @@
+import 'package:flutter/material.dart';
+import 'package:memory_lamp/defaults/ml_text.dart';
+import 'package:memory_lamp/helpers/size_mq.dart';
+import 'package:memory_lamp/theming/ml_colors.dart';
+
+class MLForm extends StatefulWidget {
+  final bool loadForSignup;
+  final bool loadForLogin;
+  const MLForm({this.loadForSignup = false, this.loadForLogin = false});
+  @override
+  _MLFormState createState() => _MLFormState();
+}
+
+class _MLFormState extends State<MLForm> {
+  final _mlFormKey = GlobalKey<FormState>();
+  bool? remember = false;
+  bool? agreeToTos = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return Form(
+      key: _mlFormKey,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.spaceAround,
+        mainAxisSize: MainAxisSize.max,
+        children: <Widget>[
+          _userNameField(),
+          SizedBox(height: SizeMQ.height! * .03),
+          if (widget.loadForLogin) _rememberMe(),
+          SizedBox(height: SizeMQ.height! * .03),
+          if (widget.loadForSignup) _emailField(),
+          SizedBox(height: SizeMQ.height! * .03),
+          if (widget.loadForSignup) _passwordField(),
+          SizedBox(height: SizeMQ.height! * .03),
+          if (widget.loadForSignup) _confirmPasswordField(),
+          SizedBox(height: SizeMQ.height! * .03),
+          if (widget.loadForSignup) _agreement(),
+        ],
+      ),
+    );
+  }
+
+//username
+  TextFormField _userNameField() => TextFormField(
+        keyboardType: TextInputType.name,
+        decoration: _defaultInputDecoration(label: 'Username'),
+      );
+
+//email
+  TextFormField _emailField() => TextFormField(
+        keyboardType: TextInputType.emailAddress,
+        decoration: _defaultInputDecoration(label: 'Email'),
+      );
+
+//password
+  TextFormField _passwordField() => TextFormField(
+        keyboardType: TextInputType.visiblePassword,
+        obscureText: true,
+        decoration: _defaultInputDecoration(
+          label: 'Password',
+          icon: Icon(Icons.visibility),
+        ),
+      );
+
+//confirmPassword
+  TextFormField _confirmPasswordField() => TextFormField(
+        keyboardType: TextInputType.visiblePassword,
+        obscureText: true,
+        decoration: _defaultInputDecoration(
+          label: 'Confirm Password',
+          icon: Icon(Icons.visibility),
+        ),
+      );
+
+//AgreeToTos
+  Row _agreement() => Row(
+        children: [
+          Theme(
+            child: Checkbox(
+                value: agreeToTos,
+                activeColor: Colors.white,
+                checkColor: MLColors.primary,
+                onChanged: (value) {
+                  setState(() {
+                    agreeToTos = value;
+                  });
+                }),
+            data: ThemeData(unselectedWidgetColor: Colors.white38),
+          ),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              MLText(
+                "I agree with the ",
+                color: Colors.white,
+                fontSize: getProportionateScreenWidth(7),
+              ),
+              MLText(
+                "Terms and Conditions",
+                textDecoration: TextDecoration.underline,
+                color: Colors.white,
+                fontSize: getProportionateScreenWidth(7),
+              ),
+            ],
+          )
+        ],
+      );
+
+//rememberMe
+  Row _rememberMe() => Row(
+        mainAxisAlignment: MainAxisAlignment.start,
+        children: [
+          Theme(
+            child: Checkbox(
+                value: remember,
+                activeColor: Colors.white,
+                checkColor: MLColors.primary,
+                onChanged: (value) {
+                  setState(() {
+                    remember = value;
+                  });
+                }),
+            data: ThemeData(unselectedWidgetColor: Colors.white38),
+          ),
+          MLText(
+            "Remember Me ",
+            color: Colors.white,
+            fontSize: getProportionateScreenWidth(7),
+          ),
+        ],
+      );
+
+  _defaultInputDecoration({
+    required String label,
+    Icon? icon,
+  }) {
+    return InputDecoration(
+      labelStyle: TextStyle(color: Colors.white),
+      labelText: label,
+      suffixIcon: icon,
+      contentPadding: EdgeInsets.zero,
+      floatingLabelBehavior: FloatingLabelBehavior.always,
+      focusedBorder: UnderlineInputBorder(
+        borderSide: BorderSide(color: Colors.white),
+      ),
+      enabledBorder: UnderlineInputBorder(
+        borderSide: BorderSide(color: Colors.white),
+      ),
+    );
+  }
+}
+
+//TO DO: validations

lib/router/route_map.dart

@@ -1,11 +1,13 @@
 import 'package:flutter/widgets.dart';
+import 'package:memory_lamp/screens/login.dart';
 import 'package:memory_lamp/screens/onboarding.dart';
 import 'package:memory_lamp/screens/signup.dart';
 import 'package:memory_lamp/screens/testing_screen.dart';
 
 final Map<String, WidgetBuilder> routeMap = {
   OnboardingScreen.routeName: (context) => OnboardingScreen(),
   SignupScreen.routeName: (context) => SignupScreen(),
+  LoginScreen.routeName: (context) => LoginScreen(),
 
   // ------ screen for manual testing widgets
   TestingScreen.routeName: (context) => TestingScreen(),

lib/screens/login.dart

@@ -0,0 +1,112 @@
+import 'package:flutter/material.dart';
+import 'package:memory_lamp/defaults/buttons/ml_elevated_button.dart';
+import 'package:memory_lamp/defaults/ml_text.dart';
+import 'package:memory_lamp/form/ml_form.dart';
+import 'package:memory_lamp/helpers/size_mq.dart';
+import 'package:memory_lamp/screens/signup.dart';
+import 'package:memory_lamp/theming/ml_colors.dart';
+
+class LoginScreen extends StatefulWidget {
+  static String routeName = '/login';
+  LoginScreen({Key? key}) : super(key: key);
+
+  @override
+  _LoginScreenState createState() => _LoginScreenState();
+}
+
+class _LoginScreenState extends State<LoginScreen> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: MLColors.primary,
+      body: SafeArea(
+        child: Container(
+          child: SingleChildScrollView(
+            child: Container(
+              height: SizeMQ.height! * .9,
+              padding: EdgeInsets.symmetric(horizontal: SizeMQ.width! * .1),
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.spaceAround,
+                children: [
+                  _welcome(),
+                  SizedBox(width: SizeMQ.width! * .03),
+                  MLForm(
+                    loadForLogin: true,
+                  ),
+                  _loginButton(),
+                  SizedBox(width: SizeMQ.height! * .03),
+                  _signUpHere(context),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+// ======  COMPONENTS
+
+//WelcomeMessage
+  Column _welcome() => Column(
+        mainAxisSize: MainAxisSize.max,
+        children: [
+          Align(
+            alignment: Alignment.topLeft,
+            child: MLText(
+              "Welcome Back! ",
+              style: TextStyle(
+                color: Colors.white,
+                fontSize: getProportionateScreenWidth(14),
+                fontWeight: FontWeight.normal,
+                height: 2,
+              ),
+            ),
+          ),
+          Align(
+            alignment: Alignment.topLeft,
+            child: MLText(
+              'Log in to continue',
+              color: Colors.white54,
+            ),
+          ),
+        ],
+      );
+
+//LoginButton
+  MLElevatedButton _loginButton() => MLElevatedButton(
+        child: MLText(
+          'Log in',
+          color: MLColors.primary,
+        ),
+        color: Colors.white,
+        onPressed: () {
+          print('Login');
+        },
+      );
+
+//SignUp
+  Row _signUpHere(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        MLText(
+          'New User? ',
+          fontSize: getProportionateScreenWidth(7),
+          color: Colors.white,
+        ),
+        GestureDetector(
+          onTap: () {
+            Navigator.pushNamed(context, SignupScreen.routeName);
+          },
+          child: MLText(
+            'Sign Up Here!',
+            textDecoration: TextDecoration.underline,
+            fontSize: getProportionateScreenWidth(7),
+            color: Colors.blue,
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/screens/onboarding.dart

@@ -3,7 +3,7 @@ import 'package:memory_lamp/defaults/buttons/ml_elevated_button.dart';
 import 'package:memory_lamp/defaults/ml_text.dart';
 import 'package:memory_lamp/helpers/asset_manager.dart';
 import 'package:memory_lamp/helpers/size_mq.dart';
-import 'package:memory_lamp/screens/signup.dart';
+import 'package:memory_lamp/screens/login.dart';
 import 'package:memory_lamp/theming/ml_colors.dart';
 import 'package:memory_lamp/theming/ml_font.dart';
 
@@ -27,7 +27,7 @@ class OnboardingScreen extends StatelessWidget {
             SizedBox(height: SizeMQ.width! * .2),
             MLElevatedButton(
               onPressed: () =>
-                  Navigator.pushNamed(context, SignupScreen.routeName),
+                  Navigator.pushNamed(context, LoginScreen.routeName),
               child: MLText(
                 "Get Started",
                 fontWeight: MLFont.bold,