diff --git a/assets/images/home_page.png b/assets/images/home_page.png index 851ff5a..6664154 100644 Binary files a/assets/images/home_page.png and b/assets/images/home_page.png differ diff --git a/lib/_routing/router.dart b/lib/_routing/router.dart index 3271d72..33734e2 100644 --- a/lib/_routing/router.dart +++ b/lib/_routing/router.dart @@ -1,13 +1,20 @@ import 'package:flutter/material.dart'; import 'package:flutter_social/_routing/routes.dart'; import 'package:flutter_social/views/home.dart'; +import 'package:flutter_social/views/login.dart'; +import 'package:flutter_social/views/register.dart'; +import 'package:flutter_social/views/reset_password.dart'; Route generateRoute(RouteSettings settings) { switch (settings.name) { case homeViewRoute: return MaterialPageRoute(builder: (context) => HomePage()); case loginViewRoute: - return MaterialPageRoute(builder: (context) => HomePage()); + return MaterialPageRoute(builder: (context) => LoginPage()); + case registerViewRoute: + return MaterialPageRoute(builder: (context) => RegisterPage()); + case resetPasswordViewRoute: + return MaterialPageRoute(builder: (context) => ResetPasswordPage()); break; default: return MaterialPageRoute(builder: (context) => HomePage()); diff --git a/lib/_routing/routes.dart b/lib/_routing/routes.dart index ddefd66..6c86ef6 100644 --- a/lib/_routing/routes.dart +++ b/lib/_routing/routes.dart @@ -1,3 +1,5 @@ const String homeViewRoute = '/'; -const String loginViewRoute = 'login'; \ No newline at end of file +const String loginViewRoute = 'login'; +const String registerViewRoute = 'register'; +const String resetPasswordViewRoute = 'reset_password'; \ No newline at end of file diff --git a/lib/utils/colors.dart b/lib/utils/colors.dart index a153948..35c1ee6 100644 --- a/lib/utils/colors.dart +++ b/lib/utils/colors.dart @@ -9,11 +9,11 @@ const secondaryColor = const Color(0xFFFF9F59); const secondaryLight = const Color(0xFFFF9F59); const secondaryDark = const Color(0xFFFF9F59); -const Color loginGradientStart = const Color(0xFFfbab66); -const Color loginGradientEnd = const Color(0xFFf7418c); +const Color gradientStart = const Color(0xFFfbab66); +const Color gradientEnd = const Color(0xFFf7418c); const primaryGradient = const LinearGradient( - colors: const [loginGradientStart, loginGradientEnd], + colors: const [gradientStart, gradientEnd], stops: const [0.0, 1.0], begin: Alignment.topCenter, end: Alignment.bottomCenter, diff --git a/lib/utils/utils.dart b/lib/utils/utils.dart index a7e8e2b..b97fa2e 100644 --- a/lib/utils/utils.dart +++ b/lib/utils/utils.dart @@ -2,7 +2,7 @@ import 'package:flutter/material.dart'; class AppConfig { static const appName = "Heart String"; - static const appTagline = "A perfect match for everyone"; + static const appTagline = "Find your perfect match"; } class AvailableFonts { diff --git a/lib/views/home.dart b/lib/views/home.dart index 12747a0..1952307 100644 --- a/lib/views/home.dart +++ b/lib/views/home.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:flutter_social/_routing/routes.dart'; import 'package:flutter_social/utils/colors.dart'; import 'package:flutter_social/utils/utils.dart'; @@ -31,13 +32,14 @@ class HomePage extends StatelessWidget { style: TextStyle( color: Colors.white, fontSize: 18.0, + fontWeight: FontWeight.w500 ), ) ], ); final loginBtn = InkWell( - onTap: () {}, + onTap: () => Navigator.pushNamed(context, loginViewRoute), child: Container( height: 60.0, width: MediaQuery.of(context).size.width, @@ -51,7 +53,7 @@ class HomePage extends StatelessWidget { 'LOG IN', style: TextStyle( fontWeight: FontWeight.w600, - fontSize: 24.0, + fontSize: 20.0, color: Colors.white, ), ), @@ -69,7 +71,7 @@ class HomePage extends StatelessWidget { ), child: RaisedButton( elevation: 5.0, - onPressed: () {}, + onPressed: () => Navigator.pushNamed(context, registerViewRoute), color: Colors.white, shape: new RoundedRectangleBorder( borderRadius: new BorderRadius.circular(7.0), @@ -78,7 +80,7 @@ class HomePage extends StatelessWidget { 'SIGN UP', style: TextStyle( fontWeight: FontWeight.w600, - fontSize: 24.0, + fontSize: 20.0, ), ), ), @@ -97,13 +99,12 @@ class HomePage extends StatelessWidget { ); return Scaffold( - appBar: AppBar( - elevation: 0, - ), - body: Stack( + body: Container( + child: Stack( children: [ Container( - color: primaryColor, + padding: EdgeInsets.only(top: 70.0), + decoration: BoxDecoration(gradient: primaryGradient), height: MediaQuery.of(context).size.height, width: MediaQuery.of(context).size.width, child: Column( @@ -112,18 +113,23 @@ class HomePage extends StatelessWidget { ), Positioned( bottom: 0, - child: Container( - height: 200.0, - width: MediaQuery.of(context).size.width, - decoration: BoxDecoration( - image: DecorationImage( - image: AvailableImages.homePage, - fit: BoxFit.cover, + child: Padding( + padding: EdgeInsets.only(left: 10.0), + child: Container( + height: 300.0, + width: MediaQuery.of(context).size.width, + decoration: BoxDecoration( + image: DecorationImage( + image: AvailableImages.homePage, + fit: BoxFit.contain, + ), ), ), ), ) ], - )); + ), + ), + ); } } diff --git a/lib/views/login.dart b/lib/views/login.dart new file mode 100644 index 0000000..fa87ac4 --- /dev/null +++ b/lib/views/login.dart @@ -0,0 +1,181 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_social/_routing/routes.dart'; +import 'package:flutter_social/utils/colors.dart'; +import 'package:line_icons/line_icons.dart'; + +class LoginPage extends StatefulWidget { + @override + _LoginPageState createState() => _LoginPageState(); +} + +class _LoginPageState extends State { + final _formKey = GlobalKey(); + + @override + Widget build(BuildContext context) { + final pageTitle = Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Log In.", + style: TextStyle( + fontWeight: FontWeight.bold, + color: Colors.white, + fontSize: 45.0, + ), + ), + Text( + "We missed you!", + style: TextStyle( + color: Colors.white, + fontSize: 18.0, + fontWeight: FontWeight.w500, + ), + ) + ], + ); + + final emailField = TextFormField( + decoration: InputDecoration( + labelText: 'Email Address', + labelStyle: TextStyle(color: Colors.white), + prefixIcon: Icon( + LineIcons.envelope, + color: Colors.white, + ), + enabledBorder: UnderlineInputBorder( + borderSide: BorderSide(color: Colors.white), + ), + focusedBorder: UnderlineInputBorder( + borderSide: BorderSide(color: Colors.white), + ), + ), + keyboardType: TextInputType.emailAddress, + style: TextStyle(color: Colors.white), + cursorColor: Colors.white, + ); + + final passwordField = TextFormField( + decoration: InputDecoration( + labelText: 'Password', + labelStyle: TextStyle(color: Colors.white), + prefixIcon: Icon( + LineIcons.lock, + color: Colors.white, + ), + enabledBorder: UnderlineInputBorder( + borderSide: BorderSide(color: Colors.white), + ), + focusedBorder: UnderlineInputBorder( + borderSide: BorderSide(color: Colors.white), + ), + ), + keyboardType: TextInputType.emailAddress, + style: TextStyle(color: Colors.white), + cursorColor: Colors.white, + obscureText: true, + ); + + final loginForm = Padding( + padding: EdgeInsets.only(top: 30.0), + child: Form( + key: _formKey, + child: Column( + children: [emailField, passwordField], + ), + ), + ); + + final loginBtn = Container( + margin: EdgeInsets.only(top: 40.0), + height: 60.0, + width: MediaQuery.of(context).size.width, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(7.0), + border: Border.all(color: Colors.white), + color: Colors.white, + ), + child: RaisedButton( + elevation: 5.0, + onPressed: () => Navigator.pushNamed(context, homeViewRoute), + color: Colors.white, + shape: new RoundedRectangleBorder( + borderRadius: new BorderRadius.circular(7.0), + ), + child: Text( + 'SIGN IN', + style: TextStyle( + fontWeight: FontWeight.w800, + fontSize: 20.0, + ), + ), + ), + ); + + final forgotPassword = Padding( + padding: EdgeInsets.only(top: 50.0), + child: InkWell( + onTap: () => Navigator.pushNamed(context, resetPasswordViewRoute), + child: Center( + child: Text( + 'Forgot Password?', + style: TextStyle( + color: Colors.white70, + fontSize: 18.0, + fontWeight: FontWeight.w600, + ), + ), + ), + ), + ); + + final newUser = Padding( + padding: EdgeInsets.only(top: 20.0), + child: InkWell( + onTap: () => Navigator.pushNamed(context, registerViewRoute), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + 'New User?', + style: TextStyle( + color: Colors.white70, + fontSize: 18.0, + fontWeight: FontWeight.w600, + ), + ), + Text( + ' Create account', + style: TextStyle( + color: Colors.white, + fontSize: 18.0, + fontWeight: FontWeight.w600, + ), + ), + ], + ), + ), + ); + + return Scaffold( + body: SingleChildScrollView( + child: Container( + padding: EdgeInsets.only(top: 150.0, left: 30.0, right: 30.0), + decoration: BoxDecoration(gradient: primaryGradient), + height: MediaQuery.of(context).size.height, + width: MediaQuery.of(context).size.width, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + pageTitle, + loginForm, + loginBtn, + forgotPassword, + newUser + ], + ), + ), + ), + ); + } +} diff --git a/lib/views/register.dart b/lib/views/register.dart new file mode 100644 index 0000000..16ec846 --- /dev/null +++ b/lib/views/register.dart @@ -0,0 +1,10 @@ +import 'package:flutter/material.dart'; + +class RegisterPage extends StatelessWidget { + @override + Widget build(BuildContext context) { + return Scaffold( + + ); + } +} \ No newline at end of file diff --git a/lib/views/reset_password.dart b/lib/views/reset_password.dart new file mode 100644 index 0000000..e9f9117 --- /dev/null +++ b/lib/views/reset_password.dart @@ -0,0 +1,152 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_social/_routing/routes.dart'; +import 'package:flutter_social/utils/colors.dart'; +import 'package:line_icons/line_icons.dart'; + +class ResetPasswordPage extends StatefulWidget { + @override + _ResetPasswordPageState createState() => _ResetPasswordPageState(); +} + +class _ResetPasswordPageState extends State { + final _formKey = GlobalKey(); + + @override + Widget build(BuildContext context) { + final appBar = Padding( + padding: EdgeInsets.only(bottom: 40.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + IconButton( + onPressed: () => Navigator.pop(context), + icon: Icon( + Icons.arrow_back, + color: Colors.white, + ), + ) + ], + ), + ); + + final pageTitle = Container( + child: Text( + "Reset Password", + style: TextStyle( + fontWeight: FontWeight.bold, + color: Colors.white, + fontSize: 40.0, + ), + ), + ); + + final emailField = TextFormField( + decoration: InputDecoration( + labelText: 'Email Address', + labelStyle: TextStyle(color: Colors.white), + prefixIcon: Icon( + LineIcons.envelope, + color: Colors.white, + ), + enabledBorder: UnderlineInputBorder( + borderSide: BorderSide(color: Colors.white), + ), + focusedBorder: UnderlineInputBorder( + borderSide: BorderSide(color: Colors.white), + ), + ), + keyboardType: TextInputType.emailAddress, + style: TextStyle(color: Colors.white), + cursorColor: Colors.white, + ); + + final resetPasswordForm = Padding( + padding: EdgeInsets.only(top: 30.0), + child: Form( + key: _formKey, + child: Column( + children: [emailField], + ), + ), + ); + + final resetPasswordBtn = Container( + margin: EdgeInsets.only(top: 40.0), + height: 60.0, + width: MediaQuery.of(context).size.width, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(7.0), + border: Border.all(color: Colors.white), + color: Colors.white, + ), + child: RaisedButton( + elevation: 5.0, + onPressed: () => Navigator.pushNamed(context, homeViewRoute), + color: Colors.white, + shape: new RoundedRectangleBorder( + borderRadius: new BorderRadius.circular(7.0), + ), + child: Text( + 'RESET', + style: TextStyle( + fontWeight: FontWeight.w800, + fontSize: 20.0, + ), + ), + ), + ); + + final newUser = Padding( + padding: EdgeInsets.only(top: 50.0), + child: InkWell( + onTap: () => Navigator.pushNamed(context, registerViewRoute), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + 'Or', + style: TextStyle( + color: Colors.white70, + fontSize: 18.0, + fontWeight: FontWeight.w600, + ), + ), + Text( + ' Create new account', + style: TextStyle( + color: Colors.white, + fontSize: 18.0, + fontWeight: FontWeight.w600, + ), + ), + ], + ), + ), + ); + + return Scaffold( + body: Container( + padding: EdgeInsets.only(top: 40.0), + decoration: BoxDecoration(gradient: primaryGradient), + height: MediaQuery.of(context).size.height, + width: MediaQuery.of(context).size.width, + child: Column( + children: [ + appBar, + Container( + padding: EdgeInsets.only(left: 30.0, right: 30.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + pageTitle, + resetPasswordForm, + resetPasswordBtn, + newUser + ], + ), + ) + ], + )), + ); + } +} diff --git a/pubspec.lock b/pubspec.lock index f6b0bbd..03d34ec 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -46,6 +46,13 @@ packages: description: flutter source: sdk version: "0.0.0" + line_icons: + dependency: "direct main" + description: + name: line_icons + url: "https://pub.dartlang.org" + source: hosted + version: "0.2.0" matcher: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index a7a1dd4..b8b8a55 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -19,6 +19,7 @@ environment: dependencies: flutter: sdk: flutter + line_icons: ^0.2.0 # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. @@ -68,11 +69,8 @@ flutter: fonts: - asset: assets/fonts/Quicksand-Regular.ttf - asset: assets/fonts/Quicksand-Medium.ttf - weight: 400 - asset: assets/fonts/Quicksand-SemiBold.ttf - weight: 700 - asset: assets/fonts/Quicksand-Bold.ttf - weight: 900 # # For details regarding fonts from package dependencies, # see https://flutter.dev/custom-fonts/#from-packages