Skip to content

Commit

Permalink
Merge pull request #4 from JothishKamal/dev
Browse files Browse the repository at this point in the history 
feat: password visibility + refactoring
  • Loading branch information
@souvik03-136
souvik03-136 authored Jul 5, 2024
2 parents f5b1ff5 + 44042c0 commit 011ab09
Show file tree
Hide file tree
Showing 2 changed files with 124 additions and 100 deletions.
112 changes: 12 additions & 100 deletions lib/screens/login_screen.dart
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:spotify_collab_app/widgets/custom_text_field.dart';

class LoginScreen extends StatelessWidget {
const LoginScreen({super.key});
Expand Down Expand Up @@ -48,112 +49,23 @@ class LoginScreen extends StatelessWidget {
constraints: BoxConstraints(
minHeight: constraints.maxHeight,
),
child: IntrinsicHeight(
child: const IntrinsicHeight(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 50),
const Text(
'Email ID',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontFamily: 'Avenir Next',
fontWeight: FontWeight.w600,
),
SizedBox(height: 50),
CustomTextField(
labelText: 'Email ID',
obscureText: false,
),
const SizedBox(height: 10),
Container(
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.3),
borderRadius: BorderRadius.circular(10),
),
child: TextField(
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: Colors.white.withOpacity(0.3)),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide:
const BorderSide(color: Colors.white),
),
contentPadding:
const EdgeInsets.symmetric(horizontal: 10),
),
),
SizedBox(height: 50),
CustomTextField(
labelText: 'Password',
obscureText: true,
),
const SizedBox(height: 50),
const Text(
'Password',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontFamily: 'Avenir Next',
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: 10),
Container(
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.3),
borderRadius: BorderRadius.circular(10),
),
child: TextField(
style: const TextStyle(color: Colors.white),
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: Colors.white.withOpacity(0.3)),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide:
const BorderSide(color: Colors.white),
),
contentPadding:
const EdgeInsets.symmetric(horizontal: 10),
),
),
),
const SizedBox(height: 70),
SizedBox(height: 70),
Center(
child: Container(
width: double.infinity,
height: 50,
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(25),
),
child: ElevatedButton(
onPressed: () {
// Handle login button press
},
style: ElevatedButton.styleFrom(
shadowColor: Colors.transparent,
),
child: const Text(
'Login',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontFamily: 'Avenir Next',
fontWeight: FontWeight.w600,
),
),
),
),
child: LoginButton(),
),
],
),
Expand Down
112 changes: 112 additions & 0 deletions lib/widgets/custom_text_field.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
import 'package:flutter/material.dart';

class CustomTextField extends StatefulWidget {
final String labelText;
final bool obscureText;

const CustomTextField({
super.key,
required this.labelText,
required this.obscureText,
});

@override
CustomTextFieldState createState() => CustomTextFieldState();
}

class CustomTextFieldState extends State<CustomTextField> {
bool _isPasswordVisible = false;

@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.labelText,
style: const TextStyle(
color: Colors.white,
fontSize: 18,
fontFamily: 'Avenir Next',
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: 10),
Container(
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.3),
borderRadius: BorderRadius.circular(10),
),
child: TextField(
style: const TextStyle(color: Colors.white),
obscureText: widget.obscureText && !_isPasswordVisible,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: Colors.white.withOpacity(0.3),
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(color: Colors.white),
),
contentPadding: const EdgeInsets.symmetric(horizontal: 10),
suffixIcon: widget.obscureText
? IconButton(
icon: Icon(
_isPasswordVisible
? Icons.visibility_outlined
: Icons.visibility_off_outlined,
color: Colors.white.withOpacity(0.3),
),
onPressed: () {
setState(() {
_isPasswordVisible = !_isPasswordVisible;
});
},
)
: null,
),
),
),
],
);
}
}

class LoginButton extends StatelessWidget {
const LoginButton({super.key});

@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: 50,
decoration: BoxDecoration(
border: Border.all(color: Colors.white),
borderRadius: BorderRadius.circular(25),
),
child: ElevatedButton(
onPressed: () {
// Handle login button press
},
style: ElevatedButton.styleFrom(
shadowColor: Colors.transparent,
),
child: const Text(
'Login',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontFamily: 'Avenir Next',
fontWeight: FontWeight.w600,
),
),
),
);
}
}

0 comments on commit 011ab09

Please sign in to comment.