added size utils to recoverPassword

This commit is contained in:
2025-12-12 13:42:06 +01:00
parent 098217f47a
commit 2e3681d36d
7 changed files with 60 additions and 47 deletions

View File

@@ -9,6 +9,7 @@ import 'package:sf_app_platform/navigation/app_router.dart';
import 'package:navigation/navigation_module.dart'; import 'package:navigation/navigation_module.dart';
import 'package:sf_infrastructure/sf_infrastructure.dart'; import 'package:sf_infrastructure/sf_infrastructure.dart';
import 'package:sf_localizations/sf_localizations.dart'; import 'package:sf_localizations/sf_localizations.dart';
import 'package:utils/utils.dart';
Future<void> main() async { Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized(); WidgetsFlutterBinding.ensureInitialized();
@@ -26,6 +27,8 @@ class PlatformApp extends ConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
SizeUtils.init(context: context);
return MaterialApp.router( return MaterialApp.router(
title: 'SaveFamily', title: 'SaveFamily',
theme: ThemeData( theme: ThemeData(

View File

@@ -59,6 +59,8 @@ dependencies:
path: ../../packages/fonts path: ../../packages/fonts
sf_infrastructure: sf_infrastructure:
path: ../../packages/sf_infrastructure path: ../../packages/sf_infrastructure
utils:
path: ../../packages/utils
#dependencies go here #dependencies go here
cupertino_icons: ^1.0.8 cupertino_icons: ^1.0.8

View File

@@ -5,6 +5,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:get_it/get_it.dart'; import 'package:get_it/get_it.dart';
import 'package:navigation/navigation.dart'; import 'package:navigation/navigation.dart';
import 'package:sf_localizations/sf_localizations.dart'; import 'package:sf_localizations/sf_localizations.dart';
import 'package:utils/utils.dart';
class NewPasswordScreen extends ConsumerStatefulWidget { class NewPasswordScreen extends ConsumerStatefulWidget {
final NavigationContract navigationContract; final NavigationContract navigationContract;
@@ -38,20 +39,20 @@ class NewPasswordScreenState extends ConsumerState<NewPasswordScreen> {
child: SingleChildScrollView(child: Column( child: SingleChildScrollView(child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
const Text( Text(
'Recuperar contraseña', 'Recuperar contraseña',
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
fontSize: 30/*SizeUtils.getByScreen(small: 30, xl: 26)*/, fontSize: SizeUtils.getByScreen(small: 30, big: 30, xl: 26),
letterSpacing: 0 letterSpacing: 0
), ),
), ),
SizedBox(height: 42/*SizeUtils.getBySize(small: 42, big: 32)*/), SizedBox(height: SizeUtils.getByScreen(small: 42, big: 32)),
CustomTextField( CustomTextField(
showPassword: viewState.passwordVisible, showPassword: viewState.passwordVisible,
label: 'Nueva contraseña', label: 'Nueva contraseña',
labelSize: 14/*SizeUtils.getByScreen(small: 14, xl: 12)*/, labelSize: SizeUtils.getByScreen(small: 14, big: 14, xl: 12),
hint: '********', hint: '********',
controller: viewModel.passwordController, controller: viewModel.passwordController,
onVisibilityChanged: viewModel.togglePasswordVisible, onVisibilityChanged: viewModel.togglePasswordVisible,
@@ -60,7 +61,7 @@ class NewPasswordScreenState extends ConsumerState<NewPasswordScreen> {
CustomTextField( CustomTextField(
showPassword: viewState.passwordVisible, showPassword: viewState.passwordVisible,
label: 'Repetir contraseña', label: 'Repetir contraseña',
labelSize: 14/*SizeUtils.getByScreen(small: 14, xl: 12)*/, labelSize: SizeUtils.getByScreen(small: 14, big: 14, xl: 12),
hint: '********', hint: '********',
controller: viewModel.repeatedPasswordController, controller: viewModel.repeatedPasswordController,
onVisibilityChanged: viewModel.togglePasswordVisible, onVisibilityChanged: viewModel.togglePasswordVisible,
@@ -98,13 +99,13 @@ class NewPasswordScreenState extends ConsumerState<NewPasswordScreen> {
? ThemeCode.buttonPrimary ? ThemeCode.buttonPrimary
: ThemeCode.buttonSecondary), : ThemeCode.buttonSecondary),
), ),
const Text( Text(
'Al menos 8 caracteres', 'Al menos 8 caracteres',
style: TextStyle(fontSize: 14/*SizeUtils.getByScreen(small: 14, xl: 12)*/) style: TextStyle(fontSize: SizeUtils.getByScreen(small: 14, big: 14, xl: 12))
), ),
], ],
), ),
SizedBox(height: 2/*SizeUtils.getBySize(small: 2, big: 4)*/), SizedBox(height: SizeUtils.getByScreen(small: 2, big: 4)),
Row( Row(
spacing: 8, spacing: 8,
children: [ children: [
@@ -114,13 +115,13 @@ class NewPasswordScreenState extends ConsumerState<NewPasswordScreen> {
? ThemeCode.buttonPrimary ? ThemeCode.buttonPrimary
: ThemeCode.buttonSecondary), : ThemeCode.buttonSecondary),
), ),
const Text( Text(
'Una mayúscula', 'Una mayúscula',
style: TextStyle(fontSize: 14/*SizeUtils.getByScreen(small: 14, xl: 12)*/) style: TextStyle(fontSize: SizeUtils.getByScreen(small: 14, big: 14, xl: 12))
), ),
], ],
), ),
SizedBox(height: 2/*SizeUtils.getBySize(small: 2, big: 4)*/), SizedBox(height: SizeUtils.getByScreen(small: 2, big: 4)),
Row( Row(
spacing: 8, spacing: 8,
children: [ children: [
@@ -130,13 +131,13 @@ class NewPasswordScreenState extends ConsumerState<NewPasswordScreen> {
? ThemeCode.buttonPrimary ? ThemeCode.buttonPrimary
: ThemeCode.buttonSecondary), : ThemeCode.buttonSecondary),
), ),
const Text( Text(
'Un número', 'Un número',
style: TextStyle(fontSize: 14/*SizeUtils.getByScreen(small: 14, xl: 12)*/) style: TextStyle(fontSize: SizeUtils.getByScreen(small: 14, big: 14, xl: 12))
), ),
], ],
), ),
SizedBox(height: 2/*SizeUtils.getBySize(small: 2, big: 4)*/), SizedBox(height: SizeUtils.getByScreen(small: 2, big: 4)),
Row( Row(
spacing: 8, spacing: 8,
children: [ children: [
@@ -146,18 +147,18 @@ class NewPasswordScreenState extends ConsumerState<NewPasswordScreen> {
? ThemeCode.buttonPrimary ? ThemeCode.buttonPrimary
: ThemeCode.buttonSecondary), : ThemeCode.buttonSecondary),
), ),
const Text( Text(
'Un carácter especial', 'Un carácter especial',
style: TextStyle(fontSize: 14/*SizeUtils.getByScreen(small: 14, xl: 12)*/) style: TextStyle(fontSize: SizeUtils.getByScreen(small: 14, big: 14, xl: 12))
), ),
], ],
), ),
SizedBox(height: 32/*SizeUtils.getByScreen(small: 32, xl: 24)*/), SizedBox(height: SizeUtils.getByScreen(small: 32, big: 32, xl: 24)),
Align( Align(
alignment: Alignment.bottomLeft, alignment: Alignment.bottomLeft,
child: const Text( child: Text(
'Teléfono móvil', 'Teléfono móvil',
style: TextStyle(fontSize: 14/*SizeUtils.getByScreen(small: 14, xl: 12)*/, letterSpacing: 0), style: TextStyle(fontSize: SizeUtils.getByScreen(small: 14, big: 14, xl: 12), letterSpacing: 0),
) )
), ),
SizedBox(height: 8), SizedBox(height: 8),

