Skip to content

Commit 9f084bd

Browse files
SoftEngMuhammadAliSoftEngMuhammadAli
committed
Refactored authentication screens for improved layout and responsiveness; enhance UI components and add dynamic content handling
1 parent 58087a5 commit 9f084bd

14 files changed

+435
-510
lines changed

‎lib/screens/auth/login_screen.dart‎

Lines changed: 94 additions & 166 deletions
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,80 @@ import 'package:responsive_framework/responsive_framework.dart';
88
class LogInScreen extends StatelessWidget {
99
const LogInScreen({super.key});
1010

11-
@override
12-
Widget build(BuildContext context) {
13-
final size = MediaQuery.of(context).size;
14-
final isResponsive = ResponsiveBreakpoints.of(context).largerThan(TABLET);
15-
16-
return Scaffold(
17-
body: SizedBox(
18-
height: size.height,
19-
width: size.width,
20-
child: isResponsive
21-
? Row(
22-
children: [
23-
_buildLeftPanel(size, context),
24-
_buildRightPanel(),
25-
],
26-
)
27-
: _buildMobileLayout(size, context),
28-
),
11+
Widget _buildLoginForm(BuildContext context) {
12+
return Column(
13+
mainAxisAlignment: MainAxisAlignment.center,
14+
crossAxisAlignment: CrossAxisAlignment.start,
15+
children: [
16+
const CircleAvatar(
17+
radius: 50,
18+
backgroundColor: Colors.white,
19+
child: Icon(Icons.person_outline, size: 50, color: Color(0xFF5B86E5)),
20+
),
21+
const SizedBox(height: 20),
22+
const Text(
23+
'Welcome Back!',
24+
style: TextStyle(
25+
fontSize: 32,
26+
fontWeight: FontWeight.bold,
27+
color: Colors.white,
28+
),
29+
),
30+
const SizedBox(height: 10),
31+
const Text(
32+
'Log in to your account',
33+
style: TextStyle(
34+
fontSize: 18,
35+
color: Colors.white70,
36+
),
37+
),
38+
const SizedBox(height: 30),
39+
const CustomTextField(
40+
maxLines: 1,
41+
hintText: 'Email',
42+
prefixIcon: Icons.mail_outline,
43+
),
44+
const SizedBox(height: 20),
45+
const CustomTextField(
46+
maxLines: 1,
47+
hintText: 'Password',
48+
prefixIcon: Icons.lock_outline,
49+
),
50+
const SizedBox(height: 30),
51+
SizedBox(
52+
height: 48.0,
53+
width: double.infinity,
54+
child: CustomButton(
55+
title: 'Login',
56+
onPressed: () {
57+
Navigator.push(
58+
context, MaterialPageRoute(builder: (_) => HomeScreen()));
59+
},
60+
),
61+
),
62+
const SizedBox(height: 20),
63+
Row(
64+
mainAxisAlignment: MainAxisAlignment.center,
65+
children: [
66+
const Text(
67+
'Don\'t have an account?',
68+
style: TextStyle(color: Colors.white),
69+
),
70+
TextButton(
71+
onPressed: () {
72+
Navigator.push(
73+
context, MaterialPageRoute(builder: (_) => SignUpScreen()));
74+
},
75+
child:
76+
const Text('Sign Up', style: TextStyle(color: Colors.white)),
77+
),
78+
],
79+
),
80+
],
2981
);
3082
}
3183

32-
Widget _buildLeftPanel(
33-
Size size,
34-
BuildContext context,
35-
) {
84+
Widget _buildLeftPanel(Size size, BuildContext context) {
3685
return Expanded(
3786
child: Container(
3887
height: size.height,
@@ -45,77 +94,7 @@ class LogInScreen extends StatelessWidget {
4594
),
4695
),
4796
padding: const EdgeInsets.all(40.0),
48-
child: Column(
49-
mainAxisAlignment: MainAxisAlignment.center,
50-
crossAxisAlignment: CrossAxisAlignment.start,
51-
children: [
52-
const CircleAvatar(
53-
radius: 50,
54-
backgroundColor: Colors.white,
55-
child: Icon(Icons.person_outline,
56-
size: 50, color: Color(0xFF5B86E5)),
57-
),
58-
const SizedBox(height: 20),
59-
const Text(
60-
'Welcome Back!',
61-
style: TextStyle(
62-
fontSize: 32,
63-
fontWeight: FontWeight.bold,
64-
color: Colors.white,
65-
),
66-
),
67-
const SizedBox(height: 10),
68-
const Text(
69-
'Log in to your account',
70-
style: TextStyle(
71-
fontSize: 18,
72-
color: Colors.white70,
73-
),
74-
),
75-
const SizedBox(height: 30),
76-
const CustomTextField(
77-
maxLines: 1,
78-
hintText: 'Email',
79-
prefixIcon: Icons.mail_outline,
80-
),
81-
const SizedBox(height: 20),
82-
const CustomTextField(
83-
maxLines: 1,
84-
hintText: 'Password',
85-
prefixIcon: Icons.lock_outline,
86-
),
87-
const SizedBox(height: 30),
88-
SizedBox(
89-
height: 48.0,
90-
width: double.infinity,
91-
child: CustomButton(
92-
title: 'Login',
93-
onPressed: () {
94-
Navigator.push(
95-
context, MaterialPageRoute(builder: (_) => HomeScreen()));
96-
},
97-
),
98-
),
99-
const SizedBox(height: 20),
100-
Row(
101-
mainAxisAlignment: MainAxisAlignment.center,
102-
children: [
103-
const Text(
104-
'Don\'t have an account?',
105-
style: TextStyle(color: Colors.white),
106-
),
107-
TextButton(
108-
onPressed: () {
109-
Navigator.push(context,
110-
MaterialPageRoute(builder: (_) => SignUpScreen()));
111-
},
112-
child: const Text('Sign Up',
113-
style: TextStyle(color: Colors.white)),
114-
),
115-
],
116-
),
117-
],
118-
),
97+
child: _buildLoginForm(context),
11998
),
12099
);
121100
}
@@ -139,10 +118,7 @@ class LogInScreen extends StatelessWidget {
139118
);
140119
}
141120

142-
Widget _buildMobileLayout(
143-
Size size,
144-
BuildContext context,
145-
) {
121+
Widget _buildMobileLayout(Size size, BuildContext context) {
146122
return Container(
147123
padding: const EdgeInsets.all(20.0),
148124
decoration: BoxDecoration(
@@ -152,75 +128,27 @@ class LogInScreen extends StatelessWidget {
152128
end: Alignment.bottomRight,
153129
),
154130
),
155-
child: Column(
156-
mainAxisAlignment: MainAxisAlignment.center,
157-
children: [
158-
const CircleAvatar(
159-
radius: 50,
160-
backgroundColor: Colors.white,
161-
child:
162-
Icon(Icons.person_outline, size: 50, color: Color(0xFF5B86E5)),
163-
),
164-
const SizedBox(height: 20),
165-
const Text(
166-
'Welcome Back!',
167-
style: TextStyle(
168-
fontSize: 32,
169-
fontWeight: FontWeight.bold,
170-
color: Colors.white,
171-
),
172-
),
173-
const SizedBox(height: 10),
174-
const Text(
175-
'Log in to your account',
176-
style: TextStyle(
177-
fontSize: 18,
178-
color: Colors.white70,
179-
),
180-
),
181-
const SizedBox(height: 30),
182-
const CustomTextField(
183-
maxLines: 1,
184-
hintText: 'Email',
185-
prefixIcon: Icons.mail_outline,
186-
),
187-
const SizedBox(height: 20),
188-
const CustomTextField(
189-
maxLines: 1,
190-
hintText: 'Password',
191-
prefixIcon: Icons.lock_outline,
192-
),
193-
const SizedBox(height: 30),
194-
SizedBox(
195-
height: 48.0,
196-
width: double.infinity,
197-
child: CustomButton(
198-
title: 'Login',
199-
onPressed: () {
200-
Navigator.push(
201-
context, MaterialPageRoute(builder: (_) => HomeScreen()));
202-
},
203-
),
204-
),
205-
const SizedBox(height: 20),
206-
Row(
207-
mainAxisAlignment: MainAxisAlignment.center,
208-
children: [
209-
const Text(
210-
'Don\'t have an account?',
211-
style: TextStyle(color: Colors.white),
212-
),
213-
TextButton(
214-
onPressed: () {
215-
Navigator.push(context,
216-
MaterialPageRoute(builder: (_) => SignUpScreen()));
217-
},
218-
child: const Text('Sign Up',
219-
style: TextStyle(color: Colors.white)),
220-
),
221-
],
222-
),
223-
],
131+
child: _buildLoginForm(context),
132+
);
133+
}
134+
135+
@override
136+
Widget build(BuildContext context) {
137+
final size = MediaQuery.of(context).size;
138+
final isResponsive = ResponsiveBreakpoints.of(context).largerThan(TABLET);
139+
140+
return Scaffold(
141+
body: SizedBox(
142+
height: size.height,
143+
width: size.width,
144+
child: isResponsive
145+
? Row(
146+
children: [
147+
_buildLeftPanel(size, context),
148+
_buildRightPanel(),
149+
],
150+
)
151+
: _buildMobileLayout(size, context),
224152
),
225153
);
226154
}

0 commit comments

Comments
 (0)