diff --git a/README.md b/README.md index 6c7c890..74b3509 100644 --- a/README.md +++ b/README.md @@ -208,7 +208,24 @@ Container( ), ) ``` + #### Login Screen 7 + + ![Screenshot on Android](screenshots/login_screen-7.png) + + ``` + Container( + child: LoginScreen7( + onLoginClick: () { + // when login button is pressed + }, + navigatePage: () { + // change to signup screen + } + ), + ) + ``` ## Contribution and Donation + Feel free to contribute. If you like the project and want to donate, [click here](https://www.paypal.me/samarthagarwal). diff --git a/lib/Login-Screen-7.dart b/lib/Login-Screen-7.dart new file mode 100644 index 0000000..34f1e32 --- /dev/null +++ b/lib/Login-Screen-7.dart @@ -0,0 +1,465 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; + +class LoginScreen7 extends StatelessWidget { + const MyApp({super.key}); + + @override + Widget build(BuildContext context) { + SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle( + statusBarColor: Colors.transparent, + )); + return MaterialApp( + title: 'LoginScreen', + // Routing + initialRoute: '/', + routes: { + '/': (context) => const IndexPage(), + '/login': (context) => const LoginPage(), + '/signup': (context) => SignUpPage(), + }, + ); + } +} + +class IndexPage extends StatelessWidget { + const IndexPage({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: const Color(0xFF023436), + body: Center( + child: SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + // Container for the app name and description. + Container( + padding: const EdgeInsets.fromLTRB(0, 200, 0, 150), + child: const Column( + children: [ + Text( + 'Enter Title', + style: TextStyle( + fontSize: 36, + fontWeight: FontWeight.bold, + color: Colors.white, + ), + ), + Text( + 'Enter Here', + style: TextStyle( + fontSize: 18, + color: Colors.white, + ), + ), + SizedBox(height: 16), + ], + ), + ), + // Container for the login and sign up section. + Container( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 150), + height: MediaQuery.of(context).size.height * 0.5, + width: MediaQuery.of(context).size.width * 0.95, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(20), + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + // Text indicating the purpose of the section. + const Text( + 'Log in or Sign up', + style: TextStyle( + fontSize: 18, + color: Colors.black, + ), + ), + const SizedBox(height: 8), + // Divider line. + const Divider( + color: Colors.grey, + thickness: 1, + indent: 16, + endIndent: 16, + ), + const SizedBox(height: 16), + // Login button. + SizedBox( + width: 200, + height: 50, + child: ElevatedButton( + onPressed: () { + // Navigate to the login page. + Navigator.pushNamed(context, '/login'); + }, + style: ElevatedButton.styleFrom( + backgroundColor: const Color(0xFF023436), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(20), + ), + ), + child: const Text( + 'Login', + style: TextStyle( + fontSize: 18, + color: Colors.white, + ), + ), + ), + ), + const SizedBox(height: 16), + // Sign up button. + SizedBox( + width: 200, + height: 50, + child: ElevatedButton( + onPressed: () { + // Handle sign up button press and navigate to the sign up page. + Navigator.pushNamed(context, '/signup'); + }, + style: ElevatedButton.styleFrom( + backgroundColor: const Color(0xFF023436), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(20), + ), + ), + child: const Text( + 'Sign Up', + style: TextStyle( + fontSize: 18, + color: Colors.white, + ), + ), + ), + ), + ], + ), + ), + ], + ), + ), + ), + ); + } +} + +class LoginPage extends StatefulWidget { + const LoginPage({super.key}); + + @override + State createState() => _LoginPageState(); +} + +class _LoginPageState extends State { + final TextEditingController _emailController = TextEditingController(); + + final TextEditingController _passwordController = TextEditingController(); + + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: const Color(0xFF023436), + body: Center( + child: SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Container( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: const Column( + children: [ + Text( + 'Enter Title', + style: TextStyle( + fontSize: 36, + fontWeight: FontWeight.bold, + color: Colors.white, + ), + ), + Text( + 'Enter Here', + style: TextStyle( + fontSize: 18, + color: Colors.white, + ), + ), + SizedBox(height: 16), + ], + ), + ), + Container( + padding: const EdgeInsets.fromLTRB(0, 20, 0, 30), + height: MediaQuery.of(context).size.height * 0.5, + width: MediaQuery.of(context).size.width * 0.9, + decoration: BoxDecoration( + color: const Color.fromARGB(255, 255, 255, 255), + borderRadius: BorderRadius.circular(30), + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Text( + 'Login', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 32, + ), + ), + const SizedBox(height: 16), + TextField( + controller: _emailController, + decoration: const InputDecoration( + hintText: 'Email', + prefixIcon: Icon(Icons.email), + filled: true, + fillColor: Colors.white, + ), + ), + const SizedBox(height: 16), + TextField( + controller: _passwordController, + obscureText: true, + decoration: const InputDecoration( + hintText: 'Password', + prefixIcon: Icon(Icons.lock), + filled: true, + fillColor: Colors.white, + ), + ), + const SizedBox(height: 16), + SizedBox( + width: 200, + height: 50, + child: ElevatedButton( + onPressed: () async { + String email = _emailController.text.trim(); + String password = _passwordController.text.trim(); + + if (email.isNotEmpty && password.isNotEmpty) { + Navigator.pushNamed(context, '/'); + } else { + showDialog( + context: context, + builder: (BuildContext context) { + return AlertDialog( + title: const Text('Error'), + content: const Text( + 'Email and password are required'), + actions: [ + TextButton( + onPressed: () { + Navigator.of(context).pop(); + }, + child: const Text('OK'), + ), + ], + ); + }, + ); + } + }, + style: ElevatedButton.styleFrom( + backgroundColor: const Color(0xFF023436), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(20), + ), + ), + child: const Text( + 'Login', + style: TextStyle( + fontSize: 18, + color: Colors.white, + ), + ), + ), + ), + const SizedBox(height: 16), + GestureDetector( + onTap: () { + // Navigate to the sign-up page + Navigator.pushNamed(context, '/signup'); + }, + child: const Text( + 'Don\'t have an account? Sign up', + style: TextStyle( + fontSize: 16, + color: Colors.blue, + decoration: TextDecoration.underline, + ), + ), + ), + ], + ), + ), + ], + ), + ), + ), + ); + } +} + +class SignUpPage extends StatelessWidget { + final TextEditingController _firstNameController = TextEditingController(); + final TextEditingController _lastNameController = TextEditingController(); + final TextEditingController _emailController = TextEditingController(); + final TextEditingController _passwordController = TextEditingController(); + + SignUpPage({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + backgroundColor: const Color(0xFF023436), + body: Center( + child: SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Container( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: const Column( + children: [ + Text( + 'Enter Title', + style: TextStyle( + fontSize: 36, + fontWeight: FontWeight.bold, + color: Colors.white, + ), + ), + Text( + 'Enter Here', + style: TextStyle( + fontSize: 18, + color: Colors.white, + ), + ), + SizedBox(height: 16), + ], + ), + ), + Container( + padding: const EdgeInsets.fromLTRB(0, 10, 0, 30), + height: MediaQuery.of(context).size.height * 0.75, + width: MediaQuery.of(context).size.width * 0.9, + decoration: BoxDecoration( + color: const Color.fromARGB(255, 255, 255, 255), + borderRadius: BorderRadius.circular(30), + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Text( + 'Register', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 32, + ), + ), + const SizedBox(height: 16), + TextField( + controller: _firstNameController, + decoration: const InputDecoration( + hintText: 'First Name', + prefixIcon: Icon(Icons.person), + filled: true, + fillColor: Colors.white, + ), + ), + const SizedBox(height: 16), + TextField( + controller: _lastNameController, + decoration: const InputDecoration( + hintText: 'Last Name', + prefixIcon: Icon(Icons.person_2), + filled: true, + fillColor: Colors.white, + ), + ), + const SizedBox(height: 16), + TextField( + controller: _emailController, + decoration: const InputDecoration( + hintText: 'Email', + prefixIcon: Icon(Icons.email), + filled: true, + fillColor: Colors.white, + ), + ), + const SizedBox(height: 16), + TextField( + controller: _passwordController, + obscureText: true, + decoration: const InputDecoration( + hintText: 'Password', + prefixIcon: Icon(Icons.lock), + filled: true, + fillColor: Colors.white, + ), + ), + const SizedBox(height: 16), + const TextField( + obscureText: true, + decoration: InputDecoration( + hintText: 'Confirm Password', + prefixIcon: Icon(Icons.lock), + filled: true, + fillColor: Colors.white, + ), + ), + const SizedBox(height: 16), + SizedBox( + width: 200, + height: 50, + child: ElevatedButton( + onPressed: () async { + Navigator.pushNamed(context, '/login'); + }, + style: ElevatedButton.styleFrom( + backgroundColor: const Color(0xFF023436), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(20), + ), + ), + child: const Text( + 'Register', + style: TextStyle( + fontSize: 18, + color: Colors.white, + ), + ), + ), + ), + const Text( + 'Already Have an Account?', + style: TextStyle( + fontSize: 16, + ), + ), + GestureDetector( + onTap: () { + Navigator.pushNamed(context, '/login'); + }, + child: const Text( + 'Login', + style: TextStyle( + color: Colors.blue, + decoration: TextDecoration.underline, + ), + ), + ), + ], + ), + ), + ], + ), + ), + ), + ); + } +} diff --git a/screenshots/login_screen-7.png b/screenshots/login_screen-7.png new file mode 100644 index 0000000..200a132 Binary files /dev/null and b/screenshots/login_screen-7.png differ