View File

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
import 'package:navigation/navigation.dart'; import 'package:navigation/navigation.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:sf_localizations/sf_localizations.dart'; import 'package:sf_localizations/sf_localizations.dart';
import 'package:utils/utils.dart';
import '../state/recover_password_view_model.dart'; import '../state/recover_password_view_model.dart';
@@ -22,28 +23,28 @@ class RequestRecoveryScreen extends ConsumerWidget {
return Scaffold( return Scaffold(
backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary), backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
body: Container( body: Container(
margin: EdgeInsets.all(30/*SizeUtils.getByScreen(small: 30, xl: 20)*/), margin: EdgeInsets.all(SizeUtils.getByScreen(small: 30, big: 30, xl: 20)),
child: Center( child: Center(
child: Column( child: Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Text( Text(
"Recuperar contaseña", "Recuperar contaseña",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 26/*SizeUtils.getByScreen(small: 30, xl: 26)*/), style: TextStyle(fontWeight: FontWeight.bold, fontSize: SizeUtils.getByScreen(small: 30, big: 30, xl: 26)),
), ),
SizedBox(height: 24,/*SizeUtils.getByScreen(small: 24, big: 32),*/), SizedBox(height: SizeUtils.getByScreen(small: 24, big: 32)),
Text( Text(
"Introduce tu email para enviarte un enlace de recuperación", "Introduce tu email para enviarte un enlace de recuperación",
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle(letterSpacing: 0, fontSize: 16/*SizeUtils.getByScreen(small: 28, xl: 16)*/), style: TextStyle(letterSpacing: 0, fontSize: SizeUtils.getByScreen(small: 18, big: 18, xl: 16)),
), ),
SizedBox(height: 56,/*SizeUtils.getByScreen(small: 56, big: 48),*/), SizedBox(height: SizeUtils.getByScreen(small: 56, big: 48)),
CustomTextField( CustomTextField(
label: "Correo electrónico", label: "Correo electrónico",
hint: "Correo electrónico", hint: "Correo electrónico",
controller: viewModel.emailController, controller: viewModel.emailController,
), ),
SizedBox(height: 40/*SizeUtils.getByScreen(small: 40, xl: 28)*/), SizedBox(height: SizeUtils.getByScreen(small: 40, big: 40, xl: 28)),
Align( Align(
alignment: Alignment.bottomLeft, alignment: Alignment.bottomLeft,
child: Text( child: Text(
@@ -51,7 +52,7 @@ class RequestRecoveryScreen extends ConsumerWidget {
style: TextStyle(fontSize: 14, letterSpacing: 0), style: TextStyle(fontSize: 14, letterSpacing: 0),
), ),
), ),
SizedBox(height: 8/*SizeUtils.getByScreen(small: 8, xl: 4)*/), SizedBox(height: 8),
Row( Row(
children: [ children: [
CountryPrefixPicker( CountryPrefixPicker(
@@ -64,7 +65,7 @@ class RequestRecoveryScreen extends ConsumerWidget {
}, },
width: 80, width: 80,
), ),
SizedBox(width: 10/*SizeUtils.getByScreen(small: 10, xl: 6)*/), SizedBox(width: SizeUtils.getByScreen(small: 10, big: 10, xl: 6)),
Expanded( Expanded(
child: CustomTextField( child: CustomTextField(
hint: "Teléfono", hint: "Teléfono",
@@ -74,9 +75,9 @@ class RequestRecoveryScreen extends ConsumerWidget {
), ),
], ],
), ),
SizedBox(height: 40/*SizeUtils.getByScreen(small: 40, xl: 28)*/), SizedBox(height: SizeUtils.getByScreen(small: 40, big: 40, xl: 28)),
if (viewState.errorMessage.isNotEmpty) if (viewState.errorMessage.isNotEmpty) ...[
...[Text( Text(
viewState.errorMessage, viewState.errorMessage,
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: const TextStyle( style: const TextStyle(
@@ -84,7 +85,7 @@ class RequestRecoveryScreen extends ConsumerWidget {
fontSize: 12, fontSize: 12,
), ),
), ),
SizedBox(height: 40/*SizeUtils.getByScreen(small: 40, xl: 28)*/), SizedBox(height: 40),
], ],
Row( Row(
children: [ children: [
@@ -92,10 +93,10 @@ class RequestRecoveryScreen extends ConsumerWidget {
child: SecondaryButton( child: SecondaryButton(
onPressed: () => {Navigator.pop(context)}, onPressed: () => {Navigator.pop(context)},
text: "Volver", text: "Volver",
size: 16/*SizeUtils.getByScreen(small: 16, xl: 14)*/, size: SizeUtils.getByScreen(small: 16, big: 16, xl: 14),
), ),
), ),
SizedBox(width: 20/*SizeUtils.getByScreen(small: 20, xl: 10)*/), SizedBox(width: SizeUtils.getByScreen(small: 20, big: 20, xl: 10)),
Expanded( Expanded(
child: PrimaryButton( child: PrimaryButton(
onPressed: () async { onPressed: () async {
@@ -111,7 +112,7 @@ class RequestRecoveryScreen extends ConsumerWidget {
} }
}, },
text: "Enviar", text: "Enviar",
size: 16/*SizeUtils.getByScreen(small: 16, xl: 14)*/, size: SizeUtils.getByScreen(small: 16, big: 16, xl: 14),
color: theme.getColorFor(ThemeCode.buttonSecondary), color: theme.getColorFor(ThemeCode.buttonSecondary),
), ),
), ),

View File

@@ -3,6 +3,7 @@ import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:navigation/navigation.dart'; import 'package:navigation/navigation.dart';
import 'package:utils/utils.dart';
import '../state/recover_password_view_model.dart'; import '../state/recover_password_view_model.dart';
@@ -31,11 +32,11 @@ class SentScreen extends ConsumerWidget {
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
fontWeight: FontWeight.w500, fontWeight: FontWeight.w500,
fontSize: 30/*SizeUtils.getByScreen(small: 30, xl: 26)*/, fontSize: SizeUtils.getByScreen(small: 30, big: 30, xl: 26),
letterSpacing: 0, letterSpacing: 0,
), ),
), ),
SizedBox(height: 48/*SizeUtils.getByScreen(small: 48, xl: 40)*/), SizedBox(height: SizeUtils.getByScreen(small: 48, big: 48, xl: 40)),
Row( Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
@@ -43,22 +44,22 @@ class SentScreen extends ConsumerWidget {
Icons.check, Icons.check,
color: theme.getColorFor(ThemeCode.buttonPrimary), color: theme.getColorFor(ThemeCode.buttonPrimary),
), ),
SizedBox(width: 6/*SizeUtils.getByScreen(small: 10, xl: 6)*/), SizedBox(width: SizeUtils.getByScreen(small: 10, big: 10, xl: 6)),
Text( Text(
viewState.recoveryFormat == "email" viewState.recoveryFormat == "email"
? "Correo enviado correctamente" ? "Correo enviado correctamente"
: "SMS enviado correctamente", : "SMS enviado correctamente",
style: TextStyle(fontSize: 18/*SizeUtils.getByScreen(small: 18, xl: 15)*/, fontWeight: FontWeight.bold), style: TextStyle(fontSize: SizeUtils.getByScreen(small: 18, big: 18, xl: 15), fontWeight: FontWeight.bold),
), ),
], ],
), ),
SizedBox(height: 48/*SizeUtils.getByScreen(small: 48, xl: 40)*/), SizedBox(height: SizeUtils.getByScreen(small: 48, big: 48, xl: 40)),
Text( Text(
viewState.recoveryFormat == "email" viewState.recoveryFormat == "email"
? "Revisa tu email y haz clic en el enlace para crear una nueva contraseña." ? "Revisa tu email y haz clic en el enlace para crear una nueva contraseña."
: "Revisa tu móvil y sigue las instrucciones para crear una nueva contraseña.", : "Revisa tu móvil y sigue las instrucciones para crear una nueva contraseña.",
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle(fontSize: 18/*SizeUtils.getByScreen(small: 18, xl: 15)*/, letterSpacing: 0), style: TextStyle(fontSize: SizeUtils.getByScreen(small: 18, big: 18, xl: 15), letterSpacing: 0),
), ),
SizedBox(height: 16), SizedBox(height: 16),
Text( Text(
@@ -66,9 +67,9 @@ class SentScreen extends ConsumerWidget {
? "Si no recibes el correo en unos minutos, revisa tu carpeta de spam o pulsa \"Reenviar correo\"." ? "Si no recibes el correo en unos minutos, revisa tu carpeta de spam o pulsa \"Reenviar correo\"."
: "Si no recibes el SMS en unos minutos, asegúrate de tener cobertura o pulsa \"Reenviar SMS \".", : "Si no recibes el SMS en unos minutos, asegúrate de tener cobertura o pulsa \"Reenviar SMS \".",
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle(fontSize: 14/*SizeUtils.getByScreen(small: 14, xl: 12)*/, letterSpacing: 0), style: TextStyle(fontSize: SizeUtils.getByScreen(small: 14, big: 14, xl: 12), letterSpacing: 0),
), ),
SizedBox(height: 48/*SizeUtils.getByScreen(small: 48, xl: 40)*/), SizedBox(height: SizeUtils.getByScreen(small: 48, big: 48, xl: 40)),
Row( Row(
children: [ children: [
Expanded( Expanded(
@@ -83,7 +84,7 @@ class SentScreen extends ConsumerWidget {
text: viewState.recoveryFormat == "email" text: viewState.recoveryFormat == "email"
? "Reenviar correo" ? "Reenviar correo"
: "Reenviar SMS", : "Reenviar SMS",
size: 16/*SizeUtils.getByScreen(small: 16, xl: 14)*/, size: SizeUtils.getByScreen(small: 16, big: 16, xl: 14),
), ),
), ),
SizedBox(width: 10), SizedBox(width: 10),
@@ -95,7 +96,7 @@ class SentScreen extends ConsumerWidget {
), ),
text: "Continuar", text: "Continuar",
color: theme.getColorFor(ThemeCode.buttonSecondary), color: theme.getColorFor(ThemeCode.buttonSecondary),
size: 16/*SizeUtils.getByScreen(small: 16, xl: 14)*/, size: SizeUtils.getByScreen(small: 16, big: 16, xl: 14),
), ),
), ),
], ],

View File

@@ -21,9 +21,11 @@ dependencies:
navigation: navigation:
path: ../../packages/navigation path: ../../packages/navigation
sf_localizations: sf_localizations:
path: ../../packages/sf_localizations path: ../../packages/sf_localizations
sf_infrastructure: sf_infrastructure:
path: ../../packages/sf_infrastructure path: ../../packages/sf_infrastructure
utils:
path: ../../packages/utils
#dependencies go here #dependencies go here
flutter_svg: ^2.2.1 flutter_svg: ^2.2.1
get_it: ^9.0.5 get_it: ^9.0.5

View File

@@ -69,7 +69,9 @@ class SizeUtils {
static bool get isMediumScreen => physicalAspectRatioHeight <= 18.0; static bool get isMediumScreen => physicalAspectRatioHeight <= 18.0;
static bool get isXLScreen => physicalAspectRatioHeight >= 20.0; static bool get isBigScreen => physicalAspectRatioHeight <= 20.0;
static bool get isXLScreen => physicalAspectRatioHeight >= 21.5;
static Size get screenSize => Size(width, height); static Size get screenSize => Size(width, height);
@@ -81,7 +83,8 @@ class SizeUtils {
}) { }) {
if (isSmallerScreen) return small; if (isSmallerScreen) return small;
if (isMediumScreen) return medium ?? small; if (isMediumScreen) return medium ?? small;
if (isXLScreen && xl != null) return xl; if (isBigScreen) return big;
if (isXLScreen) return xl ?? big;
return big; return big;
} }