From 69df3ca4950347124989f86b4c6cdd6061550ea5 Mon Sep 17 00:00:00 2001 From: randeljairus Date: Mon, 23 Aug 2021 00:18:20 +0800 Subject: [PATCH 1/5] added login and signup screen for the app --- lib/defaults/buttons/ml_elevated_button.dart | 5 + lib/defaults/ml_text.dart | 6 + lib/form/ml_form.dart | 136 ++++++++++++++ lib/router/route_map.dart | 2 + lib/screens/login.dart | 187 +++++++++++++++++++ lib/screens/loginCallAction.dart | 31 +++ lib/screens/onboarding.dart | 4 +- lib/screens/signup.dart | 119 ++++-------- lib/screens/signupCallAction.dart | 31 +++ pubspec.yaml | 1 + 10 files changed, 440 insertions(+), 82 deletions(-) create mode 100644 lib/form/ml_form.dart create mode 100644 lib/screens/login.dart create mode 100644 lib/screens/loginCallAction.dart create mode 100644 lib/screens/signupCallAction.dart diff --git a/lib/defaults/buttons/ml_elevated_button.dart b/lib/defaults/buttons/ml_elevated_button.dart index a78d2af..c0ef62c 100644 --- a/lib/defaults/buttons/ml_elevated_button.dart +++ b/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, diff --git a/lib/defaults/ml_text.dart b/lib/defaults/ml_text.dart index f073222..06378ab 100644 --- a/lib/defaults/ml_text.dart +++ b/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, ), ); } diff --git a/lib/form/ml_form.dart b/lib/form/ml_form.dart new file mode 100644 index 0000000..b89deae --- /dev/null +++ b/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 { + final _mlFormKey = GlobalKey(); + + @override + Widget build(BuildContext context) { + return Form( + key: _mlFormKey, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceAround, + mainAxisSize: MainAxisSize.max, + children: [ + _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 \ No newline at end of file diff --git a/lib/router/route_map.dart b/lib/router/route_map.dart index 570a77f..94895dc 100644 --- a/lib/router/route_map.dart +++ b/lib/router/route_map.dart @@ -1,4 +1,5 @@ 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'; @@ -6,6 +7,7 @@ import 'package:memory_lamp/screens/testing_screen.dart'; final Map routeMap = { OnboardingScreen.routeName: (context) => OnboardingScreen(), SignupScreen.routeName: (context) => SignupScreen(), + LoginScreen.routeName: (context) => LoginScreen(), // ------ screen for manual testing widgets TestingScreen.routeName: (context) => TestingScreen(), diff --git a/lib/screens/login.dart b/lib/screens/login.dart new file mode 100644 index 0000000..d802153 --- /dev/null +++ b/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 { + @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, + ), + ); + } +} diff --git a/lib/screens/loginCallAction.dart b/lib/screens/loginCallAction.dart new file mode 100644 index 0000000..a88ac44 --- /dev/null +++ b/lib/screens/loginCallAction.dart @@ -0,0 +1,31 @@ +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/screens/login.dart'; + +class AlreadyUser extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + MLText( + 'Already have an Account? ', + fontSize: getProportionateScreenWidth(7), + color: Colors.white, + ), + GestureDetector( + onTap: () { + Navigator.pushNamed(context, LoginScreen.routeName); + }, + child: MLText( + 'Sign in here!', + textDecoration: TextDecoration.underline, + fontSize: getProportionateScreenWidth(7), + color: Colors.blue, + ), + ), + ], + ); + } +} diff --git a/lib/screens/onboarding.dart b/lib/screens/onboarding.dart index cf4e0f1..4ca6140 100644 --- a/lib/screens/onboarding.dart +++ b/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, diff --git a/lib/screens/signup.dart b/lib/screens/signup.dart index 26f47e8..96a8e9b 100644 --- a/lib/screens/signup.dart +++ b/lib/screens/signup.dart @@ -1,105 +1,64 @@ 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/onboarding.dart'; +import 'package:memory_lamp/screens/loginCallAction.dart'; import 'package:memory_lamp/theming/ml_colors.dart'; -import 'package:memory_lamp/theming/ml_font.dart'; class SignupScreen extends StatelessWidget { static String routeName = '/signup'; - SignupScreen({Key? key}) : super(key: key); - - final double _width = SizeMQ.width! * .6; @override Widget build(BuildContext context) { return Scaffold( - backgroundColor: MLColors.bgLight, + backgroundColor: MLColors.primary, body: SafeArea( - child: Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisSize: MainAxisSize.min, - children: [ - OnboardingScreen.heroLogo(), - SizedBox(height: SizeMQ.width! * .1), - _thirdPartySignup(), - _divider(), - _signUp(), - _submitButton(), - ], + child: SingleChildScrollView( + child: Container( + height: SizeMQ.height! * .9, + padding: EdgeInsets.symmetric(horizontal: SizeMQ.width! * .1), + child: Column( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + _welcome(), + MLForm( + loadForSignup: true, + ), + MLElevatedButton( + color: Colors.white, + child: Text( + 'Create Account', + style: TextStyle(color: MLColors.primary), + ), + onPressed: () {}), + AlreadyUser(), + ], + ), ), ), ), ); } +} - Column _thirdPartySignup() { - return Column( +//Message +Column _welcome() => Column( + mainAxisSize: MainAxisSize.max, + crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - MLElevatedButton( - width: _width, - onPressed: () {}, - child: MLText( - "Sign up via Google", - fontWeight: MLFont.light, - fontSize: MLFont.small, + Text( + "Hello!", + style: TextStyle( + color: Colors.white, + fontSize: getProportionateScreenWidth(14), + fontWeight: FontWeight.bold, ), ), - MLElevatedButton( - width: _width, - onPressed: () {}, - child: MLText( - "Sign up via Facebook", - fontWeight: MLFont.light, - fontSize: MLFont.small, - ), + MLText( + 'Create a new Account', + color: Colors.white54, ), ], ); - } - - Padding _divider() { - Expanded _line = Expanded( - child: Divider( - color: MLColors.secondary, - thickness: .5, - ), - ); - return Padding( - padding: EdgeInsets.symmetric( - horizontal: SizeMQ.width! * .1, - vertical: SizeMQ.width! * .06, - ), - child: Row( - children: [ - _line, - Padding( - padding: EdgeInsets.symmetric(horizontal: 16), - child: MLText("OR", fontSize: MLFont.extraSmall), - ), - _line, - ], - ), - ); - } - - Column _signUp() { - return Column( - children: [ - MLText("email"), - MLText("password"), - ], - ); - } - - MLElevatedButton _submitButton() { - return MLElevatedButton( - width: _width, - onPressed: () {}, - child: MLText("Submit"), - ); - } -} diff --git a/lib/screens/signupCallAction.dart b/lib/screens/signupCallAction.dart new file mode 100644 index 0000000..489e54f --- /dev/null +++ b/lib/screens/signupCallAction.dart @@ -0,0 +1,31 @@ +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/screens/signup.dart'; + +class SignUpHere extends StatelessWidget { + @override + Widget build(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, + ), + ), + ], + ); + } +} diff --git a/pubspec.yaml b/pubspec.yaml index 1695a95..137a7b8 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -28,6 +28,7 @@ dependencies: # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.2 + flutter_icons: ^1.1.0 dev_dependencies: flutter_test: From c753f906cad06187dd4356ac35ef1d0924dcb273 Mon Sep 17 00:00:00 2001 From: randeljairus Date: Mon, 23 Aug 2021 23:51:44 +0800 Subject: [PATCH 2/5] updated-login-signup --- lib/form/ml_form.dart | 193 ++++++++++++++++-------------- lib/screens/login.dart | 184 +++++++++------------------- lib/screens/loginCallAction.dart | 31 ----- lib/screens/signup.dart | 37 +++++- lib/screens/signupCallAction.dart | 31 ----- pubspec.yaml | 1 - 6 files changed, 197 insertions(+), 280 deletions(-) delete mode 100644 lib/screens/loginCallAction.dart delete mode 100644 lib/screens/signupCallAction.dart diff --git a/lib/form/ml_form.dart b/lib/form/ml_form.dart index b89deae..6ef54d0 100644 --- a/lib/form/ml_form.dart +++ b/lib/form/ml_form.dart @@ -4,13 +4,16 @@ import 'package:memory_lamp/theming/ml_colors.dart'; class MLForm extends StatefulWidget { final bool loadForSignup; - const MLForm({this.loadForSignup = false}); + final bool loadForLogin; + const MLForm({this.loadForSignup = false, this.loadForLogin = false}); @override _MLFormState createState() => _MLFormState(); } class _MLFormState extends State { final _mlFormKey = GlobalKey(); + bool? remember = false; + bool? agreeToTos = false; @override Widget build(BuildContext context) { @@ -22,115 +25,129 @@ class _MLFormState extends State { children: [ _userNameField(), SizedBox(height: SizeMQ.height! * .03), + if (widget.loadForLogin) _rememberMe(), + SizedBox(height: SizeMQ.height! * .03), if (widget.loadForSignup) _emailField(), SizedBox(height: SizeMQ.height! * .03), - _passwordField(), + if (widget.loadForSignup) _passwordField(), SizedBox(height: SizeMQ.height! * .03), if (widget.loadForSignup) _confirmPasswordField(), - widget.loadForSignup ? _agreement() : _rememberMe(), + SizedBox(height: SizeMQ.height! * .03), + if (widget.loadForSignup) _agreement(), ], ), ); } -} //username -TextFormField _userNameField() => TextFormField( - keyboardType: TextInputType.name, - decoration: _defaultInputDecoration(label: 'Username'), - ); + TextFormField _userNameField() => TextFormField( + keyboardType: TextInputType.name, + decoration: _defaultInputDecoration(label: 'Username'), + ); //email -TextFormField _emailField() => TextFormField( - keyboardType: TextInputType.emailAddress, - decoration: _defaultInputDecoration(label: 'Email'), - ); + TextFormField _emailField() => TextFormField( + keyboardType: TextInputType.emailAddress, + decoration: _defaultInputDecoration(label: 'Email'), + ); //password -TextFormField _passwordField() => TextFormField( - keyboardType: TextInputType.visiblePassword, - obscureText: true, - decoration: _defaultInputDecoration(label: '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'), - ); + TextFormField _confirmPasswordField() => TextFormField( + keyboardType: TextInputType.visiblePassword, + obscureText: true, + decoration: _defaultInputDecoration( + label: 'Confirm Password', + icon: Icon(Icons.visibility), + ), + ); //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)), - ), - ], - ) - ], - ); + 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: [ + 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.start, + children: [ + Theme( + child: Checkbox( + value: remember, + activeColor: Colors.white, + checkColor: MLColors.primary, + onChanged: (value) { + setState(() { + remember = value; + }); + }), + data: ThemeData(unselectedWidgetColor: Colors.white38), + ), + Text( + "Remember Me ", + style: TextStyle( + color: Colors.white, fontSize: getProportionateScreenWidth(7)), + ), + ], + ); -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, + 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)), ); - -_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 \ No newline at end of file diff --git a/lib/screens/login.dart b/lib/screens/login.dart index d802153..8546204 100644 --- a/lib/screens/login.dart +++ b/lib/screens/login.dart @@ -1,10 +1,9 @@ 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/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/signupCallAction.dart'; +import 'package:memory_lamp/screens/signup.dart'; import 'package:memory_lamp/theming/ml_colors.dart'; class LoginScreen extends StatefulWidget { @@ -27,21 +26,14 @@ class _LoginScreenState extends State { height: SizeMQ.height! * .9, padding: EdgeInsets.symmetric(horizontal: SizeMQ.width! * .1), child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ _welcome(), SizedBox(width: SizeMQ.width! * .03), - MLForm(), - _loginButton(), - _orDivider(), - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - _googleLogin(), - SizedBox(width: SizeMQ.width! * .03), - _facebookLogin(), - ], + MLForm( + loadForLogin: true, ), + _loginButton(), SizedBox(width: SizeMQ.height! * .03), SignUpHere(), ], @@ -52,136 +44,74 @@ class _LoginScreenState extends State { ), ); } -} // ====== 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, + 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, - )), + Align( + alignment: Alignment.topLeft, + child: Text( + 'Log 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( + MLElevatedButton _loginButton() => MLElevatedButton( + child: Text( + 'Log in', + style: TextStyle(color: MLColors.primary), + ), + color: Colors.white, onPressed: () { - print('logged in'); + print('Login'); }, - 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, +//SignUp +class SignUpHere extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Row( + mainAxisAlignment: MainAxisAlignment.center, children: [ - OrDivider( - indent: 0, - endIndent: 10, - ), - Text( - 'OR', - style: TextStyle(color: Colors.white), + MLText( + 'New User? ', + fontSize: getProportionateScreenWidth(7), + color: Colors.white, ), - OrDivider( - indent: 10, - endIndent: 0, + GestureDetector( + onTap: () { + Navigator.pushNamed(context, SignupScreen.routeName); + }, + child: MLText( + 'Sign Up Here!', + textDecoration: TextDecoration.underline, + fontSize: getProportionateScreenWidth(7), + color: Colors.blue, + ), ), ], ); - -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, - ), - ); } } diff --git a/lib/screens/loginCallAction.dart b/lib/screens/loginCallAction.dart deleted file mode 100644 index a88ac44..0000000 --- a/lib/screens/loginCallAction.dart +++ /dev/null @@ -1,31 +0,0 @@ -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/screens/login.dart'; - -class AlreadyUser extends StatelessWidget { - @override - Widget build(BuildContext context) { - return Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - MLText( - 'Already have an Account? ', - fontSize: getProportionateScreenWidth(7), - color: Colors.white, - ), - GestureDetector( - onTap: () { - Navigator.pushNamed(context, LoginScreen.routeName); - }, - child: MLText( - 'Sign in here!', - textDecoration: TextDecoration.underline, - fontSize: getProportionateScreenWidth(7), - color: Colors.blue, - ), - ), - ], - ); - } -} diff --git a/lib/screens/signup.dart b/lib/screens/signup.dart index 96a8e9b..fb04f97 100644 --- a/lib/screens/signup.dart +++ b/lib/screens/signup.dart @@ -3,12 +3,17 @@ 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/loginCallAction.dart'; +import 'package:memory_lamp/screens/login.dart'; import 'package:memory_lamp/theming/ml_colors.dart'; -class SignupScreen extends StatelessWidget { +class SignupScreen extends StatefulWidget { static String routeName = '/signup'; + @override + _SignupScreenState createState() => _SignupScreenState(); +} + +class _SignupScreenState extends State { @override Widget build(BuildContext context) { return Scaffold( @@ -62,3 +67,31 @@ Column _welcome() => Column( ), ], ); + +//SignIn +class AlreadyUser extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + MLText( + 'Already have an Account? ', + fontSize: getProportionateScreenWidth(7), + color: Colors.white, + ), + GestureDetector( + onTap: () { + Navigator.pushNamed(context, LoginScreen.routeName); + }, + child: MLText( + 'Sign in here!', + textDecoration: TextDecoration.underline, + fontSize: getProportionateScreenWidth(7), + color: Colors.blue, + ), + ), + ], + ); + } +} diff --git a/lib/screens/signupCallAction.dart b/lib/screens/signupCallAction.dart deleted file mode 100644 index 489e54f..0000000 --- a/lib/screens/signupCallAction.dart +++ /dev/null @@ -1,31 +0,0 @@ -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/screens/signup.dart'; - -class SignUpHere extends StatelessWidget { - @override - Widget build(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, - ), - ), - ], - ); - } -} diff --git a/pubspec.yaml b/pubspec.yaml index 137a7b8..1695a95 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -28,7 +28,6 @@ dependencies: # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.2 - flutter_icons: ^1.1.0 dev_dependencies: flutter_test: From 2fea02a452fc8da50715746bf92660c866422c44 Mon Sep 17 00:00:00 2001 From: Jerome Date: Tue, 24 Aug 2021 06:13:57 +0800 Subject: [PATCH 3/5] add widgets to the scope of signup state --- lib/screens/signup.dart | 41 +++++++++++++++++++---------------------- 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/lib/screens/signup.dart b/lib/screens/signup.dart index fb04f97..f08b07d 100644 --- a/lib/screens/signup.dart +++ b/lib/screens/signup.dart @@ -38,7 +38,7 @@ class _SignupScreenState extends State { style: TextStyle(color: MLColors.primary), ), onPressed: () {}), - AlreadyUser(), + _alreadyUser(context), ], ), ), @@ -46,32 +46,29 @@ class _SignupScreenState extends State { ), ); } -} //Message -Column _welcome() => Column( - mainAxisSize: MainAxisSize.max, - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - Text( - "Hello!", - style: TextStyle( - color: Colors.white, - fontSize: getProportionateScreenWidth(14), - fontWeight: FontWeight.bold, + Column _welcome() => Column( + mainAxisSize: MainAxisSize.max, + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + Text( + "Hello!", + style: TextStyle( + color: Colors.white, + fontSize: getProportionateScreenWidth(14), + fontWeight: FontWeight.bold, + ), ), - ), - MLText( - 'Create a new Account', - color: Colors.white54, - ), - ], - ); + MLText( + 'Create a new Account', + color: Colors.white54, + ), + ], + ); //SignIn -class AlreadyUser extends StatelessWidget { - @override - Widget build(BuildContext context) { + Row _alreadyUser(BuildContext context) { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ From e9ee7526749c86e26fbd30091b2043851f8abc51 Mon Sep 17 00:00:00 2001 From: Jerome Date: Tue, 24 Aug 2021 06:16:20 +0800 Subject: [PATCH 4/5] make signUpHere private and move it inside LoginScreenState --- lib/screens/login.dart | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/lib/screens/login.dart b/lib/screens/login.dart index 8546204..16cf5e8 100644 --- a/lib/screens/login.dart +++ b/lib/screens/login.dart @@ -35,7 +35,7 @@ class _LoginScreenState extends State { ), _loginButton(), SizedBox(width: SizeMQ.height! * .03), - SignUpHere(), + _signUpHere(context), ], ), ), @@ -86,12 +86,9 @@ class _LoginScreenState extends State { print('Login'); }, ); -} //SignUp -class SignUpHere extends StatelessWidget { - @override - Widget build(BuildContext context) { + Row _signUpHere(BuildContext context) { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ From 48a17e54ee6fb9197951ec5197be1275f3d47d8a Mon Sep 17 00:00:00 2001 From: Jerome Date: Tue, 24 Aug 2021 06:19:59 +0800 Subject: [PATCH 5/5] use MLText instead of Text --- lib/form/ml_form.dart | 28 ++++++++++++++-------------- lib/screens/login.dart | 12 +++++------- lib/screens/signup.dart | 23 +++++++++++------------ 3 files changed, 30 insertions(+), 33 deletions(-) diff --git a/lib/form/ml_form.dart b/lib/form/ml_form.dart index 6ef54d0..e814042 100644 --- a/lib/form/ml_form.dart +++ b/lib/form/ml_form.dart @@ -1,4 +1,5 @@ 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'; @@ -89,18 +90,16 @@ class _MLFormState extends State { Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Text( + MLText( "I agree with the ", - style: TextStyle( - color: Colors.white, - fontSize: getProportionateScreenWidth(7)), + color: Colors.white, + fontSize: getProportionateScreenWidth(7), ), - Text( + MLText( "Terms and Conditions", - style: TextStyle( - decoration: TextDecoration.underline, - color: Colors.white, - fontSize: getProportionateScreenWidth(7)), + textDecoration: TextDecoration.underline, + color: Colors.white, + fontSize: getProportionateScreenWidth(7), ), ], ) @@ -123,10 +122,10 @@ class _MLFormState extends State { }), data: ThemeData(unselectedWidgetColor: Colors.white38), ), - Text( + MLText( "Remember Me ", - style: TextStyle( - color: Colors.white, fontSize: getProportionateScreenWidth(7)), + color: Colors.white, + fontSize: getProportionateScreenWidth(7), ), ], ); @@ -144,8 +143,9 @@ class _MLFormState extends State { focusedBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.white), ), - enabledBorder: - UnderlineInputBorder(borderSide: BorderSide(color: Colors.white)), + enabledBorder: UnderlineInputBorder( + borderSide: BorderSide(color: Colors.white), + ), ); } } diff --git a/lib/screens/login.dart b/lib/screens/login.dart index 16cf5e8..b412b91 100644 --- a/lib/screens/login.dart +++ b/lib/screens/login.dart @@ -53,7 +53,7 @@ class _LoginScreenState extends State { children: [ Align( alignment: Alignment.topLeft, - child: Text( + child: MLText( "Welcome Back! ", style: TextStyle( color: Colors.white, @@ -65,11 +65,9 @@ class _LoginScreenState extends State { ), Align( alignment: Alignment.topLeft, - child: Text( + child: MLText( 'Log in to continue', - style: (TextStyle( - color: Colors.white54, - )), + color: Colors.white54, ), ), ], @@ -77,9 +75,9 @@ class _LoginScreenState extends State { //LoginButton MLElevatedButton _loginButton() => MLElevatedButton( - child: Text( + child: MLText( 'Log in', - style: TextStyle(color: MLColors.primary), + color: MLColors.primary, ), color: Colors.white, onPressed: () { diff --git a/lib/screens/signup.dart b/lib/screens/signup.dart index f08b07d..ab44bca 100644 --- a/lib/screens/signup.dart +++ b/lib/screens/signup.dart @@ -32,12 +32,13 @@ class _SignupScreenState extends State { loadForSignup: true, ), MLElevatedButton( - color: Colors.white, - child: Text( - 'Create Account', - style: TextStyle(color: MLColors.primary), - ), - onPressed: () {}), + color: Colors.white, + child: MLText( + 'Create Account', + style: TextStyle(color: MLColors.primary), + ), + onPressed: () {}, + ), _alreadyUser(context), ], ), @@ -52,13 +53,11 @@ class _SignupScreenState extends State { mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - Text( + MLText( "Hello!", - style: TextStyle( - color: Colors.white, - fontSize: getProportionateScreenWidth(14), - fontWeight: FontWeight.bold, - ), + color: Colors.white, + fontSize: getProportionateScreenWidth(14), + fontWeight: FontWeight.bold, ), MLText( 'Create a new Account',