Skip to content

Commit 41c74e3

Browse files
fullenifulleni
authored
Merge pull request #142 from flutter-news-app-full-source-code/refactor/implement-responsive-layout-for-auth-pages
Refactor/implement responsive layout for auth pages
2 parents f1bddb4 + 98b6801 commit 41c74e3

File tree

5 files changed

+191
-179
lines changed

5 files changed

+191
-179
lines changed

‎lib/authentication/view/authentication_page.dart‎

Lines changed: 48 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'package:flutter/material.dart';
22
import 'package:flutter_bloc/flutter_bloc.dart';
33
import 'package:flutter_news_app_web_dashboard_full_source_code/authentication/bloc/authentication_bloc.dart';
4+
import 'package:flutter_news_app_web_dashboard_full_source_code/authentication/widgets/auth_layout.dart';
45
import 'package:flutter_news_app_web_dashboard_full_source_code/l10n/l10n.dart';
56
import 'package:flutter_news_app_web_dashboard_full_source_code/router/routes.dart';
67
import 'package:go_router/go_router.dart';
@@ -52,68 +53,56 @@ class AuthenticationPage extends StatelessWidget {
5253
state.status == AuthenticationStatus.loading ||
5354
state.status == AuthenticationStatus.requestCodeLoading;
5455

55-
return Padding(
56-
padding: const EdgeInsets.all(AppSpacing.paddingLarge),
57-
child: Center(
58-
child: SingleChildScrollView(
59-
child: Column(
60-
mainAxisAlignment: MainAxisAlignment.center,
61-
crossAxisAlignment: CrossAxisAlignment.stretch,
62-
children: [
63-
// --- Icon ---
64-
Padding(
65-
padding: const EdgeInsets.only(bottom: AppSpacing.xl),
66-
child: Icon(
67-
Icons.newspaper,
68-
size: AppSpacing.xxl * 2,
69-
color: colorScheme.primary,
70-
),
71-
),
72-
// --- Headline and Subheadline ---
73-
Text(
74-
l10n.authenticationPageHeadline,
75-
style: textTheme.headlineMedium?.copyWith(
76-
fontWeight: FontWeight.bold,
77-
),
78-
textAlign: TextAlign.center,
79-
),
80-
const SizedBox(height: AppSpacing.md),
81-
Text(
82-
l10n.authenticationPageSubheadline,
83-
style: textTheme.bodyLarge?.copyWith(
84-
color: colorScheme.onSurfaceVariant,
85-
),
86-
textAlign: TextAlign.center,
87-
),
88-
const SizedBox(height: AppSpacing.xxl),
56+
return AuthLayout(
57+
child: Column(
58+
mainAxisAlignment: MainAxisAlignment.center,
59+
crossAxisAlignment: CrossAxisAlignment.stretch,
60+
children: [
61+
// --- Icon ---
62+
Padding(
63+
padding: const EdgeInsets.only(bottom: AppSpacing.xl),
64+
child: Icon(
65+
Icons.newspaper,
66+
size: AppSpacing.xxl * 2,
67+
color: colorScheme.primary,
68+
),
69+
),
70+
// --- Headline and Subheadline ---
71+
Text(
72+
l10n.authenticationPageHeadline,
73+
style: textTheme.headlineMedium?.copyWith(
74+
fontWeight: FontWeight.bold,
75+
),
76+
textAlign: TextAlign.center,
77+
),
78+
const SizedBox(height: AppSpacing.md),
79+
Text(
80+
l10n.authenticationPageSubheadline,
81+
style: textTheme.bodyLarge?.copyWith(
82+
color: colorScheme.onSurfaceVariant,
83+
),
84+
textAlign: TextAlign.center,
85+
),
86+
const SizedBox(height: AppSpacing.xxl),
8987

90-
// --- Email Sign-In Button ---
91-
ElevatedButton.icon(
92-
icon: const Icon(Icons.email_outlined),
93-
onPressed: isLoading
94-
? null
95-
: () {
96-
context.goNamed(Routes.requestCodeName);
97-
},
98-
label: Text(l10n.authenticationEmailSignInButton),
99-
style: ElevatedButton.styleFrom(
100-
padding: const EdgeInsets.symmetric(
101-
vertical: AppSpacing.md,
102-
),
103-
textStyle: textTheme.labelLarge,
104-
),
88+
// --- Email Sign-In Button ---
89+
ElevatedButton.icon(
90+
icon: const Icon(Icons.email_outlined),
91+
onPressed: isLoading
92+
? null
93+
: () => context.goNamed(Routes.requestCodeName),
94+
label: Text(l10n.authenticationEmailSignInButton),
95+
style: ElevatedButton.styleFrom(
96+
padding: const EdgeInsets.symmetric(
97+
vertical: AppSpacing.md,
10598
),
106-
const SizedBox(height: AppSpacing.lg),
107-
108-
// --- Loading Indicator ---
109-
if (isLoading)
110-
const Padding(
111-
padding: EdgeInsets.only(top: AppSpacing.xl),
112-
child: Center(child: CircularProgressIndicator()),
113-
),
114-
],
99+
textStyle: textTheme.labelLarge,
100+
),
115101
),
116-
),
102+
const SizedBox(height: AppSpacing.lg),
103+
if (isLoading)
104+
const Center(child: CircularProgressIndicator()),
105+
],
117106
),
118107
);
119108
},

‎lib/authentication/view/email_code_verification_page.dart‎

Lines changed: 52 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
33
import 'package:flutter_news_app_web_dashboard_full_source_code/app/bloc/app_bloc.dart';
44
import 'package:flutter_news_app_web_dashboard_full_source_code/app/config/config.dart';
55
import 'package:flutter_news_app_web_dashboard_full_source_code/authentication/bloc/authentication_bloc.dart';
6+
import 'package:flutter_news_app_web_dashboard_full_source_code/authentication/widgets/auth_layout.dart';
67
import 'package:flutter_news_app_web_dashboard_full_source_code/l10n/l10n.dart';
78
import 'package:pinput/pinput.dart';
89
import 'package:ui_kit/ui_kit.dart';
@@ -45,65 +46,58 @@ class EmailCodeVerificationPage extends StatelessWidget {
4546
builder: (context, state) {
4647
final isLoading = state.status == AuthenticationStatus.loading;
4748

48-
return Padding(
49-
padding: const EdgeInsets.all(AppSpacing.paddingLarge),
50-
child: Center(
51-
child: SingleChildScrollView(
52-
child: Column(
53-
mainAxisAlignment: MainAxisAlignment.center,
54-
crossAxisAlignment: CrossAxisAlignment.stretch,
55-
children: [
56-
Icon(
57-
Icons.mark_email_read_outlined,
58-
size: AppSpacing.xxl * 2,
59-
color: colorScheme.primary,
60-
),
61-
const SizedBox(height: AppSpacing.xl),
62-
Text(
63-
l10n.emailCodeSentConfirmation(email),
64-
style: textTheme.headlineSmall?.copyWith(
65-
fontWeight: FontWeight.bold,
66-
),
67-
textAlign: TextAlign.center,
68-
),
69-
const SizedBox(height: AppSpacing.lg),
70-
Text(
71-
l10n.emailCodeSentInstructions,
72-
style: textTheme.bodyLarge?.copyWith(
73-
color: colorScheme.onSurfaceVariant,
74-
),
75-
textAlign: TextAlign.center,
76-
),
77-
// Display demo code if in demo environment
78-
BlocSelector<AppBloc, AppState, AppEnvironment?>(
79-
selector: (state) => state.environment,
80-
builder: (context, environment) {
81-
if (environment == AppEnvironment.demo) {
82-
return Column(
83-
children: [
84-
const SizedBox(height: AppSpacing.md),
85-
Text(
86-
l10n.demoCodeHint('123456'),
87-
style: textTheme.bodyMedium?.copyWith(
88-
color: colorScheme.secondary,
89-
fontWeight: FontWeight.bold,
90-
),
91-
textAlign: TextAlign.center,
92-
),
93-
],
94-
);
95-
}
96-
return const SizedBox.shrink();
97-
},
98-
),
99-
const SizedBox(height: AppSpacing.xl),
100-
_EmailCodeVerificationForm(
101-
email: email,
102-
isLoading: isLoading,
103-
),
104-
],
49+
return AuthLayout(
50+
child: Column(
51+
mainAxisAlignment: MainAxisAlignment.center,
52+
crossAxisAlignment: CrossAxisAlignment.stretch,
53+
children: [
54+
Icon(
55+
Icons.mark_email_read_outlined,
56+
size: AppSpacing.xxl * 2,
57+
color: colorScheme.primary,
10558
),
106-
),
59+
const SizedBox(height: AppSpacing.xl),
60+
Text(
61+
l10n.emailCodeSentConfirmation(email),
62+
style: textTheme.headlineSmall?.copyWith(
63+
fontWeight: FontWeight.bold,
64+
),
65+
textAlign: TextAlign.center,
66+
),
67+
const SizedBox(height: AppSpacing.lg),
68+
Text(
69+
l10n.emailCodeSentInstructions,
70+
style: textTheme.bodyLarge?.copyWith(
71+
color: colorScheme.onSurfaceVariant,
72+
),
73+
textAlign: TextAlign.center,
74+
),
75+
// Display demo code if in demo environment
76+
BlocSelector<AppBloc, AppState, AppEnvironment?>(
77+
selector: (state) => state.environment,
78+
builder: (context, environment) {
79+
if (environment == AppEnvironment.demo) {
80+
return Padding(
81+
padding: const EdgeInsets.only(top: AppSpacing.md),
82+
child: Text(
83+
l10n.demoCodeHint('123456'),
84+
style: textTheme.bodyMedium?.copyWith(
85+
color: colorScheme.secondary,
86+
fontWeight: FontWeight.bold,
87+
),
88+
textAlign: TextAlign.center,
89+
),
90+
);
91+
}
92+
return const SizedBox.shrink();
93+
},
94+
),
95+
const SizedBox(height: AppSpacing.xl),
96+
_EmailCodeVerificationForm(
97+
email: email,
98+
isLoading: isLoading,
99+
),
100+
],
107101
),
108102
);
109103
},

‎lib/authentication/view/request_code_page.dart‎

Lines changed: 55 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
88
import 'package:flutter_news_app_web_dashboard_full_source_code/app/bloc/app_bloc.dart';
99
import 'package:flutter_news_app_web_dashboard_full_source_code/app/config/config.dart';
1010
import 'package:flutter_news_app_web_dashboard_full_source_code/authentication/bloc/authentication_bloc.dart';
11+
import 'package:flutter_news_app_web_dashboard_full_source_code/authentication/widgets/auth_layout.dart';
1112
import 'package:flutter_news_app_web_dashboard_full_source_code/l10n/l10n.dart';
1213
import 'package:flutter_news_app_web_dashboard_full_source_code/router/routes.dart';
1314
import 'package:go_router/go_router.dart';
@@ -101,69 +102,61 @@ class _RequestCodeView extends StatelessWidget {
101102
final isLoading =
102103
state.status == AuthenticationStatus.requestCodeLoading;
103104

104-
return Padding(
105-
padding: const EdgeInsets.all(AppSpacing.paddingLarge),
106-
child: Center(
107-
child: SingleChildScrollView(
108-
child: Column(
109-
mainAxisAlignment: MainAxisAlignment.center,
110-
crossAxisAlignment: CrossAxisAlignment.stretch,
111-
children: [
112-
// --- Icon ---
113-
Padding(
114-
padding: const EdgeInsets.only(bottom: AppSpacing.xl),
115-
child: Icon(
116-
Icons.email_outlined,
117-
size: AppSpacing.xxl * 2,
118-
color: colorScheme.primary,
119-
),
120-
),
121-
// const SizedBox(height: AppSpacing.lg),
122-
// --- Explanation Text ---
123-
Text(
124-
l10n.requestCodePageHeadline,
125-
style: textTheme.headlineSmall?.copyWith(
126-
fontWeight: FontWeight.bold,
127-
),
128-
textAlign: TextAlign.center,
129-
),
130-
const SizedBox(height: AppSpacing.md),
131-
Text(
132-
l10n.requestCodePageSubheadline,
133-
style: textTheme.bodyLarge?.copyWith(
134-
color: colorScheme.onSurfaceVariant,
135-
),
136-
textAlign: TextAlign.center,
137-
),
138-
// Display demo email if in demo environment
139-
BlocSelector<AppBloc, AppState, AppEnvironment?>(
140-
selector: (state) => state.environment,
141-
builder: (context, environment) {
142-
if (environment == AppEnvironment.demo) {
143-
return Padding(
144-
padding: const EdgeInsets.only(
145-
top: AppSpacing.lg,
146-
),
147-
child: Text(
148-
l10n.demoEmailHint(
149-
'admin@example.com | publisher@example.com',
150-
),
151-
style: textTheme.bodyMedium?.copyWith(
152-
color: colorScheme.secondary,
153-
fontWeight: FontWeight.bold,
154-
),
155-
textAlign: TextAlign.center,
156-
),
157-
);
158-
}
159-
return const SizedBox.shrink();
160-
},
161-
),
162-
const SizedBox(height: AppSpacing.xxl),
163-
_EmailLinkForm(isLoading: isLoading),
164-
],
105+
return AuthLayout(
106+
child: Column(
107+
mainAxisAlignment: MainAxisAlignment.center,
108+
crossAxisAlignment: CrossAxisAlignment.stretch,
109+
children: [
110+
// --- Icon ---
111+
Padding(
112+
padding: const EdgeInsets.only(bottom: AppSpacing.xl),
113+
child: Icon(
114+
Icons.email_outlined,
115+
size: AppSpacing.xxl * 2,
116+
color: colorScheme.primary,
117+
),
118+
),
119+
// --- Explanation Text ---
120+
Text(
121+
l10n.requestCodePageHeadline,
122+
style: textTheme.headlineSmall?.copyWith(
123+
fontWeight: FontWeight.bold,
124+
),
125+
textAlign: TextAlign.center,
126+
),
127+
const SizedBox(height: AppSpacing.md),
128+
Text(
129+
l10n.requestCodePageSubheadline,
130+
style: textTheme.bodyLarge?.copyWith(
131+
color: colorScheme.onSurfaceVariant,
132+
),
133+
textAlign: TextAlign.center,
134+
),
135+
// Display demo email if in demo environment
136+
BlocSelector<AppBloc, AppState, AppEnvironment?>(
137+
selector: (state) => state.environment,
138+
builder: (context, environment) {
139+
if (environment == AppEnvironment.demo) {
140+
return Padding(
141+
padding: const EdgeInsets.only(top: AppSpacing.lg),
142+
child: Text(
143+
l10n.demoEmailHint(
144+
'admin@example.com | publisher@example.com',
145+
),
146+
style: textTheme.bodyMedium?.copyWith(
147+
color: colorScheme.secondary,
148+
fontWeight: FontWeight.bold,
149+
),
150+
textAlign: TextAlign.center,
151+
),
152+
);
153+
}
154+
return const SizedBox.shrink();
155+
},
165156
),
166-
),
157+
const SizedBox(height: AppSpacing.xxl),
158+
_EmailLinkForm(isLoading: isLoading),
159+
],
167160
),
168161
);
169162
},

0 commit comments

Comments
 (0)