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,10 +5,14 @@ class MLText extends StatelessWidget {
   final TextStyle? style;
   final FontWeight? fontWeight;
   final double? fontSize;
+  final Color? color;
+  final TextDecoration? textDecoration;
 
   const MLText(
     this.text, {
+    this.textDecoration,
     this.style,
+    this.color,
     this.fontWeight,
     this.fontSize,
     Key? key,
@@ -27,6 +31,8 @@ class MLText extends StatelessWidget {
           TextStyle(
             fontWeight: fontWeight,
             fontSize: fontSize,
+            color: color,
+            decoration: textDecoration,
           ),
     );
   }

lib/form/ml_form.dart

@@ -0,0 +1,136 @@
+import 'package:flutter/material.dart';
+import 'package:memory_lamp/helpers/size_mq.dart';
+import 'package:memory_lamp/theming/ml_colors.dart';
+
+class MLForm extends StatefulWidget {
+  final bool loadForSignup;
+  const MLForm({this.loadForSignup = false});
+  @override
+  _MLFormState createState() => _MLFormState();
+}
+
+class _MLFormState extends State<MLForm> {
+  final _mlFormKey = GlobalKey<FormState>();
+
+  @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.loadForSignup) _emailField(),
+          SizedBox(height: SizeMQ.height! * .03),
+          _passwordField(),
+          SizedBox(height: SizeMQ.height! * .03),
+          if (widget.loadForSignup) _confirmPasswordField(),
+          widget.loadForSignup ? _agreement() : _rememberMe(),
+        ],
+      ),
+    );
+  }
+}
+
+//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'),
+    );
+
+//confirmPassword
+TextFormField _confirmPasswordField() => TextFormField(
+      keyboardType: TextInputType.visiblePassword,
+      obscureText: true,
+      decoration: _defaultInputDecoration(label: 'Confirm Password'),
+    );
+
+//AgreeToTos
+// ---> i get errors when i put this above. can't seem find the error. for the meantime i put it here
+bool agreeToTos = false;
+
+Row _agreement() => Row(
+      children: [
+        Theme(
+          child: Checkbox(
+              value: agreeToTos,
+              activeColor: Colors.blue,
+              checkColor: MLColors.primary,
+              onChanged: (value) {}),
+          data: ThemeData(unselectedWidgetColor: Colors.white38),
+        ),
+        Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              "I agree with the ",
+              style: TextStyle(
+                  color: Colors.white,
+                  fontSize: getProportionateScreenWidth(7)),
+            ),
+            Text(
+              "Terms and Conditions",
+              style: TextStyle(
+                  decoration: TextDecoration.underline,
+                  color: Colors.white,
+                  fontSize: getProportionateScreenWidth(7)),
+            ),
+          ],
+        )
+      ],
+    );
+
+//rememberMe
+bool remember = false;
+
+Row _rememberMe() => Row(
+      mainAxisAlignment: MainAxisAlignment.end,
+      children: [
+        Theme(
+          child: Checkbox(
+              value: remember,
+              activeColor: Colors.blue,
+              checkColor: MLColors.primary,
+              onChanged: (value) {}),
+          data: ThemeData(unselectedWidgetColor: Colors.white38),
+        ),
+        Text(
+          "Remember Me ",
+          style: TextStyle(
+              color: Colors.white, fontSize: getProportionateScreenWidth(7)),
+        ),
+      ],
+    );
+
+_defaultInputDecoration({
+  required String label,
+}) {
+  return InputDecoration(
+    labelStyle: TextStyle(color: Colors.white),
+    labelText: label,
+    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,187 @@
+import 'package:flutter/material.dart';
+// ignore: import_of_legacy_library_into_null_safe
+import 'package:flutter_icons/flutter_icons.dart';
+import 'package:memory_lamp/defaults/buttons/ml_elevated_button.dart';
+import 'package:memory_lamp/form/ml_form.dart';
+import 'package:memory_lamp/helpers/size_mq.dart';
+import 'package:memory_lamp/screens/signupCallAction.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.spaceBetween,
+                children: [
+                  _welcome(),
+                  SizedBox(width: SizeMQ.width! * .03),
+                  MLForm(),
+                  _loginButton(),
+                  _orDivider(),
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      _googleLogin(),
+                      SizedBox(width: SizeMQ.width! * .03),
+                      _facebookLogin(),
+                    ],
+                  ),
+                  SizedBox(width: SizeMQ.height! * .03),
+                  SignUpHere(),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+// ======  COMPONENTS
+
+//WelcomeMessage
+Column _welcome() => Column(
+      mainAxisSize: MainAxisSize.max,
+      children: [
+        Align(
+          alignment: Alignment.topLeft,
+          child: Text(
+            "Welcome Back! ",
+            style: TextStyle(
+              color: Colors.white,
+              fontSize: getProportionateScreenWidth(14),
+              fontWeight: FontWeight.normal,
+              height: 2,
+            ),
+          ),
+        ),
+        Align(
+          alignment: Alignment.topLeft,
+          child: Text(
+            'Sign in to continue',
+            style: (TextStyle(
+              color: Colors.white54,
+            )),
+          ),
+        ),
+      ],
+    );
+
+//LoginButton
+MLElevatedButton _loginButton() => MLElevatedButton(
+      child: Text(
+        'Log in',
+        style: TextStyle(color: MLColors.primary),
+      ),
+      color: Colors.white,
+      onPressed: () {
+        print('Login');
+      },
+    );
+
+//Facebook Login
+Row _facebookLogin() => row(
+      MaterialCommunityIcons.facebook,
+      'Facebook',
+      Colors.blue[900],
+    );
+
+//Google Login
+Row _googleLogin() => row(
+      MaterialCommunityIcons.google,
+      'Google',
+      Colors.red,
+    );
+
+//for soical media login
+Row row(
+  IconData icon,
+  String title,
+  Color? backgroundColor,
+) {
+  return Row(
+    mainAxisSize: MainAxisSize.max,
+    children: [
+      TextButton(
+        onPressed: () {
+          print('logged in');
+        },
+        style: TextButton.styleFrom(
+          primary: Colors.white,
+          backgroundColor: backgroundColor,
+          minimumSize: Size(150, getProportionateScreenHeight(60)),
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(9),
+          ),
+        ),
+        child: Row(
+          children: [
+            Icon(icon),
+            SizedBox(
+              width: 15,
+            ),
+            Text(title),
+          ],
+        ),
+      ),
+    ],
+  );
+}
+
+//ORDivider
+Row _orDivider() => Row(
+      mainAxisSize: MainAxisSize.max,
+      children: [
+        OrDivider(
+          indent: 0,
+          endIndent: 10,
+        ),
+        Text(
+          'OR',
+          style: TextStyle(color: Colors.white),
+        ),
+        OrDivider(
+          indent: 10,
+          endIndent: 0,
+        ),
+      ],
+    );
+
+class OrDivider extends StatelessWidget {
+  final double indent;
+  final double endIndent;
+
+  const OrDivider({
+    required this.indent,
+    required this.endIndent,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: Divider(
+        color: Colors.white,
+        indent: indent,
+        endIndent: endIndent,
+        thickness: 1.0,
+      ),
+    );
+  }
+}