Skip to content

Added Login Screen 7 #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+482 −0
Open

Added Login Screen 7 #55

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -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).
465 changes: 465 additions & 0 deletions lib/Login-Screen-7.dart
View file
Original file line number Diff line number Diff line change
@@ -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<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
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,
),
),
),
],
),
),
],
),
),
),
);
}
}
Binary file added screenshots/login_screen-7.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.