From 7224d7acd2712c36cc065a03286990e6b70fc874 Mon Sep 17 00:00:00 2001 From: Faisal Ramdan Date: Sun, 31 Oct 2021 12:49:17 +0700 Subject: [PATCH] Login Screen --- README.md | 5 +- lib/core.dart | 2 - lib/pages/started/login_view.dart | 222 ++++++++++++++++++++++++++++ lib/pages/started/welcome_view.dart | 3 +- lib/pages/xcore.dart | 1 + lib/routes/app_pages.dart | 4 + lib/routes/app_routes.dart | 1 + 7 files changed, 232 insertions(+), 6 deletions(-) create mode 100644 lib/pages/started/login_view.dart diff --git a/README.md b/README.md index 5da3f12..41e2716 100644 --- a/README.md +++ b/README.md @@ -21,10 +21,9 @@ samples, guidance on mobile development, and a full API reference. # Video Tutorial - YouTube (Preview) : https://youtu.be/GfA6_JW26gM -- YouTube (Part 1) : https://youtu.be/SqlNko4Q1K0 -- YouTube (Part 2) : https://youtu.be/csgJwCec2WI +- Workout Fitness App - Playlist Video : https://youtube.com/playlist?list=PLfoSLwBzaK26zo_RjLv2cnasV7cPywzW_ -SUBSRIBE → https://bit.ly/3ymJhMh +Take my Flutter Course worth $500 for FREE → https://bit.ly/31hxS4R I hope you liked it, and dont forget to like, subscribe, share this video with your friends, and star the repository on GitHub! diff --git a/lib/core.dart b/lib/core.dart index 2470bc6..8369f75 100644 --- a/lib/core.dart +++ b/lib/core.dart @@ -1,5 +1,3 @@ -// export 'models/xcore.dart'; export 'pages/xcore.dart'; export 'routes/app_pages.dart'; -// export 'services/xcore.dart'; export 'shared/xcore.dart'; diff --git a/lib/pages/started/login_view.dart b/lib/pages/started/login_view.dart new file mode 100644 index 0000000..28b2151 --- /dev/null +++ b/lib/pages/started/login_view.dart @@ -0,0 +1,222 @@ +// ignore_for_file: prefer_const_constructors, prefer_const_literals_to_create_immutables + +import 'package:aqua_workout_lite/core.dart'; +import 'package:flutter/material.dart'; +import 'package:get/get.dart'; + +class LoginView extends StatelessWidget { + const LoginView({Key key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: kThirdColor, + body: SingleChildScrollView( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Stack( + children: [ + backgroundImage(), + titleSubtitle(), + ], + ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 15), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + formLogin(), + SizedBox(height: 15), + forgetButton(), + SizedBox(height: 15), + Center( + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + TextButton( + onPressed: () {}, + child: Container( + height: 50, + width: Get.width * 0.7, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(5), + color: kFirstColor, + ), + child: Center( + child: Text( + "Login", + style: TextStyle( + color: Colors.white, fontSize: 20), + ), + ), + ), + ), + TextButton( + onPressed: () {}, + child: Container( + height: 50, + width: Get.width * 0.7, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(5), + color: kThirdColor, + border: + Border.all(width: 1, color: kFirstColor)), + child: Center( + child: Text( + "Sign Up", + style: TextStyle( + color: Colors.white, fontSize: 20), + ), + ), + ), + ), + ], + ), + ) + ], + ), + ) + ], + ), + ), + ); + } + + Align forgetButton() { + return Align( + alignment: Alignment.centerRight, + child: TextButton( + onPressed: () {}, + child: Text( + "Forgot your password?", + style: TextStyle(color: Colors.white, fontSize: 18), + ), + ), + ); + } + + Column formLogin() { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + "Email", + style: TextStyle(color: Color(0xFF707070), fontSize: 18), + ), + TextField( + decoration: InputDecoration( + hintText: "faisalramdan.id@gmail.com", + enabledBorder: UnderlineInputBorder( + borderSide: BorderSide( + color: Color(0xFF707070), + ), + ), + focusedBorder: UnderlineInputBorder( + borderSide: BorderSide( + color: Color(0xFF707070), + ), + ), + ), + ), + SizedBox(height: 20), + Text( + "Password", + style: TextStyle(color: Color(0xFF707070), fontSize: 18), + ), + TextField( + obscureText: true, + decoration: InputDecoration( + hintText: "*******", + enabledBorder: UnderlineInputBorder( + borderSide: BorderSide( + color: Color(0xFF707070), + ), + ), + focusedBorder: UnderlineInputBorder( + borderSide: BorderSide( + color: Color(0xFF707070), + ), + ), + ), + ), + ], + ); + } + + Container titleSubtitle() { + return Container( + decoration: const BoxDecoration( + gradient: LinearGradient( + begin: Alignment.bottomCenter, + end: Alignment.topCenter, + colors: [ + kThirdColor, + Colors.transparent, + ]), + ), + height: Get.height * 0.55, + width: Get.width, + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 20), + child: Column( + children: [ + const SizedBox(height: 30), + RichText( + text: const TextSpan( + text: 'HARD\t', + style: TextStyle( + fontFamily: "Bebas", + fontSize: 30, + letterSpacing: 5, + ), + children: [ + TextSpan( + text: 'ELEMENT', + style: TextStyle( + color: kFirstColor, + ), + ) + ]), + ), + const Spacer(), + Align( + alignment: Alignment.centerLeft, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: const [ + Text( + "Sign In", + style: TextStyle( + fontSize: 40, + color: Colors.white, + fontWeight: FontWeight.bold, + ), + ), + SizedBox(height: 10), + Text( + "Train and live the new experience of \nexercising" + " at home", + style: TextStyle(fontSize: 20), + ), + ], + ), + ), + ], + ), + ), + ); + } + + Container backgroundImage() { + return Container( + height: Get.height * 0.55, + decoration: const BoxDecoration( + image: DecorationImage( + image: AssetImage("assets/images/black/12.jpg"), + fit: BoxFit.cover, + ), + ), + ); + } +} diff --git a/lib/pages/started/welcome_view.dart b/lib/pages/started/welcome_view.dart index d11800d..929531b 100644 --- a/lib/pages/started/welcome_view.dart +++ b/lib/pages/started/welcome_view.dart @@ -1,4 +1,5 @@ import 'package:aqua_workout_lite/core.dart'; +import 'package:aqua_workout_lite/routes/app_pages.dart'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; @@ -80,7 +81,7 @@ class WelcomeView extends StatelessWidget { ), const SizedBox(height: 10), TextButton( - onPressed: () {}, + onPressed: () => Get.toNamed(Routes.LOGIN), child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(25), diff --git a/lib/pages/xcore.dart b/lib/pages/xcore.dart index 447c7b8..7aaaea5 100644 --- a/lib/pages/xcore.dart +++ b/lib/pages/xcore.dart @@ -1,3 +1,4 @@ // Started export 'started/welcome_view.dart'; export 'started/about_view.dart'; +export 'started/login_view.dart'; diff --git a/lib/routes/app_pages.dart b/lib/routes/app_pages.dart index 0af2f1e..003fc29 100644 --- a/lib/routes/app_pages.dart +++ b/lib/routes/app_pages.dart @@ -17,5 +17,9 @@ class AppPages { name: Routes.ABOUT, page: () => const AboutView(), ), + GetPage( + name: Routes.LOGIN, + page: () => const LoginView(), + ), ]; } diff --git a/lib/routes/app_routes.dart b/lib/routes/app_routes.dart index d67a900..a46da19 100644 --- a/lib/routes/app_routes.dart +++ b/lib/routes/app_routes.dart @@ -6,4 +6,5 @@ abstract class Routes { // Main Menu Route static const WELCOME = '/welcome'; static const ABOUT = '/about-you'; + static const LOGIN = '/login'; }