SaveFamily/sf-app-platform
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- created custom text block, dropdown,

Browse Source 
- created extract, goals and block card screen.
- generated tests for design system components.
- updated restore password and home screens to 17/11 design.
This commit is contained in:
Aitor Arana
2025-12-03 15:28:10 +01:00
parent 8201bff0a7
commit 62ffc9ef7c
53 changed files with 3070 additions and 882 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/mobile_app/lib/navigation/app_router.dart
View File

@@ -24,6 +24,11 @@ void configureAppRouter() {
name: 'login', name: 'login',
pageBuilder: LoginBuilder().buildPage, pageBuilder: LoginBuilder().buildPage,
), ),
GoRoute(
path: '/signup',
name: 'signup',
pageBuilder: SignupBuilder().buildPage,
),
GoRoute( GoRoute(
path: '/onboarding', path: '/onboarding',
name: 'onboarding', name: 'onboarding',

28
apps/mobile_app/test/widget_test.dart
View File

@@ -1,28 +0,0 @@
// This is a basic Flutter widget test.
//
// To perform an interaction with a widget in your test, use the WidgetTester
// utility in the flutter_test package. For example, you can send tap and scroll
// gestures. You can also use WidgetTester to find child widgets in the widget
// tree, read text, and verify that the values of widget properties are correct.
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('Counter increments smoke test', (WidgetTester tester) async {
// Build our app and trigger a frame.
//await tester.pumpWidget(const PaymentsApp(di: di));
// Verify that our counter starts at 0.
expect(find.text('0'), findsOneWidget);
expect(find.text('1'), findsNothing);
// Tap the '+' icon and trigger a frame.
await tester.tap(find.byIcon(Icons.add));
await tester.pump();
// Verify that our counter has incremented.
expect(find.text('0'), findsNothing);
expect(find.text('1'), findsOneWidget);
});
}

3
modules/auth/lib/auth.dart
View File

@@ -4,4 +4,5 @@ export 'src/login/link_phone_builder.dart';
export 'src/login/phone_code_builder.dart'; export 'src/login/phone_code_builder.dart';
export 'src/login/login_builder.dart'; export 'src/login/login_builder.dart';
export 'src/recover_password/recover_password_builder.dart'; export 'src/recover_password/recover_password_builder.dart';
export 'src/device_sign_up/device_signup_builder.dart'; export 'src/device_sign_up/device_signup_builder.dart';
export 'src/sign_up/signup_builder.dart';

63
modules/auth/lib/src/device_sign_up/add_kid_screen.dart
View File

@@ -1,13 +1,18 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
class AddKidScreen extends StatelessWidget { class AddKidScreen extends ConsumerWidget {
final nextStep; final nextStep;
const AddKidScreen({super.key, required this.nextStep}); const AddKidScreen({super.key, required this.nextStep});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context, WidgetRef ref) {
final theme = ref.watch(themePortProvider);
return Scaffold( return Scaffold(
backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
body: Container( body: Container(
margin: EdgeInsets.all(30), margin: EdgeInsets.all(30),
child: Column( child: Column(
@@ -17,13 +22,39 @@ class AddKidScreen extends StatelessWidget {
Text("Añade a tu peque", style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)), Text("Añade a tu peque", style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
Text( Text(
"Controla su gasto a la vez que aprende hábitos financieros responsables", "Controla su gasto a la vez que aprende hábitos financieros responsables",
textAlign: TextAlign.center,
), ),
Container( Container(
margin: EdgeInsets.symmetric(vertical: 30, horizontal: 50), margin: EdgeInsets.symmetric(vertical: 30, horizontal: 50),
child: Row( child: Row(
spacing: 10,
children: [ children: [
Column(children: [Text("1"), Text("2"), Text("3")]), Stack(
children: [
Column(
spacing: 16,
children: List<Widget>.generate(3, (int index) =>
Container(
decoration: ShapeDecoration(
shape: CircleBorder(),
color: theme.getColorFor(ThemeCode.buttonPrimary)
),
width: 32,
height: 32,
child: Center(child: Text(
(index + 1).toString(),
style: TextStyle(
color: theme.getColorFor(ThemeCode.backgroundPrimary)
)
))
)
)
),
Divider(color: Colors.red, thickness: 4,),
],
),
Column( Column(
spacing: 16,
children: [ children: [
Text("Crea su perfil"), Text("Crea su perfil"),
Text("Vincula su correa y su reloj"), Text("Vincula su correa y su reloj"),
@@ -33,18 +64,28 @@ class AddKidScreen extends StatelessWidget {
], ],
), ),
), ),
Text("¡Y todo listo para que tenga su dinero!", style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)), Text(
Text("Recuerda que necesitas tener un Plan SaveFamily"), "¡Y todo listo para que tenga su dinero!",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
letterSpacing: 0
)
),
Text(
"Recuerda que necesitas tener un Plan SaveFamily",
textAlign: TextAlign.center
),
Text( Text(
"Si aún no lo tienes, puedes conseguirlo a través de nuestra web", "Si aún no lo tienes, puedes conseguirlo a través de nuestra web",
textAlign: TextAlign.center,
), ),
Spacer(flex: 8), Spacer(flex: 8),
Container( PrimaryButton(
width: double.infinity, onPressed: nextStep,
child: FilledButton( text: "¡Empezar!",
onPressed: nextStep, color: theme.getColorFor(ThemeCode.buttonPrimary)
child: Text("¡Empezar!"),
),
), ),
], ],
), ),

8
modules/auth/lib/src/device_sign_up/contact_screen.dart
View File

@@ -1,12 +1,16 @@
import 'package:design_system/design_system.dart'; import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
class ContactScreen extends StatelessWidget { class ContactScreen extends ConsumerWidget {
const ContactScreen({super.key}); const ContactScreen({super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context, WidgetRef ref) {
final theme = ref.watch(themePortProvider);
return Scaffold( return Scaffold(
backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
body: Container( body: Container(
margin: EdgeInsets.all(30), margin: EdgeInsets.all(30),
child: Center( child: Center(

8
modules/auth/lib/src/device_sign_up/device_signup_screen.dart
View File

@@ -38,15 +38,13 @@ class DeviceSignupScreenState extends ConsumerState<DeviceSignupScreen>{
final theme = ref.watch(themePortProvider); final theme = ref.watch(themePortProvider);
final continueBtn = Container( final continueBtn = Container(
padding: EdgeInsets.all(24),
color: theme.getColorFor(ThemeCode.backgroundPrimary), color: theme.getColorFor(ThemeCode.backgroundPrimary),
child: FilledButton( child: PrimaryButton(
onPressed: ()=>{setState(() { onPressed: ()=>{setState(() {
currentStep++; currentStep++;
})}, })},
child: Container( text: "Continuar",
width: double.infinity, color: theme.getColorFor(ThemeCode.buttonPrimary)
child: Expanded(child: Center(child: Text("Continuar"))))
) )
); );

70
modules/auth/lib/src/device_sign_up/link_watch/create_profile_screen.dart
View File

@@ -16,7 +16,8 @@ class CreateProfileScreen extends ConsumerWidget {
children: [ children: [
Text( Text(
"Comienza con un peque; luego podrás agregar más", "Comienza con un peque; luego podrás agregar más",
style: TextStyle(fontWeight: FontWeight.bold), textAlign: TextAlign.center,
style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, letterSpacing: 0),
), ),
CustomTextField( CustomTextField(
label: "Nombre", label: "Nombre",
@@ -26,30 +27,41 @@ class CreateProfileScreen extends ConsumerWidget {
label: "Apellidos", label: "Apellidos",
hint: "Apellidos", hint: "Apellidos",
), ),
Row( Column(
spacing: 10, spacing: 8,
children: [ children: [
Expanded( Align(
child: CustomTextField( alignment: Alignment.bottomLeft,
numeric: true, child: Text(
label: "Fecha de nacimiento", "Fecha de nacimiento",
hint: "DD", style: TextStyle(fontSize: 14, letterSpacing: 0),
length: 2,
), ),
), ),
Expanded( Row(
child: CustomTextField( spacing: 10,
numeric: true, children: [
hint: "MM", Expanded(
length: 2, child: CustomTextField(
), numeric: true,
), hint: "DD",
Expanded( length: 2,
child: CustomTextField( ),
numeric: true, ),
hint: "AAAA", Expanded(
length: 4, child: CustomTextField(
), numeric: true,
hint: "MM",
length: 2,
),
),
Expanded(
child: CustomTextField(
numeric: true,
hint: "AAAA",
length: 4,
),
),
],
), ),
], ],
), ),
@@ -57,13 +69,15 @@ class CreateProfileScreen extends ConsumerWidget {
label: "Dirección completa", label: "Dirección completa",
hint: "Nombre de la calle", hint: "Nombre de la calle",
), ),
TextButton( Align(
onPressed: () => {}, alignment: Alignment.topLeft,
child: Text( child: CustomTextButton(
"Cambiar dirección", onPressed: () => {},
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18, color: theme.getColorFor(ThemeCode.textPrimary)), text: "Cambiar dirección",
size: 18,
weight: FontWeight.w500,
), ),
), )
], ],
); );
} }

4
modules/auth/lib/src/device_sign_up/link_watch/link_watch_previous_screen.dart
View File

@@ -37,8 +37,8 @@ class LinkWatchPreviousScreen extends ConsumerWidget{
children: [ children: [
Container( Container(
decoration: ShapeDecoration( decoration: ShapeDecoration(
shape: CircleBorder(side: BorderSide(color: theme.getColorFor(ThemeCode.backgroundSecondary))), shape: CircleBorder(side: BorderSide(color: theme.getColorFor(ThemeCode.backgroundSecondary))),
color: theme.getColorFor(ThemeCode.backgroundSecondary) color: theme.getColorFor(ThemeCode.backgroundSecondary)
), ),
width: 48, width: 48,
height: 48, height: 48,

104
modules/auth/lib/src/device_sign_up/link_watch/link_watch_screen.dart
View File

@@ -21,13 +21,69 @@ class LinkWatchScreenState extends ConsumerState<LinkWatchScreen>{
return Column( return Column(
spacing: 32, spacing: 32,
children: [ children: [
Row( Stack(
children: [ children: [
Text("Escanea la correa"), Divider(
Spacer(), color: theme.getColorFor(ThemeCode.buttonPrimary),
Text("Escanea el reloj") thickness: 4,
indent: 93,
endIndent: 93,
height: 48,
),
if (widget.step==1)Divider(
color: theme.getColorFor(ThemeCode.backgroundSecondary),
thickness: 4,
indent: 186,
endIndent: 93,
height: 48,
),
Container(
padding: EdgeInsets.symmetric(horizontal: 69),
child: Row(
children: [
Container(
decoration: ShapeDecoration(
shape: CircleBorder(),
color: theme.getColorFor(ThemeCode.buttonPrimary)
),
width: 48,
height: 48,
child: Center(child: Text(
"1",
style: TextStyle(
color: theme.getColorFor(ThemeCode.backgroundPrimary),
fontSize: 24
)
))
),
Spacer(),
Container(
decoration: ShapeDecoration(
shape: CircleBorder(),
color: theme.getColorFor(widget.step==1 ? ThemeCode.backgroundSecondary : ThemeCode.buttonPrimary)
),
width: 48,
height: 48,
child: Center(child: Text(
"2",
style: TextStyle(
color: theme.getColorFor(widget.step==1 ? ThemeCode.textPrimary : ThemeCode.backgroundSecondary),
fontSize: 24
)
))
),
],
),
)
], ],
), ),
Row(children: [
Spacer(),
Text("Escanea la correa"),
Spacer(),
Text("Escanea el reloj"),
Spacer(),
]),
Container( Container(
padding: EdgeInsets.all(40), padding: EdgeInsets.all(40),
decoration: BoxDecoration( decoration: BoxDecoration(
@@ -36,24 +92,36 @@ class LinkWatchScreenState extends ConsumerState<LinkWatchScreen>{
), ),
child: SvgPicture.asset("assets/images/ui/qr.svg") child: SvgPicture.asset("assets/images/ui/qr.svg")
), ),
if (widget.step == 2)Text("O inserta el código del reloj"), if (widget.step == 2)Column(
if (widget.step == 2)Row(
spacing: 16, spacing: 16,
children: [ children: [
Expanded(child: CustomTextField( Align(
hint: "XXXXXXXXXX", alignment: Alignment.bottomLeft,
)), child: Text("O inserta el código del reloj"),
Expanded(child: FilledButton( ),
style: ButtonStyle(backgroundColor: WidgetStatePropertyAll<Color>(theme.getColorFor(ThemeCode.buttonSecondary))), Row(
onPressed: ()=>{}, spacing: 16,
child: Expanded(child: Center(child: Text( children: [
"Continuar con código", Expanded(child: CustomTextField(
style: TextStyle(fontSize: 16, letterSpacing: 0)))) hint: "XXXXXXXXXX",
)) )),
Expanded(child: PrimaryButton(
onPressed: ()=>{},
text: "Continuar con código",
size: 16,
color: theme.getColorFor(ThemeCode.buttonSecondary)
))
],
),
], ],
), ),
Text("Si no consigues vincular su correa o reloj"), Column(
TextButton(onPressed: ()=>{}, child: Text("Contáctanos")) spacing: 8,
children: [
Text("Si no consigues vincular su correa o reloj"),
CustomTextButton(onPressed: ()=>{}, text: "Contáctanos", weight: FontWeight.w500, size: 18)
],
)
], ],
); );
} }

105
modules/auth/lib/src/login/presentation/link_phone_screen.dart
View File

@@ -10,62 +10,69 @@ class LinkPhoneScreen extends ConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final theme = ref.watch(themePortProvider);
// TextEditingController phoneController = TextEditingController(); // TextEditingController phoneController = TextEditingController();
// String? phone; // String? phone;
return Scaffold(body: SafeArea( return Scaffold(
child: Container( backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
margin: EdgeInsets.symmetric(horizontal: 24), body: SafeArea(
child: Expanded( child: Container(
child: Center( margin: EdgeInsets.symmetric(horizontal: 24),
child: Column( child: Expanded(
spacing: 48, child: Center(
children: [ child: Column(
Spacer(flex: 8), spacing: 48,
Text( children: [
"¡Nos alegra mucho tenerte por aquí!", Spacer(flex: 8),
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold), Text(
), "¡Nos alegra mucho tenerte por aquí!",
Text( textAlign: TextAlign.center,
"Para poder entrar de forma segura, te vamos a enviar un código al teléfono", style: TextStyle(fontSize: 30, fontWeight: FontWeight.w500, letterSpacing: 0),
),
Row(
spacing: 10,
children: [
DropdownMenu(
initialSelection: "es",
dropdownMenuEntries: List<DropdownMenuEntry>.generate(3, (
int index,
) {
return DropdownMenuEntry(
labelWidget: Icon(Icons.outlined_flag),
label: "es",
value: "es",
);
}),
),
Expanded(
child: CustomTextField(
label: "Teléfono móvil",
hint: "Teléfono",
numeric: true
)
),
],
),
SizedBox(
width: double.infinity,
child: FilledButton(
onPressed: () => navigationContract.pushTo('/phone_code'),
child: Text("Siguiente"),
), ),
), Text(
Spacer(flex: 10) "Para poder entrar de forma segura, te vamos a enviar un código al teléfono",
], textAlign: TextAlign.center,
style: TextStyle(fontSize: 16, letterSpacing: 0),
),
Column(
spacing: 8,
children: [
Align(alignment: Alignment.bottomLeft, child: Text(
"Teléfono móvil",
style: TextStyle(fontSize: 14, letterSpacing: 0),
)),
Row(
spacing: 10,
children: [
CustomDropdown(
value: 0,
items: [Icon(Icons.outlined_flag), Icon(Icons.outlined_flag), Icon(Icons.outlined_flag)],
onChanged: (value)=> {},
width: 80,
),
Expanded(
child: CustomTextField(
hint: "Teléfono",
numeric: true
)
),
],
),
],
),
PrimaryButton(
onPressed: () => navigationContract.pushTo('/phone_code'),
text: "Siguiente",
color: theme.getColorFor(ThemeCode.buttonPrimary),
),
Spacer(flex: 10)
],
),
), ),
), ),
), ),
),
)); ));
} }
} }

158
modules/auth/lib/src/login/presentation/login_screen.dart
View File

@@ -12,70 +12,140 @@ class LoginScreen extends ConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final theme = ref.watch(themePortProvider);
bool passwordVisible = true; bool passwordVisible = true;
return Scaffold(
body: Expanded( final content = [
child: Center( Column(
child: Container( spacing: 8,
margin: EdgeInsets.all(30), children: [
Icon(Icons.check, color: theme.getColorFor(ThemeCode.buttonPrimary), size: 50),
Text(
"¡Te damos la bienvenida!",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
),
],
),
Column(
spacing: 32,
children: [
Column(
spacing: 24,
children: [
CustomTextField(
hint: "Nombre de usuario",
label: "Nombre de usuario",
),
Column(
spacing: 12,
children: [
CustomTextField(
showPassword: passwordVisible,
label: "Contraseña",
hint: "********"
),
Align(
alignment: Alignment.topLeft,
child: CustomTextButton(
text: "¿Has olvidado la contraseña?",
onPressed: () =>
navigationContract.pushTo('/recover_password'),
size: 16,
)),
],
)
],
),
PrimaryButton(
onPressed: () => navigationContract.goTo('/main/home'),
text: "Iniciar sesión",
color: theme.getColorFor(ThemeCode.buttonPrimary)
),
Container(
padding: EdgeInsets.only(top: 24),
child: Column( child: Column(
spacing: 10, spacing: 24,
children: [ children: [
Icon(Icons.check, color: Color(0xFF329e95), size: 50), Stack(children: [
Text( Divider(endIndent: 74, indent: 74),
"¡Te damos la bienvenida!", Align(
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold), alignment: Alignment.center,
), child: Container(
CustomTextField( padding: EdgeInsets.symmetric(horizontal: 14),
hint: "Nombre de usuario", color: theme.getColorFor(ThemeCode.backgroundPrimary),
label: "Nombre de usuario", child: Text("o continúa con"),
), )
CustomTextField( )
showPassword: passwordVisible, ]),
label: "Contraseña",
hint: "********"
),
TextButton(
onPressed: () =>
navigationContract.pushTo('/recover_password'),
child: Text("¿Has olvidado la contraseña?"),
),
FilledButton(
onPressed: () => navigationContract.pushTo('/main/home'),
child: Text("Iniciar sesión"),
),
Stack(children: [Divider(), Text("o continúa con")]),
Row( Row(
spacing: 20, spacing: 20,
children: [ children: [
OutlinedButton( Spacer(),
SecondaryButton(
onPressed: () => Navigator.push( onPressed: () => Navigator.push(
context, context,
MaterialPageRoute( MaterialPageRoute(
builder: (_) => LoadingGoogleScreen(), builder: (_) => LoadingGoogleScreen(),
), ),
), ),
child: Text("Google", semanticsLabel: "Google"), radius: 16,
padding: 44,
text: "Google",
label: "Google",
), ),
OutlinedButton( SecondaryButton(
onPressed: () => {}, onPressed: ()=>{},
child: Icon(Icons.apple, semanticLabel: "Apple"), radius: 16,
padding: 44,
icon: Icons.apple,
label: "Apple",
), ),
Spacer(),
], ],
), ),
Text("¿No tienes cuenta?"),
TextButton(
onPressed: () => Navigator.push(
context,
MaterialPageRoute(builder: (_) => SignupScreen()),
),
child: Text("Crear una ahora"),
),
], ],
), ),
), ),
), Column(
spacing: 8,
children: [
Text(
"¿No tienes cuenta?",
style: TextStyle(fontSize: 18, letterSpacing: 0)
),
TextButton(
onPressed: () => navigationContract.goTo('/signup'),
child: Text(
"Crear una ahora",
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500, letterSpacing: 0)
)
),
],
)
],
), ),
];
return Scaffold(
backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
body: Expanded(
child: Center(
child: Container(
margin: EdgeInsets.all(30),
child: ListView.separated(
itemBuilder: (BuildContext context, int index) {
return content[index];
},
separatorBuilder: (BuildContext context, int index) {
return Divider(color: Colors.transparent, height: 48);
},
itemCount: content.length,
),
),
)
)
); );
} }
} }

117
modules/auth/lib/src/login/presentation/phone_code_screen.dart
View File

@@ -1,4 +1,6 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.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';
@@ -15,64 +17,87 @@ class PhoneCodeScreen extends ConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final theme = ref.watch(themePortProvider);
return Scaffold( return Scaffold(
backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
body: Container( body: Container(
margin: EdgeInsets.all(30), margin: EdgeInsets.all(30),
child: Expanded( child: Expanded(
child: Center( child: Center(
child: Column( child: Column(
spacing: 15, spacing: 48,
children: [ children: [
Spacer(flex: 8), Spacer(flex: 8),
Text( Column(
"Conéctate", spacing: 24,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30), children: [
), Text(
Text.rich( "Conéctate",
TextSpan( style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
text: "Hemos enviado el código al ", ),
children: [ Text.rich(
TextSpan( TextSpan(
// text: widget.phone, text: "Hemos enviado el código al ",
style: TextStyle(fontWeight: FontWeight.bold), children: [
TextSpan(
// text: widget.phone,
style: TextStyle(fontWeight: FontWeight.bold),
),
],
), ),
], ),
), Text("Introduce el código aquí"),
Row(
spacing: 8,
children: List<Widget>.generate(6, (int i) {
return Expanded(
child: TextField(
focusNode: focusNodes[i],
keyboardType: TextInputType.number,
inputFormatters: [FilteringTextInputFormatter.digitsOnly],
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: "0",
counterText: "",
border: OutlineInputBorder(),
),
maxLength: 1,
onChanged: (String value) => {
value != ""
? focusNodes[i + 1].requestFocus()
: focusNodes[i - 1].requestFocus(),
},
),
);
}),
),
],
), ),
Text("Introduce el código aquí"), Column(
Row( spacing: 24,
spacing: 20, children: [
children: List<Widget>.generate(6, (int i) { PrimaryButton(
return Expanded( onPressed: () => {navigationContract.pushTo('/login')},
child: TextField( text: "Entrar",
focusNode: focusNodes[i], color: theme.getColorFor(ThemeCode.buttonPrimary),
keyboardType: TextInputType.number, ),
decoration: InputDecoration( Column(
hintText: "0", spacing: 8,
counterText: "", children: [
border: OutlineInputBorder(), Text(
"¿No lo has recibido?",
style: TextStyle(fontSize: 18, letterSpacing: 0, height: 1.5),
), ),
maxLength: 1, CustomTextButton(
onChanged: (String value) => { onPressed: () => {},
value != "" text: "Volver a intentarlo",
? focusNodes[i + 1].requestFocus() size: 18,
: focusNodes[i - 1].requestFocus(), weight: FontWeight.w500,
}, ),
), ],
); )
}), ],
),
FilledButton(
onPressed: () => {navigationContract.pushTo('/login')},
child: Text("Entrar"),
),
Text("¿No lo has recibido?"),
TextButton(
onPressed: () => {},
child: Text(
"Volver a intentarlo",
style: TextStyle(fontWeight: FontWeight.bold),
),
), ),
Spacer(flex: 10), Spacer(flex: 10),
], ],

83
modules/auth/lib/src/onboarding/presentation/welcome_screen.dart
View File

@@ -31,8 +31,9 @@ class WelcomeScreenState extends ConsumerState{
final theme = ref.watch(themePortProvider); final theme = ref.watch(themePortProvider);
return Scaffold( return Scaffold(
backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
body: Container( body: Container(
padding: EdgeInsets.symmetric(horizontal: 24), padding: EdgeInsets.only(top: 24),
child: Center( child: Center(
child: Column( child: Column(
spacing: 48, spacing: 48,
@@ -42,7 +43,11 @@ class WelcomeScreenState extends ConsumerState{
Column( Column(
spacing: 24, spacing: 24,
children: [ children: [
StepIndicator(max: 3, current: currentStep+1, color: theme.getColorFor(ThemeCode.buttonSecondary)), StepIndicator(
max: 3,
current: currentStep+1,
color: theme.getColorFor(ThemeCode.buttonSecondary)
),
generateButtons(theme, 3, currentStep+1) generateButtons(theme, 3, currentStep+1)
] ]
), ),
@@ -56,29 +61,29 @@ class WelcomeScreenState extends ConsumerState{
Widget generateButtons(ThemePort theme, int max, int step){ Widget generateButtons(ThemePort theme, int max, int step){
if (step==max) { if (step==max) {
return FilledButton( return PrimaryButton(
style: ButtonStyle(
backgroundColor: WidgetStatePropertyAll<Color>(theme.getColorFor(ThemeCode.buttonPrimary))
),
onPressed: () => navigationContract.goTo('/link_phone'), onPressed: () => navigationContract.goTo('/link_phone'),
child: Expanded(child: Center(child: Text('Continuar'))) text: "Continuar",
); color: theme.getColorFor(ThemeCode.buttonPrimary),
width: 324,
);
} else { } else {
return Column( return Column(
spacing: 16, spacing: 16,
children: [ children: [
FilledButton( PrimaryButton(
style: ButtonStyle(
backgroundColor: WidgetStatePropertyAll<Color>(theme.getColorFor(ThemeCode.buttonSecondary))
),
onPressed: ()=>setState(() { onPressed: ()=>setState(() {
currentStep++; currentStep++;
}), }),
child: Expanded(child: Center( child: Text("Siguiente"))) text: "Siguiente",
color: theme.getColorFor(ThemeCode.buttonSecondary),
width: 324,
), ),
TextButton( CustomTextButton(
onPressed: ()=>navigationContract.goTo('/link_phone'), onPressed: ()=>navigationContract.goTo('/link_phone'),
child: Text("Omitir") text: "Omitir",
size: 18,
weight: FontWeight.w500,
) )
], ],
); );
@@ -97,37 +102,57 @@ class WelcomeScreenState extends ConsumerState{
Text( Text(
"Aprende a gestionar su dinero", "Aprende a gestionar su dinero",
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 30) style: TextStyle(fontSize: 30, fontWeight: FontWeight.w500, letterSpacing: 0)
), ),
Text( Text(
"Tu peque crea hábitos y se divierte mientras lo hace", "Tu peque crea hábitos y se divierte mientras lo hace",
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle(fontSize: 18) style: TextStyle(fontSize: 18, letterSpacing: 0)
) )
] ]
) )
] ]
), ),
Column( Column(
spacing: 48,
children: [ children: [
SvgPicture.asset("assets/images/ui/bienvenida_paso2.svg"), SvgPicture.asset("assets/images/ui/bienvenida_paso2.svg"),
Text("Tranquilidad en cada pago que hacen", Column(
textAlign: TextAlign.center, spacing: 16,
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 30)), children: [
Text("Supervisa gastos, fija límites y acompáñalos en cada paso", Text(
textAlign: TextAlign.center, "Tranquilidad en cada pago que hace",
style: TextStyle(fontSize: 18)), textAlign: TextAlign.center,
style: TextStyle(fontSize: 30, fontWeight: FontWeight.w500, letterSpacing: 0)
),
Text(
"Supervisa sus gastos, fija límites y acompáñale en cada paso",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18, letterSpacing: 0)
),
],
)
], ],
), ),
Column( Column(
spacing: 48,
children: [ children: [
SvgPicture.asset("assets/images/ui/bienvenida_paso3.svg"), SvgPicture.asset("assets/images/ui/bienvenida_paso3.svg"),
Text("Pagos fáciles y seguros en sus manos", Column(
textAlign: TextAlign.center, spacing: 16,
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 30)), children: [
Text("Podrá pagar desde su reloj.\n Sin móvil ni efectivo", Text(
textAlign: TextAlign.center, "Pagos fáciles y seguros, en sus manos",
style: TextStyle(fontSize: 18)), textAlign: TextAlign.center,
style: TextStyle(fontSize: 30, fontWeight: FontWeight.w500, letterSpacing: 0)
),
Text(
"Podrá pagar desde su reloj.\n Sin móvil ni efectivo",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18, letterSpacing: 0)
),
],
)
], ],
), ),
]; ];

84
modules/auth/lib/src/recover_password/presentation/email_sent_screen.dart
View File

@@ -1,84 +0,0 @@
import 'package:auth/src/recover_password/presentation/new_password_screen.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
class EmailSentScreen extends ConsumerWidget {
final String email;
const EmailSentScreen({super.key, required this.email});
@override
Widget build(BuildContext context, WidgetRef ref) {
final theme = ref.watch(themePortProvider);
return Scaffold(
body: Container(
margin: EdgeInsets.all(30),
child: Center(
child: Column(
spacing: 20,
children: [
Spacer(flex: 8),
Text(
"Recuperar contraseña",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
),
Spacer(flex: 1),
Row(
spacing: 10,
children: [
Icon(
Icons.check,
color: theme.getColorFor(ThemeCode.buttonPrimary),
),
Text(
"Correo enviado correctamente",
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
Spacer(flex: 1),
Text(
"Revisa tu email y haz clic en el enlace para crear una nueva contraseña",
),
Text(
"Si no recibes el correo en unos minutos, revisa tu carpeta de spam o pulsa \"Reenviar correo\"",
),
Row(
spacing: 10,
children: [
Expanded(
child: OutlinedButton(
onPressed: () => {},
child: Text("Reenviar correo"),
),
),
Expanded(
child: FilledButton(
onPressed: () => {
// Navigator.push(
// context,
// MaterialPageRoute(
// builder: (_) => NewPasswordScreen(),
// ),
// ),
},
style: ButtonStyle(
backgroundColor: WidgetStatePropertyAll<Color>(
theme.getColorFor(ThemeCode.buttonSecondary),
),
),
child: Text("Continuar"),
),
),
],
),
Spacer(flex: 10),
],
),
),
),
);
}
}

211
modules/auth/lib/src/recover_password/presentation/new_password_screen.dart
View File

@@ -42,104 +42,137 @@ class NewPasswordScreenState extends ConsumerState<NewPasswordScreen> {
final theme = ref.watch(themePortProvider); final theme = ref.watch(themePortProvider);
return Scaffold( return Scaffold(
backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
body: Container( body: Container(
margin: EdgeInsets.all(30), padding: EdgeInsets.all(24),
child: Center( child: Center(
child: Column( child: Column(
spacing: 10, spacing: 48,
children: [ children: [
Spacer(flex: 4), Spacer(),
Text( Column(
"Recuperar contraseña", spacing: 32,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
),
CustomTextField(
showPassword: passwordVisible,
label: "Nueva contraseña",
hint: "********",
onChanged: (value) => {
setState(() {
password = value;
securityChecks = checkSecurity(value);
}),
},
),
CustomTextField(
showPassword: passwordVisible,
label: "Repetir contraseña",
hint: "********",
onChanged: (value) => {
setState(() {
equalPasswords = password == value;
}),
},
),
Row(
children: [ children: [
securityChecks["min"]! Text(
? Icon( "Recuperar contraseña",
Icons.check, textAlign: TextAlign.center,
color: theme.getColorFor(ThemeCode.buttonPrimary), style: TextStyle(fontWeight: FontWeight.w500, fontSize: 30, letterSpacing: 0),
),
Column(
spacing: 16,
children: [
CustomTextField(
showPassword: passwordVisible,
label: "Nueva contraseña",
hint: "********",
onChanged: (value) => {
setState(() {
password = value;
securityChecks = checkSecurity(value);
}),
},
),
CustomTextField(
showPassword: passwordVisible,
label: "Repetir contraseña",
hint: "********",
onChanged: (value) => {
setState(() {
equalPasswords = password == value;
}),
},
),
Column(
spacing: 4,
children: [
Row(
spacing: 8,
children: [
Icon(
Icons.check,
color: theme.getColorFor(securityChecks["min"]!
? ThemeCode.buttonPrimary
: ThemeCode.buttonSecondary),
),
Text("Al menos 8 caracteres", style: TextStyle(fontSize: 14)),
],
),
Row(
spacing: 8,
children: [
Icon(
Icons.check,
color: theme.getColorFor(securityChecks["capital"]!
? ThemeCode.buttonPrimary
: ThemeCode.buttonSecondary),
),
Text("Una mayúscula", style: TextStyle(fontSize: 14)),
],
),
Row(
spacing: 8,
children: [
Icon(
Icons.check,
color: theme.getColorFor(securityChecks["number"]!
? ThemeCode.buttonPrimary
: ThemeCode.buttonSecondary),
),
Text("Un número", style: TextStyle(fontSize: 14)),
],
),
Row(
spacing: 8,
children: [
Icon(
Icons.check,
color: theme.getColorFor(securityChecks["special"]!
? ThemeCode.buttonPrimary
: ThemeCode.buttonSecondary),
),
Text("Un carácter especial", style: TextStyle(fontSize: 14)),
],
),
],
)
],
),
Column(
spacing: 8,
children: [
Align(
alignment: Alignment.bottomLeft,
child: Text(
"Teléfono móvil",
style: TextStyle(fontSize: 14, letterSpacing: 0),
) )
: Icon( ),
Icons.cancel_outlined, Row(
color: theme.getColorFor(ThemeCode.buttonSecondary), spacing: 8,
), children: [
Text("Al menos 8 caracteres"), CustomDropdown(
value: 0,
items: [Icon(Icons.outlined_flag), Icon(Icons.outlined_flag), Icon(Icons.outlined_flag)],
onChanged: (value)=> {},
width: 80,
),
Expanded(child: CustomTextField(
hint: "Teléfono",
numeric: true
))
]
),
],
)
], ],
), ),
Row( PrimaryButton(
children: [ onPressed: ()=>{navigationContract.goTo('/main/home')},
securityChecks["capital"]! text: "Aceptar",
? Icon( color: theme.getColorFor(ThemeCode.buttonPrimary)
Icons.check,
color: theme.getColorFor(ThemeCode.buttonPrimary),
)
: Icon(
Icons.cancel_outlined,
color: theme.getColorFor(ThemeCode.buttonSecondary),
),
Text("Una mayúscula"),
],
), ),
Row( Spacer(),
children: [
securityChecks["number"]!
? Icon(
Icons.check,
color: theme.getColorFor(ThemeCode.buttonPrimary),
)
: Icon(
Icons.cancel_outlined,
color: theme.getColorFor(ThemeCode.buttonSecondary),
),
Text("Un número"),
],
),
Row(
children: [
securityChecks["special"]!
? Icon(
Icons.check,
color: theme.getColorFor(ThemeCode.buttonPrimary),
)
: Icon(
Icons.cancel_outlined,
color: theme.getColorFor(ThemeCode.buttonSecondary),
),
Text("Un carácter especial"),
],
),
Spacer(flex: 1),
FilledButton(
onPressed: ()=>{navigationContract.pushTo('/main/home')},
child: Container(
width: double.infinity,
padding: EdgeInsets.all(20),
child: Text("Aceptar"),
),
),
Spacer(flex: 4),
], ],
), ),
), ),

107
modules/auth/lib/src/recover_password/presentation/restore_password_screen.dart
View File

@@ -1,4 +1,4 @@
import 'package:auth/src/recover_password/presentation/email_sent_screen.dart'; import 'package:auth/src/recover_password/presentation/sent_screen.dart';
import 'package:design_system/design_system.dart'; import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:navigation/navigation.dart'; import 'package:navigation/navigation.dart';
@@ -14,50 +14,85 @@ class RestorePasswordScreen extends ConsumerWidget {
final theme = ref.watch(themePortProvider); final theme = ref.watch(themePortProvider);
return Scaffold( return Scaffold(
backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
body: Container( body: Container(
margin: EdgeInsets.all(30), margin: EdgeInsets.all(30),
child: Center( child: Center(
child: Column( child: Column(
spacing: 30, spacing: 48,
children: [ children: [
Spacer(flex: 8), Spacer(flex: 8),
Text( Column(
"Recuperar contaseña", spacing: 32,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
),
Text(
"Introduce tu email para enviarte un enlace de recuperación",
),
CustomTextField(
label: "Correo electrónico",
hint: "Correo electrónico",
),
Row(
spacing: 20,
children: [ children: [
Expanded( Text(
child: OutlinedButton( "Recuperar contaseña",
onPressed: () => {Navigator.pop(context)}, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30),
child: Text("Volver"),
),
), ),
Expanded( Text(
child: FilledButton( "Introduce tu email para enviarte un enlace de recuperación",
onPressed: () => { textAlign: TextAlign.center,
Navigator.push( style: TextStyle(fontSize: 18, letterSpacing: 0),
context, ),
MaterialPageRoute( ],
builder: (_) => EmailSentScreen(email: ""), ),
), Column(
), spacing: 40,
}, children: [
style: ButtonStyle( CustomTextField(
backgroundColor: WidgetStatePropertyAll<Color>( label: "Correo electrónico",
theme.getColorFor(ThemeCode.buttonSecondary), hint: "Correo electrónico",
), ),
Column(
spacing: 8,
children: [
Align(
alignment: Alignment.bottomLeft,
child: Text(
"Teléfono móvil",
style: TextStyle(fontSize: 14, letterSpacing: 0),
)
), ),
child: Text("Enviar"), Row(
), spacing: 10,
children: [
CustomDropdown(
value: 0,
items: [Icon(Icons.outlined_flag), Icon(Icons.outlined_flag), Icon(Icons.outlined_flag)],
onChanged: (value)=> {},
width: 80,
),
Expanded(
child: CustomTextField(
hint: "Teléfono",
numeric: true
)
),
],
),
],
),
Row(
spacing: 20,
children: [
Expanded( child: SecondaryButton(
onPressed: () => {Navigator.pop(context)},
text: "Volver"
)),
Expanded( child: PrimaryButton(
onPressed: () => {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => SentScreen(format: "email"),
),
),
},
text: "Enviar",
size: 16,
color: theme.getColorFor(ThemeCode.buttonSecondary)
)),
],
), ),
], ],
), ),

98
modules/auth/lib/src/recover_password/presentation/sent_screen.dart Normal file
View File

@@ -0,0 +1,98 @@
import 'package:auth/src/recover_password/presentation/new_password_screen.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
class SentScreen extends ConsumerWidget {
final String format;
const SentScreen({
super.key,
required this.format
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final theme = ref.watch(themePortProvider);
return Scaffold(
backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
body: Container(
margin: EdgeInsets.all(24),
child: Center(
child: Column(
spacing: 48,
children: [
Spacer(flex: 8),
Text(
"Recuperar contraseña",
textAlign: TextAlign.center,
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 30, letterSpacing: 0),
),
Row(
spacing: 10,
children: [
Spacer(),
Icon(
Icons.check,
color: theme.getColorFor(ThemeCode.buttonPrimary),
),
Text(
format=="email"
?"Correo enviado correctamente"
:"SMS enviado correctamente",
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
Spacer(),
],
),
Column(
spacing: 16,
children: [
Text(
format=="email"
?"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.",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 18, letterSpacing: 0),
),
Text(
format=="email"
?"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 \".",
textAlign: TextAlign.center,
style: TextStyle(fontSize: 14, letterSpacing: 0),
),
],
),
Row(
spacing: 10,
children: [
Expanded( child: SecondaryButton(
onPressed: () => {},
text: format=="email"
?"Reenviar correo"
:"Reenviar SMS"
)),
Expanded(
child: PrimaryButton(
onPressed: ()=>Navigator.push(
context,
MaterialPageRoute(
builder: (_) => NewPasswordScreen(),
),
),
text: "Continuar",
color: theme.getColorFor(ThemeCode.buttonSecondary)
),
),
],
),
Spacer(flex: 10),
],
),
),
),
);
}
}

5
modules/auth/lib/src/sign_up/account_created_screen.dart
View File

@@ -69,7 +69,7 @@ class AccountCreatedScreen extends ConsumerWidget {
"Crea la cuenta de tu peque e ingresa su \nprimera paga para utilizarla con su reloj", "Crea la cuenta de tu peque e ingresa su \nprimera paga para utilizarla con su reloj",
textAlign: TextAlign.center, textAlign: TextAlign.center,
), ),
FilledButton( PrimaryButton(
onPressed: () => { onPressed: () => {
if (kidAccount){ if (kidAccount){
navigationContract.goTo('/main/home') navigationContract.goTo('/main/home')
@@ -77,7 +77,8 @@ class AccountCreatedScreen extends ConsumerWidget {
navigationContract.pushTo('/device_signup') navigationContract.pushTo('/device_signup')
} }
}, },
child: Text("Continuar"), text: "Continuar",
color: theme.getColorFor(ThemeCode.buttonPrimary)
), ),
Spacer(flex: 8), Spacer(flex: 8),
], ],

110
modules/auth/lib/src/sign_up/signup_address_screen.dart
View File

@@ -1,52 +1,100 @@
import 'package:design_system/design_system.dart'; import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
class SignupAddressScreen extends StatelessWidget { class SignupAddressScreen extends ConsumerStatefulWidget {
const SignupAddressScreen({super.key}); const SignupAddressScreen({super.key});
@override
ConsumerState<SignupAddressScreen> createState() => SignupAddressScreenState();
}
class SignupAddressScreenState extends ConsumerState<SignupAddressScreen>{
late String country;
late int relation;
@override
void initState() {
relation = 0;
super.initState();
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( return Column(
spacing: 24, spacing: 24,
children: [ children: [
Row( Column(
spacing: 8, spacing: 8,
children: [ children: [
Expanded(child: CustomTextField( Align(alignment: Alignment.bottomLeft, child: Text(
label: "Fecha de nacimiento", "Fecha de nacimiento",
hint: "DD", style: TextStyle(fontSize: 14, letterSpacing: 0),
length: 2,
numeric: true,
)), )),
Expanded(child: CustomTextField( Row(
hint: "MM", spacing: 8,
length: 2, children: [
numeric: true, Expanded(child: CustomTextField(
)), //label: "Fecha de nacimiento",
Expanded(child: CustomTextField( hint: "DD",
hint: "AAAA", length: 2,
length: 4, numeric: true,
numeric: true, )),
)), Expanded(child: CustomTextField(
] hint: "MM",
length: 2,
numeric: true,
)),
Expanded(child: CustomTextField(
hint: "AAAA",
length: 4,
numeric: true,
)),
]
),
],
), ),
DropdownMenu( Column(
width: double.infinity, spacing: 8,
label: Text("¿Qué familiar eres?"), children: [
dropdownMenuEntries: [ Align(
DropdownMenuEntry(label: "Padre", value: "Padre"), alignment: Alignment.bottomLeft,
DropdownMenuEntry(label: "Madre", value: "Madre"), child: Text(
DropdownMenuEntry(label: "Tutor", value: "Tutor"), "¿Qué familiar eres?",
style: TextStyle(fontSize: 14, letterSpacing: 0),
),
),
CustomDropdown(
items: [Text("Padre"), Text("Madre"), Text("Tutor")],
hint: "¿Qué familiar eres?",
onChanged: (value)=>setState(() {
relation = value;
})
),
], ],
), ),
CustomTextField(label: "Dirección completa", hint: "Calle Gran Vía 30 6º, 28013"), CustomTextField(label: "Dirección completa", hint: "Calle Gran Vía 30 6º, 28013"),
CustomTextField(label: "Ciudad", hint: "Ciudad"), CustomTextField(label: "Ciudad", hint: "Ciudad"),
DropdownMenu( Column(
dropdownMenuEntries: List<DropdownMenuEntry>.generate(3, (int index) { spacing: 8,
return DropdownMenuEntry(value: "España", label: "España"); children: [
}), Align(
hintText: "País", alignment: Alignment.bottomLeft,
width: double.infinity, child: Text(
"País",
style: TextStyle(fontSize: 14, letterSpacing: 0),
),
),
CustomDropdown(
items: [Text("España"), Text("Francia"), Text("Portugal")],
hint: "País",
onChanged: (value)=>setState(() {
country = value;
})
),
],
), ),
CustomTextField(label: "Nacionalidad", hint: "España"), CustomTextField(label: "Nacionalidad", hint: "España"),
], ],

18
modules/auth/lib/src/sign_up/signup_builder.dart Normal file
View File

@@ -0,0 +1,18 @@
import 'package:auth/src/sign_up/signup_screen.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:get_it/get_it.dart';
import 'package:navigation/navigation.dart';
class SignupBuilder {
const SignupBuilder();
Page<void> buildPage(BuildContext context, GoRouterState state) {
final NavigationContract navigationContract = GetIt.I<NavigationContract>();
return MaterialPage<void>(
key: state.pageKey,
child: SignupScreen(navigationContract: navigationContract),
);
}
}

29
modules/auth/lib/src/sign_up/signup_personal_screen.dart
View File

@@ -12,19 +12,22 @@ class SignupPersonalScreen extends StatelessWidget{
CustomTextField(label: "Nombre", hint: "Nombre"), CustomTextField(label: "Nombre", hint: "Nombre"),
CustomTextField(label: "Apellidos", hint: "Apellidos"), CustomTextField(label: "Apellidos", hint: "Apellidos"),
CustomTextField(label: "DNI", hint: "DNI"), CustomTextField(label: "DNI", hint: "DNI"),
Row(children: [ Row(
DropdownMenu( spacing: 8,
initialSelection: "es", children: [
dropdownMenuEntries: List<DropdownMenuEntry>.generate(3, (int index){ /*CustomDropdown(
return DropdownMenuEntry(labelWidget: Icon(Icons.outlined_flag), label: "es", value: "es"); value: 0,
}) items: [Icon(Icons.outlined_flag), Icon(Icons.outlined_flag), Icon(Icons.outlined_flag)],
), onChanged: (value)=> {},
Expanded(child: CustomTextField( width: 80,
label: "Teléfono móvil", ),*/
hint: "123456789", Expanded(child: CustomTextField(
numeric: true label: "Teléfono móvil",
)) hint: "123456789",
]), numeric: true
))
]
),
CustomTextField(label: "Correo electrónico", hint: "Correo electrónico"), CustomTextField(label: "Correo electrónico", hint: "Correo electrónico"),
], ],
); );

66
modules/auth/lib/src/sign_up/signup_screen.dart
View File

@@ -1,4 +1,5 @@
import 'package:auth/src/widgets/layouts/form_step_layout.dart'; import 'package:auth/src/widgets/layouts/form_step_layout.dart';
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:auth/src/sign_up/signup_address_screen.dart'; import 'package:auth/src/sign_up/signup_address_screen.dart';
import 'package:auth/src/sign_up/signup_personal_screen.dart'; import 'package:auth/src/sign_up/signup_personal_screen.dart';
@@ -7,19 +8,31 @@ 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';
class SignupScreen extends ConsumerStatefulWidget { import 'account_created_screen.dart';
SignupScreen({super.key});
ConsumerState<SignupScreen> createState() => SignupScreenState(); class SignupScreen extends ConsumerStatefulWidget {
NavigationContract navigationContract;
SignupScreen({
super.key,
required this.navigationContract
});
ConsumerState<SignupScreen> createState() => SignupScreenState(navigationContract);
} }
class SignupScreenState extends ConsumerState<SignupScreen> { class SignupScreenState extends ConsumerState<SignupScreen> {
late int currentStep; late int currentStep;
late bool acceptTerms;
final NavigationContract navigationContract;
SignupScreenState(this.navigationContract);
@override @override
void initState() { void initState() {
super.initState(); super.initState();
currentStep = 0; currentStep = 0;
acceptTerms = false;
} }
@override @override
@@ -28,14 +41,50 @@ class SignupScreenState extends ConsumerState<SignupScreen> {
} }
List<Widget> getSteps() { List<Widget> getSteps() {
final theme = ref.watch(themePortProvider);
return [ return [
FormStepLayout( FormStepLayout(
title: "Crea tu usuario", title: "Crea tu usuario",
subtitle: "Nos aseguraremos de que la cuenta esté a nombre del adulto responsable", subtitle: "Con tu email y tu número podremos mantenerte siempre informado",
supertitle: "Datos personales", supertitle: "Usuario y contacto",
currentStep: 1, currentStep: 1,
numSteps: 3, numSteps: 3,
body: [SignupPersonalScreen()], body: [SignupPersonalScreen()],
footer: [
Row(
spacing: 16,
children: [
Expanded(child: SecondaryButton(
onPressed: ()=>{},
text: "Atrás",
size: 16,
)),
Expanded(child: PrimaryButton(
onPressed: ()=>{setState(() {
currentStep++;
})},
text: "Siguiente",
size: 16,
color: theme.getColorFor(ThemeCode.buttonSecondary)
))
]
),
CheckboxListTile(
value: acceptTerms,
onChanged: (_) => setState(() {
acceptTerms = !acceptTerms;
}),
title: Text(
"Acepto los términos y condiciones",
style: TextStyle(fontSize: 16, letterSpacing: 0),
),
checkboxScaleFactor: 1.5,
contentPadding: EdgeInsets.zero,
activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
controlAffinity: ListTileControlAffinity.leading,
)
],
nextStep: ()=>{setState(() { nextStep: ()=>{setState(() {
currentStep++; currentStep++;
})}, })},
@@ -57,16 +106,19 @@ class SignupScreenState extends ConsumerState<SignupScreen> {
), ),
FormStepLayout( FormStepLayout(
title: "Identifícate", title: "Identifícate",
subtitle: "Con tu email y tu número podremos mantenerte siempre informado", subtitle: "Contraseña mínima de 8 caracteres, con una mayúscula, un número y un carácter especial",
supertitle: "Usuario y contacto", supertitle: "Usuario y contacto",
currentStep: 3, currentStep: 3,
numSteps: 3, numSteps: 3,
body: [SignupUserScreen()], body: [SignupUserScreen()],
nextStep: ()=>{GetIt.I<NavigationContract>().pushTo('/device_signup')}, nextStep: ()=>{setState(() {
currentStep++;
})},
previousStep: ()=>{setState(() { previousStep: ()=>{setState(() {
currentStep--; currentStep--;
})}, })},
), ),
AccountCreatedScreen(navigationContract: navigationContract, kidAccount: false)
]; ];
} }
} }

19
modules/auth/lib/src/widgets/layouts/form_step_layout.dart
View File

@@ -31,6 +31,7 @@ class FormStepLayout extends ConsumerWidget{
final theme = ref.watch(themePortProvider); final theme = ref.watch(themePortProvider);
return Scaffold( return Scaffold(
backgroundColor: theme.getColorFor(ThemeCode.backgroundPrimary),
body: SafeArea(child: SingleChildScrollView(child: Container( body: SafeArea(child: SingleChildScrollView(child: Container(
color: theme.getColorFor(ThemeCode.backgroundPrimary), color: theme.getColorFor(ThemeCode.backgroundPrimary),
padding: EdgeInsets.only(top: 40, left: 24, right: 24), padding: EdgeInsets.only(top: 40, left: 24, right: 24),
@@ -66,23 +67,25 @@ class FormStepLayout extends ConsumerWidget{
Widget navigationButtons(int currentStep, int numSteps, VoidCallback nextStep, VoidCallback previousStep, ThemePort theme) { Widget navigationButtons(int currentStep, int numSteps, VoidCallback nextStep, VoidCallback previousStep, ThemePort theme) {
if (currentStep == numSteps){ if (currentStep == numSteps){
return FilledButton( return PrimaryButton(
onPressed: nextStep, onPressed: nextStep,
style: ButtonStyle(backgroundColor: WidgetStatePropertyAll<Color>(theme.getColorFor(ThemeCode.buttonPrimary))), text: "Continuar",
child: Expanded(child: Center(child: Text("Continuar"))) color: theme.getColorFor(ThemeCode.buttonPrimary)
); );
} else { } else {
return Row( return Row(
spacing: 16, spacing: 16,
children: [ children: [
Expanded(child: OutlinedButton( Expanded(child: SecondaryButton(
onPressed: previousStep, onPressed: previousStep,
child: Expanded(child: Center(child: Text("Atrás"))) text: "Atrás",
size: 16,
)), )),
Expanded(child: FilledButton( Expanded(child: PrimaryButton(
onPressed: nextStep, onPressed: nextStep,
style: ButtonStyle(backgroundColor: WidgetStatePropertyAll<Color>(theme.getColorFor(ThemeCode.buttonSecondary))), text: "Siguiente",
child: Expanded(child: Center(child: Text("Siguiente"))) size: 16,
color: theme.getColorFor(ThemeCode.buttonSecondary)
)) ))
] ]
); );

17
modules/home/lib/src/presentation/deposit_screen.dart
View File

@@ -26,13 +26,10 @@ class DepositScreen extends ConsumerWidget {
padding: EdgeInsets.all(10), padding: EdgeInsets.all(10),
child: Column( child: Column(
children: [ children: [
FilledButton( PrimaryButton(
onPressed: () => {}, onPressed: ()=>{},
child: Container( text: "Añadir dinero",
width: double.infinity, color: theme.getColorFor(ThemeCode.buttonPrimary)
padding: EdgeInsets.all(20),
child: Center(child: Text("Añadir dinero")),
),
), ),
TextButton( TextButton(
onPressed: () => Navigator.pop(context), onPressed: () => Navigator.pop(context),
@@ -82,6 +79,7 @@ class DepositScreen extends ConsumerWidget {
), ),
Text("Este dato aparecerá en el reloj del peque"), Text("Este dato aparecerá en el reloj del peque"),
CheckboxListTile( CheckboxListTile(
contentPadding: EdgeInsets.zero,
title: Text('Paga semanal'), title: Text('Paga semanal'),
controlAffinity: ListTileControlAffinity.leading, controlAffinity: ListTileControlAffinity.leading,
value: reason == "weekly", value: reason == "weekly",
@@ -93,6 +91,7 @@ class DepositScreen extends ConsumerWidget {
activeColor: theme.getColorFor(ThemeCode.buttonPrimary), activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
), ),
CheckboxListTile( CheckboxListTile(
contentPadding: EdgeInsets.zero,
title: Text('Objetivo semanal cumplido'), title: Text('Objetivo semanal cumplido'),
controlAffinity: ListTileControlAffinity.leading, controlAffinity: ListTileControlAffinity.leading,
value: reason == "goal", value: reason == "goal",
@@ -104,6 +103,7 @@ class DepositScreen extends ConsumerWidget {
activeColor: theme.getColorFor(ThemeCode.buttonPrimary), activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
), ),
CheckboxListTile( CheckboxListTile(
contentPadding: EdgeInsets.zero,
title: Text('Gastos extraordinarios'), title: Text('Gastos extraordinarios'),
controlAffinity: ListTileControlAffinity.leading, controlAffinity: ListTileControlAffinity.leading,
value: reason == "extraordinary", value: reason == "extraordinary",
@@ -115,6 +115,7 @@ class DepositScreen extends ConsumerWidget {
activeColor: theme.getColorFor(ThemeCode.buttonPrimary), activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
), ),
CheckboxListTile( CheckboxListTile(
contentPadding: EdgeInsets.zero,
title: Text('Otro'), title: Text('Otro'),
controlAffinity: ListTileControlAffinity.leading, controlAffinity: ListTileControlAffinity.leading,
value: reason == "other", value: reason == "other",
@@ -153,6 +154,7 @@ class DepositScreen extends ConsumerWidget {
), ),
Text("Este dato aparecerá en el reloj del peque"), Text("Este dato aparecerá en el reloj del peque"),
CheckboxListTile( CheckboxListTile(
contentPadding: EdgeInsets.zero,
title: Text('Ahora'), title: Text('Ahora'),
controlAffinity: ListTileControlAffinity.leading, controlAffinity: ListTileControlAffinity.leading,
value: program == false, value: program == false,
@@ -164,6 +166,7 @@ class DepositScreen extends ConsumerWidget {
activeColor: theme.getColorFor(ThemeCode.buttonPrimary), activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
), ),
CheckboxListTile( CheckboxListTile(
contentPadding: EdgeInsets.zero,
title: Text('Programar'), title: Text('Programar'),
controlAffinity: ListTileControlAffinity.leading, controlAffinity: ListTileControlAffinity.leading,
value: program == true, value: program == true,

111
modules/home/lib/src/presentation/extract_screen.dart Normal file
View File

@@ -0,0 +1,111 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:home/src/presentation/wallet_management_layout.dart';
import 'package:sf_shared/sf_shared.dart';
class ExtractScreen extends ConsumerWidget{
final Kid kid;
@override
ExtractScreen({
super.key,
required this.kid,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final theme = ref.watch(themePortProvider);
return WalletManagementLayout(
kid: kid,
children: [Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(24)),
color: theme.getColorFor(ThemeCode.backgroundPrimary)
),
child: Column(
spacing: 24,
children: [
Column(
spacing: 8,
children: [
Align(alignment: Alignment.topLeft, child: Text(
"Retirar dinero de la cuenta",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0)
)),
Align(alignment: Alignment.topLeft, child: Text(
"Este dato aparecerá en el reloj del peque",
style: TextStyle(fontSize: 14, letterSpacing: 0)
))
],
),
CustomTextField(
label: "Selecciona la cantidad de dinero",
hint: "2€",
numeric: true,
),
Column(
spacing: 8,
children: [
Align(alignment: Alignment.topLeft, child: Text(
"Este es el mensaje fijado por defecto:",
style: TextStyle(fontSize: 16, letterSpacing: 0)
)),
Align(alignment: Alignment.topLeft, child: Text(
"\"Hemos quitado el dinero del reloj, ya no puedes pagar con él\"",
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500, letterSpacing: 0)
))
],
),
Column(
spacing: 8,
children: [
Align(alignment: Alignment.topLeft, child: Text(
"Escribir mensaje a ${kid.name} del motivo de la retirada de su dinero",
style: TextStyle(fontSize: 14, letterSpacing: 0)
)),
CustomTextField(
hint: "Escribe tu mensaje",
lines: 4,
length: 150,
),
Row(
spacing: 4,
children: [
Icon(Icons.info_outline, size: 16),
Text("Máximo 150 caracteres", style: TextStyle(fontSize: 14, letterSpacing: 0))
],
)
],
)
],
),
)],
footer: Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
color: theme.getColorFor(ThemeCode.backgroundPrimary),
borderRadius: BorderRadius.only(topRight: Radius.circular(24), topLeft: Radius.circular(24))
),
child: Column(
spacing: 16,
children: [
PrimaryButton(
onPressed: ()=>{Navigator.pop(context)},
text: "Enviar mensaje y bloquear",
color: theme.getColorFor(ThemeCode.buttonPrimary),
),
TextButton(
style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
onPressed: ()=>Navigator.pop(context),
child: Text("Cancelar", style: TextStyle(fontSize: 18))
)
],
),
)
);
}
}

786
modules/home/lib/src/presentation/goals_screen.dart Normal file
View File

@@ -0,0 +1,786 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:home/src/presentation/wallet_management_layout.dart';
import 'package:sf_shared/sf_shared.dart';
class GoalsScreen extends ConsumerStatefulWidget{
final Kid kid;
List<Task> tasks = [Task(rewardAmount: 10, subtasks: [
Subtask(name: "Hacer la cama", completed: false),
Subtask(name: "Terminar los deberes", completed: true),
Subtask(name: "Recoger la mesa", completed: true),
Subtask(name: "Lavarse los dientes", completed: false)
]), Task(rewardAmount: 10.05)];
final List<SavingsGoal> savingsGoals;
@override
GoalsScreen({
super.key,
required this.kid,
this.savingsGoals = const [
SavingsGoal(name: "Cumpleaños de Emma", goal: 24, saved: 12.09),
SavingsGoal(name: "Protecciones nuevas de patines", goal: 10, saved: 0)
]
});
@override
ConsumerState<GoalsScreen> createState() => GoalsScreenState();
}
class GoalsScreenState extends ConsumerState<GoalsScreen>{
late bool fullPlan;
@override
void initState() {
super.initState();
fullPlan = true;
}
@override
Widget build(BuildContext context) {
final theme = ref.watch(themePortProvider);
return WalletManagementLayout(
kid: widget.kid,
children: [
Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
color: theme.getColorFor(ThemeCode.backgroundPrimary),
borderRadius: BorderRadius.all(Radius.circular(24))
),
child: Column(
spacing: 24,
children: [
Row(
spacing: 8,
children: [
Text("Metas", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0)),
Icon(Icons.workspace_premium),
Spacer(),
Text("Sólo con Plan Completo", style: TextStyle(fontSize: 14, letterSpacing: 0))
],
),
Text(
"Enséñale a ahorrar y refuerza la importancia de no malgastar su dinero",
style: TextStyle(fontSize: 14, letterSpacing: 0),
),
],
),
),
SavingsBlock(fullPlan: fullPlan, savings: widget.savingsGoals),
TasksBlock(fullPlan: fullPlan, tasks: widget.tasks),
],
footer: Container()
);
}
}
class SavingsBlock extends ConsumerStatefulWidget {
final bool fullPlan;
final List savings;
@override
const SavingsBlock({
super.key,
required this.fullPlan,
required this.savings
});
@override
ConsumerState<SavingsBlock> createState() => SavingsBlockState();
}
class SavingsBlockState extends ConsumerState<SavingsBlock>{
late List<bool> showEdit;
late List<bool> showAdd;
late bool showNew;
@override
void initState() {
super.initState();
showEdit = widget.savings.map((_)=>false).toList();
showAdd = widget.savings.map((_)=>false).toList();
showNew = false;
}
@override
Widget build(BuildContext context) {
final theme = ref.watch(themePortProvider);
var emptyBlock = ({fullPlan}) => Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
color: theme.getColorFor(ThemeCode.backgroundPrimary),
borderRadius: BorderRadius.all(Radius.circular(24)),
border: BoxBorder.all(color: theme.getColorFor(ThemeCode.textPrimary))
),
child: Stack(
children: [
Align(alignment: Alignment.topRight, child: SvgPicture.asset("assets/images/ui/ahorros.svg")),
Column(
spacing: 24,
children: [
Align(alignment: Alignment.topLeft, child: Text(
"Ahorros",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0),
)),
Align(alignment: Alignment.topLeft, child: SizedBox(
width: 200,
child: Text(
"Enséñale a ahorrar y refuerza la importancia de no malgastar su dinero",
style: TextStyle(fontSize: 14, letterSpacing: 0),
),
)),
if (fullPlan) Column(
spacing: 24,
children: [
Align(
alignment: Alignment.topLeft,
child: SecondaryButton(
onPressed: ()=>setState(() {
showNew = true;
}),
text: "Crear objetivo de ahorro",
radius: 8,
height: 44,
size: 14,
width: 230,
),
),
Align(
alignment: Alignment.topLeft,
child: TextButton(
onPressed: ()=>{},
style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.zero)),
child: Text(
"Ver estado de ahorros",
style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, letterSpacing: 0)
)
)
)
],
),
if (!fullPlan) TextButton(
onPressed: ()=>{},
child: Row(
spacing: 4,
children: [
Icon(Icons.workspace_premium, size: 16),
Text("Suscribirme al Plan Completo")
],
)
)
],
)
],
)
);
var editBlock = ({create, index}) => Column(
spacing: 24,
children: [
CustomTextField(
hint: create? "Ponle un título para reconocerlo" : widget.savings[index].name,
label: "Motivo del ahorro",
lines: create? 2 : 1,
),
CustomTextField(
hint: "30€",
label: "Seleciona la cantidad a ahorrar",
numeric: true,
),
CheckboxListTile(
value: false,
onChanged: (_) => {},
checkboxScaleFactor: 2,
controlAffinity: ListTileControlAffinity.leading,
activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
contentPadding: EdgeInsets.zero,
title: Text(
"Ahorro automático desde su paga",
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500, letterSpacing: 0),
),
),
CustomTextField(
hint: "2€",
label: "Selecciona la cantidad de dinero",
numeric: true,
),
CheckboxListTile(
value: false,
onChanged: (_) => {},
checkboxScaleFactor: 2,
controlAffinity: ListTileControlAffinity.leading,
activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
contentPadding: EdgeInsets.zero,
title: Text(
"Mandar automáticamente el dinero al reloj del peque cuando consiga su objetivo",
style: TextStyle(fontSize: 16, letterSpacing: 0),
),
),
Column(
spacing: 10,
children: [
Text(
"Este es el mensaje fijado por defecto que le llegará a su reloj:",
style: TextStyle(fontSize: 16, letterSpacing: 0),
),
Text(
"\"¡Genial, has conseguido ahorrar lo que querías!\"",
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500, letterSpacing: 0),
)
],
),
Column(
spacing: 8,
children: [
CustomTextField(
hint: "Escribe tu mensaje",
label: "Escribir otro mensaje diferente:",
lines: 4,
length: 150,
),
Row(
spacing: 4,
children: [
Icon(Icons.info_outline, size: 16,),
Text(
"Máximo 150 caracteres",
style: TextStyle(fontSize: 14, letterSpacing: 0),
)
],
)
],
),
Column(
spacing: 24,
children: [
PrimaryButton(
onPressed: () => {},
text: "Guardar cambios",
color: theme.getColorFor(
ThemeCode.buttonPrimary)
),
TextButton(
onPressed: () {
if (create){
setState(() {
showNew = false;
});
} else {
setState(() {
showEdit[index] = false;
});
}
},
child: Text(
"Cancelar",
style: TextStyle(fontSize: 16,
fontWeight: FontWeight.w500,
letterSpacing: 0),
)
)
],
)
],
);
if (widget.fullPlan) {
if (showNew){
return Container(
padding: EdgeInsets.fromLTRB(24, 24, 24, 32),
decoration: BoxDecoration(
color: theme.getColorFor(ThemeCode.backgroundSecondary),
border: Border.all(color: theme.getColorFor(ThemeCode.textPrimary)),
borderRadius: BorderRadius.all(Radius.circular(24))
),
child: Column(
spacing: 24,
children: [
Align(alignment: Alignment.topLeft, child: Text(
"Ahorros",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0),
)),
Text(
"Enséñale a ahorrar y refuerza la importancia de no malgastar su dinero",
style: TextStyle(fontSize: 14, letterSpacing: 0),
),
Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(24)),
color: theme.getColorFor(ThemeCode.backgroundPrimary)
),
child: editBlock(create: true, index: null)
)
],
),
);
} else {
if (widget.savings.isNotEmpty) {
return Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(24)),
color: theme.getColorFor(ThemeCode.backgroundPrimary),
//border: BoxBorder.all(color: theme.getColorFor(ThemeCode.textPrimary))
),
child: Column(
spacing: 24,
children: [
Align(alignment: Alignment.topLeft,
child: Text(
"Ahorros",
style: TextStyle(fontSize: 20,
fontWeight: FontWeight.w500,
letterSpacing: 0),
)
),
...List<Widget>.generate(widget.savings.length, (int index) =>
Container(
decoration: BoxDecoration(
border: BoxBorder.all(
color: theme.getColorFor(ThemeCode.textPrimary)),
color: theme.getColorFor(ThemeCode.backgroundPrimary),
borderRadius: BorderRadius.all(Radius.circular(24)),
),
padding: EdgeInsets.all(16),
child: Column(
spacing: 24,
children: [
Row(
spacing: 16,
children: [
Expanded(child: Column(
spacing: 8,
children: [
Align(
alignment: Alignment.topLeft,
child: Text(
"Ahorro para",
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 16, letterSpacing: 0),
),
),
Text(
widget.savings[index].name,
style: TextStyle(fontSize: 16,
fontWeight: FontWeight.w500,
letterSpacing: 0),
)
],
)),
Container(
decoration: BoxDecoration(
color: theme.getColorFor(
ThemeCode.backgroundTertiary),
borderRadius: BorderRadius.all(
Radius.circular(16)),
),
padding: EdgeInsets.symmetric(
horizontal: 8, vertical: 4),
child: Row(
spacing: 8,
children: [
Icon(Icons.account_balance, size: 24,
color: theme.getColorFor(
ThemeCode.buttonPrimary)),
MoneyText(
text: "${widget.savings[index]
.goal}€",
size: 30,
secondarySize: 14,
color: theme.getColorFor(
ThemeCode.buttonPrimary)
)
],
),
)
]
),
if (index == 0)Column(
spacing: 8,
children: [
ProgressBar(
max: widget.savings[index].goal,
value: widget.savings[index].saved,
height: 64,
textSize: 40,
textSecondarySize: 24,
backgroundColor: theme.getColorFor(
ThemeCode.backgroundTertiary),
foregroundColor: theme.getColorFor(
ThemeCode.buttonPrimary),
textColor: theme.getColorFor(
ThemeCode.textSecondary)
),
Center(child: Text("Ahorrado")),
if (!showAdd[index]) TextButton(
style: ButtonStyle(
padding: WidgetStatePropertyAll(
EdgeInsets.zero)),
onPressed: () =>
setState(() {
showAdd[index] = true;
}),
child: Text(
"+ Añadir dinero extra a este ahorro",
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 16, letterSpacing: 0),
)
),
if (showAdd[index]) CustomTextField(
hint: "5€",
numeric: true,
)
],
),
if (!showEdit[index]) Row(
children: [
TextButton(
style: ButtonStyle(
padding: WidgetStatePropertyAll(
EdgeInsets.zero)),
onPressed: () =>
setState(() {
showEdit[index] = true;
}),
child: Row(
spacing: 4,
children: [
Icon(Icons.edit_outlined, size: 24),
Text(
"Editar",
style: TextStyle(fontSize: 16,
fontWeight: FontWeight.w500,
letterSpacing: 0),
),
],
)
),
Spacer(),
TextButton(
style: ButtonStyle(
padding: WidgetStatePropertyAll(
EdgeInsets.zero)),
onPressed: () => {},
child: Row(
spacing: 4,
children: [
Icon(Icons.delete_outline_outlined,
size: 24),
Text(
"Eliminar",
style: TextStyle(fontSize: 16,
fontWeight: FontWeight.w500,
letterSpacing: 0),
)
],
)
),
],
),
if(showEdit[index]) editBlock(
create: false, index: index)
],
),
),
),
TextButton(
onPressed: () =>
setState(() {
showNew = true;
}),
child: Row(
spacing: 4,
children: [
Spacer(),
Icon(Icons.account_balance, size: 24),
Text(
"Crear otro ahorro",
style: TextStyle(fontSize: 18,
fontWeight: FontWeight.w500,
letterSpacing: 0),
),
Spacer()
],
)
),
],
),
);
} else {
return emptyBlock(fullPlan: true);
}
}
} else {
return emptyBlock(fullPlan: false);
}
}
}
class TasksBlock extends ConsumerStatefulWidget {
final bool fullPlan;
final List<Task> tasks;
@override
const TasksBlock({
super.key,
required this.fullPlan,
required this.tasks
});
@override
ConsumerState<ConsumerStatefulWidget> createState() => TasksBlockState();
}
class TasksBlockState extends ConsumerState<TasksBlock>{
@override
Widget build(BuildContext context) {
final theme = ref.watch(themePortProvider);
final emptyBlock = ({fullPlan})=>Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
color: theme.getColorFor(ThemeCode.backgroundPrimary),
borderRadius: BorderRadius.all(Radius.circular(24)),
border: BoxBorder.all(color: theme.getColorFor(ThemeCode.textPrimary))
),
child: Stack(
children: [
Align(alignment: Alignment.topRight, child: SvgPicture.asset("assets/images/ui/tareas.svg")),
Column(
spacing: 24,
children: [
Align(alignment: Alignment.topLeft, child: Text(
"Tareas",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0),
)),
Align(alignment: Alignment.topLeft, child: SizedBox(
width: 200,
child: Text(
"Refuerza su sentido de la responsabilidad con pequeñas tareas que cumplir",
style: TextStyle(fontSize: 14, letterSpacing: 0),
),
)),
if (fullPlan) Align(
alignment: Alignment.topLeft,
child: SecondaryButton(
onPressed: ()=>{},
text: "Crear lista de tareas",
size: 14,
width: 190,
height: 44,
)
),
if (!fullPlan) TextButton(
onPressed: ()=>{},
child: Row(
spacing: 4,
children: [
Icon(Icons.workspace_premium, size: 16),
Text("Suscribirme al Plan Completo")
],
)
)
],
)
],
)
);
if (widget.fullPlan) {
if (widget.tasks.isNotEmpty) {
return Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(24)),
border: BoxBorder.all(
color: theme.getColorFor(ThemeCode.textPrimary)),
color: theme.getColorFor(ThemeCode.backgroundSecondary)
),
child: Column(
spacing: 24,
children: [
Column(
spacing: 8,
children: [
Align(alignment: Alignment.topLeft, child: Text(
"Tareas",
style: TextStyle(fontSize: 20,
fontWeight: FontWeight.w500,
letterSpacing: 0),
)),
Text(
"Refuerza su sentido de la responsabilidad con pequeñas tareas que cumplir",
style: TextStyle(fontSize: 14, letterSpacing: 0),
)
],
),
...List<Widget>.generate(widget.tasks.length, (int i) =>
Container(
decoration: BoxDecoration(
border: BoxBorder.fromLTRB(top: BorderSide(
color: theme.getColorFor(ThemeCode.buttonPrimary),
width: 8)),
borderRadius: BorderRadius.all(Radius.circular(24)),
color: theme.getColorFor(ThemeCode.backgroundPrimary)
),
padding: EdgeInsets.all(24),
child: Column(
spacing: 16,
children: [
Row(children: [
Text(
"Lista de tareas",
style: TextStyle(fontSize: 20,
fontWeight: FontWeight.w500,
letterSpacing: 0),
),
Spacer(),
Text(
"10 oct - 17 oct",
style: TextStyle(fontSize: 14, letterSpacing: 0),
)
]),
...List<CheckboxListTile>.generate(
widget.tasks[i].subtasks.length, (int j) =>
CheckboxListTile(
contentPadding: EdgeInsets.zero,
checkboxScaleFactor: 2,
value: widget.tasks[i].subtasks[j].completed,
title: Text(widget.tasks[i].subtasks[j].name),
controlAffinity: ListTileControlAffinity
.leading,
activeColor: theme.getColorFor(
ThemeCode.buttonPrimary),
onChanged: (_) =>
setState(() {
widget.tasks[i].subtasks[j] = Subtask(
name: widget.tasks[i].subtasks[j]
.name,
completed: !widget.tasks[i]
.subtasks[j].completed);
}),
)
),
TextButton(
style: ButtonStyle(
padding: WidgetStatePropertyAll(EdgeInsets
.zero)),
onPressed: () => {},
child: Align(
alignment: Alignment.topLeft,
child: Text(
"+ Añadir tarea",
style: TextStyle(fontSize: 18,
fontWeight: FontWeight.w500,
letterSpacing: 0),
)
)
),
Container(
decoration: BoxDecoration(
color: theme.getColorFor(ThemeCode
.backgroundTertiary),
borderRadius: BorderRadius.all(Radius.circular(
24))
),
padding: EdgeInsets.symmetric(
horizontal: 20, vertical: 16),
child: Row(
spacing: 16,
children: [
Expanded(child: Text(
"Recompensa por cumplimiento",
style: TextStyle(
fontSize: 16, letterSpacing: 0),
)),
Row(
spacing: 8,
children: [
Icon(Icons.emoji_events_outlined, size: 16,
color: theme.getColorFor(
ThemeCode.buttonPrimary)),
MoneyText(
text: "${widget.tasks[i]
.rewardAmount}€",
size: 40,
secondarySize: 24,
color: theme.getColorFor(
ThemeCode.buttonPrimary)
)
],
)
],
),
),
Column(
spacing: 8,
children: [
Align(
alignment: Alignment.topLeft,
child: Text(
"Este es el mensaje que se enviará al cumplir con todas las tareas:",
style: TextStyle(
fontSize: 14, letterSpacing: 0),
),
),
Align(
alignment: Alignment.topLeft,
child: Text(
"¡Enhorabuena, has cumplido todas las tareas de esta semana!",
style: TextStyle(fontSize: 14,
fontWeight: FontWeight.w500,
letterSpacing: 0),
),
),
],
),
Align(
alignment: Alignment.topLeft,
child: TextButton(
onPressed: () => {},
child: Row(
spacing: 4,
children: [
Icon(Icons.delete_outline_outlined,
size: 24),
Text(
"Eliminar lista de tareas",
style: TextStyle(fontSize: 16,
fontWeight: FontWeight.w500,
letterSpacing: 0),
)
],
)
),
)
],
),
)
),
SecondaryButton(
onPressed: () => {},
text: "Crear una lista de tareas nueva",
size: 14,
),
],
)
);
} else {
return emptyBlock(fullPlan: true);
}
} else {
return emptyBlock(fullPlan: false);
}
}
}

2
modules/home/lib/src/presentation/home_screen.dart
View File

@@ -43,7 +43,7 @@ class HomeScreen extends ConsumerWidget {
children: <TextSpan>[ children: <TextSpan>[
TextSpan( TextSpan(
text: name, text: name,
style: TextStyle(fontWeight: FontWeight.bold), style: TextStyle(fontWeight: FontWeight.w500),
), ),
], ],
), ),

50
modules/home/lib/src/presentation/kid_wallet_screen.dart
View File

@@ -2,6 +2,9 @@ import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart'; import 'package:flutter_svg/svg.dart';
import 'package:home/src/presentation/deposit_screen.dart'; import 'package:home/src/presentation/deposit_screen.dart';
import 'package:home/src/presentation/extract_screen.dart';
import 'package:home/src/presentation/goals_screen.dart';
import 'package:home/src/presentation/lock_card_screen.dart';
import 'package:sf_shared/sf_shared.dart'; import 'package:sf_shared/sf_shared.dart';
import 'package:home/src/presentation/limits_screen.dart'; import 'package:home/src/presentation/limits_screen.dart';
import 'package:home/src/presentation/wage_screen.dart'; import 'package:home/src/presentation/wage_screen.dart';
@@ -93,7 +96,12 @@ class KidWalletScreen extends ConsumerWidget {
), ),
TextButton( TextButton(
style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))), style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
onPressed: ()=>{}, onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => LockCardScreen(kid: kid)
)
),
child: Row( child: Row(
spacing: 10, spacing: 10,
children: [ children: [
@@ -110,7 +118,7 @@ class KidWalletScreen extends ConsumerWidget {
spacing: 16, spacing: 16,
children: [ children: [
Container( Container(
padding: EdgeInsets.all(10), padding: EdgeInsets.all(16),
margin: EdgeInsets.only(top: 30), margin: EdgeInsets.only(top: 30),
decoration: BoxDecoration( decoration: BoxDecoration(
color: theme.getColorFor(ThemeCode.backgroundPrimary), color: theme.getColorFor(ThemeCode.backgroundPrimary),
@@ -121,6 +129,7 @@ class KidWalletScreen extends ConsumerWidget {
child: Row( child: Row(
children: [ children: [
TextButton( TextButton(
style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
onPressed: () => Navigator.push( onPressed: () => Navigator.push(
context, context,
MaterialPageRoute( MaterialPageRoute(
@@ -128,7 +137,7 @@ class KidWalletScreen extends ConsumerWidget {
) )
), ),
child: Column( child: Column(
spacing: 10, spacing: 8,
children: [ children: [
Icon( Icon(
Icons.add_circle_outline, Icons.add_circle_outline,
@@ -149,6 +158,7 @@ class KidWalletScreen extends ConsumerWidget {
), ),
Spacer(), Spacer(),
TextButton( TextButton(
style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
onPressed: () => Navigator.push( onPressed: () => Navigator.push(
context, context,
MaterialPageRoute( MaterialPageRoute(
@@ -177,6 +187,7 @@ class KidWalletScreen extends ConsumerWidget {
), ),
Spacer(), Spacer(),
TextButton( TextButton(
style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
onPressed: () => Navigator.push( onPressed: () => Navigator.push(
context, context,
MaterialPageRoute( MaterialPageRoute(
@@ -205,7 +216,13 @@ class KidWalletScreen extends ConsumerWidget {
), ),
Spacer(), Spacer(),
TextButton( TextButton(
onPressed: () => {}, style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => GoalsScreen(kid: kid)
)
),
child: Column( child: Column(
spacing: 10, spacing: 10,
children: [ children: [
@@ -228,7 +245,13 @@ class KidWalletScreen extends ConsumerWidget {
), ),
Spacer(), Spacer(),
TextButton( TextButton(
onPressed: () => {}, style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => ExtractScreen(kid: kid)
)
),
child: Column( child: Column(
spacing: 10, spacing: 10,
children: [ children: [
@@ -256,13 +279,13 @@ class KidWalletScreen extends ConsumerWidget {
), ),
Container( Container(
padding: EdgeInsets.all(15), padding: EdgeInsets.all(15),
height: 400, height: 300,
decoration: BoxDecoration( decoration: BoxDecoration(
color: theme.getColorFor(ThemeCode.backgroundPrimary), color: theme.getColorFor(ThemeCode.backgroundPrimary),
borderRadius: BorderRadius.all(Radius.circular(20)) borderRadius: BorderRadius.all(Radius.circular(20))
), ),
child: Expanded(child: Column( child: Expanded(child: Column(
spacing: 24, //spacing: 24,
children: [ children: [
Text("Últimos movimientos", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500)), Text("Últimos movimientos", style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500)),
activityList(context, theme) activityList(context, theme)
@@ -297,13 +320,14 @@ class KidWalletScreen extends ConsumerWidget {
return Expanded( return Expanded(
child: ListView( child: ListView(
padding: EdgeInsets.symmetric(vertical: 0), padding: EdgeInsets.symmetric(vertical: 0),
children: [ children: [
...List<Widget>.generate(activity.length, (int index) { ...List<Widget>.generate(activity.length, (int index) {
return Column( return Container(padding: EdgeInsets.only(top: 24),
spacing: 16, child: Column(
spacing: 8,
children: [ children: [
Text(activity[index]["date"].toString(), style: TextStyle(fontSize: 18)), Align(alignment: Alignment.bottomLeft, child: Text(activity[index]["date"].toString(), style: TextStyle(fontSize: 18, height: 1.5))),
Column( Column(
spacing: 16, spacing: 16,
children: List<Widget>.generate( children: List<Widget>.generate(
@@ -347,9 +371,9 @@ class KidWalletScreen extends ConsumerWidget {
) )
) )
] ]
); ));
}), }),
TextButton(onPressed: () => {}, child: Text("Ver todos")), TextButton(onPressed: () => {}, child: Align(alignment: Alignment.bottomLeft, child: Text("Ver todos"))),
] ]
) )
); );

171
modules/home/lib/src/presentation/limits_screen.dart
View File

@@ -22,7 +22,7 @@ class LimitsScreenState extends ConsumerState<LimitsScreen> {
@override @override
void initState() { void initState() {
super.initState(); super.initState();
dailyLimits = [ dailyLimits = [ //dey, week, month, year
{"title": "Diario L-V", "limit": "5", "edit": false}, {"title": "Diario L-V", "limit": "5", "edit": false},
{"title": "Fines de semana", "limit": "8", "edit": false}, {"title": "Fines de semana", "limit": "8", "edit": false},
{"title": "Semanal", "limit": "30", "edit": false}, {"title": "Semanal", "limit": "30", "edit": false},
@@ -41,14 +41,27 @@ class LimitsScreenState extends ConsumerState<LimitsScreen> {
"end": "21:00", "end": "21:00",
"edit": false, "edit": false,
}, },
{"title": "Vacaciones", "start": "09:00", "end": "22:00", "edit": false}, {
"title": "Vacaciones",
"start": "09:00",
"end": "22:00",
"edit": false
},
]; ];
conditions = [ conditions = [
{"title": "Alimentación", "limit": "10", "edit": false}, {"title": "Alimentación", "limit": "10", "active": true, "edit": false},
{"title": "Transporte", "limit": "10", "edit": false}, {"title": "Transporte", "limit": "10", "active": false, "edit": false},
{"title": "Alimentación", "limit": "10", "edit": false}, {"title": "Alimentación", "limit": "10", "active": false, "edit": false},
];
blocks = [
{"title": "Alojamiento y Hoteles", "active": true},
{"title": "Supermercados", "active": true},
{"title": "Gasolineras", "active": true},
{"title": "Restaurantes", "active": true},
{"title": "Bares y discotecas", "active": true},
{"title": "Licorerías", "active": true},
{"title": "Estancos", "active": true},
]; ];
blocks = [];
} }
@override @override
@@ -57,16 +70,32 @@ class LimitsScreenState extends ConsumerState<LimitsScreen> {
return WalletManagementLayout( return WalletManagementLayout(
kid: widget.kid, kid: widget.kid,
footer: Column( footer: Container(
children: [ decoration: BoxDecoration(
FilledButton( color: theme.getColorFor(ThemeCode.backgroundPrimary),
onPressed: () => {}, borderRadius: BorderRadius.only(topLeft: Radius.circular(24), topRight: Radius.circular(24))
child: SizedBox( ),
width: double.infinity, padding: EdgeInsets.all(24),
child: Center(child: Text("Guardar límites")), child: Column(
children: [
PrimaryButton(
onPressed: () => {},
text: "Guardar límites",
color: theme.getColorFor(ThemeCode.buttonPrimary)
), ),
), TextButton(
], onPressed: ()=>Navigator.pop(context),
child: Text(
"Cancelar",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: theme.getColorFor(ThemeCode.textPrimary)
)
)
)
],
),
), ),
children: [ children: [
Container( Container(
@@ -78,9 +107,12 @@ class LimitsScreenState extends ConsumerState<LimitsScreen> {
child: Column( child: Column(
spacing: 10, spacing: 10,
children: [ children: [
Text( Align(
"Pon límite de gastos", alignment: Alignment.topLeft,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), child: Text(
"Pon límite de gastos",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
)
), ),
Text("Libertad para ellos, tranquilidad para ti"), Text("Libertad para ellos, tranquilidad para ti"),
...List<Widget>.generate(dailyLimits.length, (int index) { ...List<Widget>.generate(dailyLimits.length, (int index) {
@@ -103,7 +135,9 @@ class LimitsScreenState extends ConsumerState<LimitsScreen> {
), ),
], ],
), ),
if (dailyLimits[index]["edit"]) CustomTextField(), if (dailyLimits[index]["edit"]) CustomTextField(
hint: "5€",
),
], ],
); );
}), }),
@@ -136,22 +170,113 @@ class LimitsScreenState extends ConsumerState<LimitsScreen> {
TextButton( TextButton(
onPressed: () => { onPressed: () => {
setState(() { setState(() {
timeLimits[index]["edit"] = timeLimits[index]["edit"] = !timeLimits[index]["edit"];
!timeLimits[index]["edit"];
}), }),
}, },
child: Text("Editar"), child: Text("Editar"),
), ),
], ],
), ),
if (timeLimits[index]["edit"]) CustomTextField(), if (timeLimits[index]["edit"]) CustomTextField(
hint: "5€",
),
], ],
); );
}), }),
], ],
), ),
), ),
Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(24)),
color: theme.getColorFor(ThemeCode.backgroundPrimary),
),
child: Column(
spacing: 24,
children: [
Text(
"Condiciones",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0),
),
Column(
spacing: 8,
children: List<Widget>.generate(conditions.length, (int index)=>
Column(
spacing: 8,
children: [
Row(children: [
Expanded(child: CheckboxListTile(
value: conditions[index]["active"],
onChanged: (_)=>setState(() {
conditions[index]["active"] = !conditions[index]["active"];
}),
title: Text(
"${conditions[index]["title"]}: ${conditions[index]["limit"]}€/sem",
style: TextStyle(fontSize: 16, letterSpacing: 0),
),
checkboxScaleFactor: 2,
controlAffinity: ListTileControlAffinity.leading,
activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
contentPadding: EdgeInsets.zero,
)),
TextButton(
onPressed: ()=>setState(() {
conditions[index]["edit"] = ! conditions[index]["edit"];
}),
child: Text(
"Editar",
style: TextStyle(fontSize: 16, letterSpacing: 0),
)
)
]),
if (conditions[index]["edit"]) CustomTextField(
hint: "5€",
numeric: true,
)
]
)
),
)
],
)
),
Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
color: theme.getColorFor(ThemeCode.backgroundPrimary),
borderRadius: BorderRadius.all(Radius.circular(24))
),
child: Column(
spacing: 24,
children: [
Text(
"Comercios bloqueados",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0),
),
Column(
spacing: 8,
children: List<Widget>.generate(blocks.length, (int index) =>
CheckboxListTile(
value: blocks[index]["active"],
onChanged: (_) => setState(() {
blocks[index]["active"] = !blocks[index]["active"];
}),
title: Text(
blocks[index]["title"],
style: TextStyle(fontSize: 16, letterSpacing: 0),
),
checkboxScaleFactor: 2,
controlAffinity: ListTileControlAffinity.leading,
activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
contentPadding: EdgeInsets.zero,
)
)
)
],
),
)
], ],
); );
} }
} }

105
modules/home/lib/src/presentation/lock_card_screen.dart Normal file
View File

@@ -0,0 +1,105 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:home/src/presentation/wallet_management_layout.dart';
import 'package:sf_shared/sf_shared.dart';
class LockCardScreen extends ConsumerWidget{
final Kid kid;
@override
LockCardScreen({
super.key,
required this.kid,
});
@override
Widget build(BuildContext context, WidgetRef ref) {
final theme = ref.watch(themePortProvider);
return WalletManagementLayout(
kid: kid,
children: [Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(24)),
color: theme.getColorFor(ThemeCode.backgroundPrimary)
),
child: Column(
spacing: 24,
children: [
Column(
spacing: 8,
children: [
Align(alignment: Alignment.topLeft, child: Text(
"Bloqueo de tarjeta",
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500, letterSpacing: 0)
)),
Align(alignment: Alignment.topLeft, child: Text(
"Este dato aparecerá en el reloj del peque",
style: TextStyle(fontSize: 14, letterSpacing: 0)
))
],
),
Column(
spacing: 8,
children: [
Align(alignment: Alignment.topLeft, child: Text(
"Este es el mensaje fijado por defecto:",
style: TextStyle(fontSize: 16, letterSpacing: 0)
)),
Align(alignment: Alignment.topLeft, child: Text(
"\"De momento hemos bloqueado el dinero del reloj\"",
style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500, letterSpacing: 0)
))
],
),
Column(
spacing: 8,
children: [
Text(
"Escribir mensaje a ${kid.name} del motivo del bloqueo",
style: TextStyle(fontSize: 14, letterSpacing: 0),
),
CustomTextField(
hint: "Escribe tu mensaje",
lines: 4,
length: 150,
),
Row(
spacing: 4,
children: [
Icon(Icons.info_outline, size: 16),
Text("Máximo 150 caracteres", style: TextStyle(fontSize: 14, letterSpacing: 0))
],
)
],
)
],
),
)],
footer: Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration(
color: theme.getColorFor(ThemeCode.backgroundPrimary),
borderRadius: BorderRadius.only(topRight: Radius.circular(24), topLeft: Radius.circular(24))
),
child: Column(
spacing: 16,
children: [
PrimaryButton(
onPressed: ()=>{Navigator.pop(context)},
text: "Enviar mensaje y bloquear",
color: theme.getColorFor(ThemeCode.buttonPrimary),
),
TextButton(
style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
onPressed: ()=>Navigator.pop(context),
child: Text("Cancelar", style: TextStyle(fontSize: 18))
)
],
),
)
);
}
}

99
modules/home/lib/src/presentation/wage_screen.dart
View File

@@ -34,13 +34,10 @@ class WageScreen extends ConsumerWidget {
child: Column( child: Column(
spacing: 10, spacing: 10,
children: [ children: [
FilledButton( PrimaryButton(
onPressed: () => {}, onPressed: () => {},
child: Container( text: "Activar paga automática",
width: double.infinity, color: theme.getColorFor(ThemeCode.buttonPrimary)
padding: EdgeInsets.all(20),
child: Center(child: Text("Activar paga automática")),
),
), ),
TextButton(onPressed: () => {}, child: Text("Cancelar")), TextButton(onPressed: () => {}, child: Text("Cancelar")),
], ],
@@ -56,9 +53,11 @@ class WageScreen extends ConsumerWidget {
child: Column( child: Column(
spacing: 10, spacing: 10,
children: [ children: [
Text( Align(alignment: Alignment.topLeft,
"Paga automática", child: Text(
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), "Paga automática",
style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20),
),
), ),
CustomTextField( CustomTextField(
numeric: true, numeric: true,
@@ -74,16 +73,21 @@ class WageScreen extends ConsumerWidget {
color: theme.getColorFor(ThemeCode.backgroundPrimary), color: theme.getColorFor(ThemeCode.backgroundPrimary),
borderRadius: BorderRadius.all(Radius.circular(20)), borderRadius: BorderRadius.all(Radius.circular(20)),
), ),
padding: EdgeInsets.all(10), padding: EdgeInsets.all(24),
child: Column( child: Column(
spacing: 10, spacing: 10,
children: [ children: [
Text( Align(alignment: Alignment.topLeft,
"Frecuencia", child: Text(
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), "Frecuencia",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
)
),
Align(alignment: Alignment.topLeft,
child: Text("Cuándo se envía el dinero"),
), ),
Text("Cuándo se envía el dinero"),
CheckboxListTile( CheckboxListTile(
contentPadding: EdgeInsets.zero,
title: Text('Semanal'), title: Text('Semanal'),
controlAffinity: ListTileControlAffinity.leading, controlAffinity: ListTileControlAffinity.leading,
value: frequence == "weekly", value: frequence == "weekly",
@@ -95,6 +99,7 @@ class WageScreen extends ConsumerWidget {
activeColor: theme.getColorFor(ThemeCode.buttonPrimary), activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
), ),
CheckboxListTile( CheckboxListTile(
contentPadding: EdgeInsets.zero,
title: Text('Cada dos semanas'), title: Text('Cada dos semanas'),
controlAffinity: ListTileControlAffinity.leading, controlAffinity: ListTileControlAffinity.leading,
value: frequence == "biweekly", value: frequence == "biweekly",
@@ -106,6 +111,7 @@ class WageScreen extends ConsumerWidget {
activeColor: theme.getColorFor(ThemeCode.buttonPrimary), activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
), ),
CheckboxListTile( CheckboxListTile(
contentPadding: EdgeInsets.zero,
title: Text('Mensual'), title: Text('Mensual'),
controlAffinity: ListTileControlAffinity.leading, controlAffinity: ListTileControlAffinity.leading,
value: frequence == "monthly", value: frequence == "monthly",
@@ -116,38 +122,26 @@ class WageScreen extends ConsumerWidget {
}, },
activeColor: theme.getColorFor(ThemeCode.buttonPrimary), activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
), ),
Container( CustomDropdown(
width: double.infinity, items: [
child: DropdownMenu( Text("Lunes"),
label: Text("Día de la semana"), Text("Martes"),
initialSelection: "Domingo", Text("Miércoles"),
dropdownMenuEntries: List<DropdownMenuEntry>.generate(7, ( Text("Jueves"),
int index, Text("Viernes"),
) { Text("Sábado"),
final days = [ Text("Domingo"),
"Lunes", ],
"Martes", values: ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"],
"Miércoles", onChanged: (value)=> {},
"Jueves", hint: "Día de la semana",
"Viernes",
"Sábado",
"Domingo",
];
return DropdownMenuEntry(
value: days[index],
label: days[index],
);
}),
),
), ),
DropdownMenu( CustomDropdown(
label: Text("Hora del día"), hint: "Hora del día",
initialSelection: 9, items: List<Widget>.generate(24,(int index){
dropdownMenuEntries: List<DropdownMenuEntry>.generate(24, ( return Text("$index:00");
int index,
) {
return DropdownMenuEntry(value: index, label: "$index:00");
}), }),
onChanged: (value)=> {},
), ),
CustomTextField( CustomTextField(
lines: 3, lines: 3,
@@ -168,16 +162,21 @@ class WageScreen extends ConsumerWidget {
color: theme.getColorFor(ThemeCode.backgroundPrimary), color: theme.getColorFor(ThemeCode.backgroundPrimary),
borderRadius: BorderRadius.all(Radius.circular(20)), borderRadius: BorderRadius.all(Radius.circular(20)),
), ),
padding: EdgeInsets.all(10), padding: EdgeInsets.all(24),
child: Column( child: Column(
spacing: 10, spacing: 10,
children: [ children: [
Text( Align(alignment: Alignment.topLeft,
"Condiciones", child: Text(
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), "Condiciones",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
),
Align(alignment: Alignment.topLeft,
child: Text("Este dato aparecerá en el reloj del peque"),
), ),
Text("Este dato aparecerá en el reloj del peque"),
CheckboxListTile( CheckboxListTile(
contentPadding: EdgeInsets.zero,
title: Text('Sólo si cumple límites semanales'), title: Text('Sólo si cumple límites semanales'),
controlAffinity: ListTileControlAffinity.leading, controlAffinity: ListTileControlAffinity.leading,
value: conditions["weeklyLimits"], value: conditions["weeklyLimits"],
@@ -189,6 +188,7 @@ class WageScreen extends ConsumerWidget {
activeColor: theme.getColorFor(ThemeCode.buttonPrimary), activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
), ),
CheckboxListTile( CheckboxListTile(
contentPadding: EdgeInsets.zero,
title: Text('Sólo si no ha tenido incidencias'), title: Text('Sólo si no ha tenido incidencias'),
controlAffinity: ListTileControlAffinity.leading, controlAffinity: ListTileControlAffinity.leading,
value: conditions["incidences"], value: conditions["incidences"],
@@ -200,6 +200,7 @@ class WageScreen extends ConsumerWidget {
activeColor: theme.getColorFor(ThemeCode.buttonPrimary), activeColor: theme.getColorFor(ThemeCode.buttonPrimary),
), ),
CheckboxListTile( CheckboxListTile(
contentPadding: EdgeInsets.zero,
title: Text('Pausar durante vacaciones'), title: Text('Pausar durante vacaciones'),
controlAffinity: ListTileControlAffinity.leading, controlAffinity: ListTileControlAffinity.leading,
value: conditions["holidays"], value: conditions["holidays"],

32
modules/home/lib/src/presentation/wallet_item.dart
View File

@@ -93,7 +93,13 @@ class WalletItem extends ConsumerWidget{
SizedBox( SizedBox(
width: 169, width: 169,
height: 60, height: 60,
child: FilledButton( child: PrimaryButton(
onPressed: ()=>Navigator.push(context, MaterialPageRoute(builder: (_)=>DepositScreen(kid: kid))),
text: "+ Añadir dinero",
color: theme.getColorFor(ThemeCode.buttonSecondary),
radius: 12,
)
/*FilledButton(
onPressed: ()=>Navigator.push(context, MaterialPageRoute(builder: (_)=>DepositScreen(kid: kid))), onPressed: ()=>Navigator.push(context, MaterialPageRoute(builder: (_)=>DepositScreen(kid: kid))),
style: ButtonStyle( style: ButtonStyle(
shape: WidgetStateProperty.all<RoundedRectangleBorder>( shape: WidgetStateProperty.all<RoundedRectangleBorder>(
@@ -113,7 +119,7 @@ class WalletItem extends ConsumerWidget{
) )
) )
) )
) )*/
) )
]) ])
] ]
@@ -138,7 +144,8 @@ class PhotoDialog extends ConsumerWidget{
decoration: BoxDecoration( decoration: BoxDecoration(
color: theme.getColorFor(ThemeCode.backgroundPrimary), color: theme.getColorFor(ThemeCode.backgroundPrimary),
borderRadius: BorderRadius.only( borderRadius: BorderRadius.only(
topRight: Radius.circular(16), topLeft: Radius.circular(16)) topRight: Radius.circular(16), topLeft: Radius.circular(16)
)
), ),
child: Column( child: Column(
spacing: 24, spacing: 24,
@@ -146,21 +153,10 @@ class PhotoDialog extends ConsumerWidget{
Column( Column(
spacing: 16, spacing: 16,
children: [ children: [
FilledButton( PrimaryButton(
onPressed: () => {}, onPressed: ()=>{},
child: Expanded( text: "Cámara",
child: Center( color: theme.getColorFor(ThemeCode.buttonPrimary)
child: Text(
"Cámara",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w500,
color: theme.getColorFor(
ThemeCode.textSecondary)
)
)
)
)
), ),
OutlinedButton( OutlinedButton(
onPressed: () => {}, onPressed: () => {},

4
modules/notifications/lib/src/presentation/activity_screen.dart
View File

@@ -21,7 +21,7 @@ class ActivityScreen extends ConsumerWidget {
final content = [ final content = [
Text( Text(
"Movimientos recientes", "Movimientos recientes",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30), style: TextStyle(fontWeight: FontWeight.w500, fontSize: 24),
), ),
Row( Row(
spacing: 20, spacing: 20,
@@ -54,4 +54,4 @@ class ActivityScreen extends ConsumerWidget {
), ),
); );
} }
} }

20
modules/notifications/lib/src/presentation/alert_screen.dart
View File

@@ -29,21 +29,29 @@ class AlertScreenState extends ConsumerState<AlertScreen> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final theme = ref.watch(themePortProvider); final theme = ref.watch(themePortProvider);
return Scaffold( return SafeArea(
backgroundColor: theme.getColorFor(ThemeCode.backgroundSecondary), child: Container(
body: Container( color: theme.getColorFor(ThemeCode.backgroundSecondary),
margin: EdgeInsets.all(30), margin: EdgeInsets.symmetric(horizontal: 24, vertical: 16),
child: Column( child: Column(
spacing: 32,
children: [ children: [
Row( Row(
children: [ children: [
Text("Alertas"), Text(
"Alertas",
style: TextStyle(
fontSize: 24,
letterSpacing: 0,
fontWeight: FontWeight.w500
)
),
Spacer(), Spacer(),
TextButton( TextButton(
onPressed: () => setState(() { onPressed: () => setState(() {
edit = !edit; edit = !edit;
}), }),
child: Text("Editar"), child: Text("Editar", style: TextStyle(fontSize: 16, letterSpacing: 0)),
), ),
], ],
), ),

13
modules/profile/lib/src/presentation/profile_screen.dart
View File

@@ -20,9 +20,16 @@ class ProfileScreen extends ConsumerWidget {
{"type": "lock"}, {"type": "lock"},
]; ];
final kids = [
Kid(name: "Ana", balance: 15, savings: 5),
Kid(name: "Carlos", balance: 15, savings: 5)
];
final name = "Juan"; final name = "Juan";
final total = 95.03; final total = 95.03;
final available = 44.09; final available = 44.09;
final savings = 4.16;
final savingsPlan = 30.0;
final content = [ final content = [
Row( Row(
@@ -54,10 +61,10 @@ class ProfileScreen extends ConsumerWidget {
LineGraph(), LineGraph(),
DepositBlock(max: 150 - total), DepositBlock(max: 150 - total),
Container( Container(
padding: EdgeInsets.all(20), padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
color: theme.getColorFor(ThemeCode.backgroundPrimary), color: theme.getColorFor(ThemeCode.backgroundPrimary),
borderRadius: BorderRadius.all(Radius.circular(20)),
), ),
child: TextButton( child: TextButton(
onPressed: ()=>{}, onPressed: ()=>{},
@@ -98,7 +105,7 @@ class ProfileScreen extends ConsumerWidget {
children: [ children: [
DecoratedBox( DecoratedBox(
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(30)), borderRadius: const BorderRadius.only(bottomRight: Radius.circular(24), bottomLeft: Radius.circular(24)),
color: Color(0xFF4B4B4B), color: Color(0xFF4B4B4B),
), ),
child: SizedBox(width: double.infinity, height: 200), child: SizedBox(width: double.infinity, height: 200),

327
modules/profile/lib/src/settings_screen.dart
View File

@@ -41,7 +41,7 @@ class SettingsScreen extends ConsumerWidget {
), ),
), ),
Container( Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10), padding: EdgeInsets.all(24),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)), borderRadius: BorderRadius.all(Radius.circular(20)),
color: theme.getColorFor(ThemeCode.backgroundPrimary), color: theme.getColorFor(ThemeCode.backgroundPrimary),
@@ -57,15 +57,15 @@ class SettingsScreen extends ConsumerWidget {
), ),
Spacer(), Spacer(),
TextButton(onPressed: () => {}, child: Text("Editar wallet")), TextButton(onPressed: () => {}, child: Text("Editar wallet")),
Icon(Icons.attach_money), Icon(Icons.account_balance, size: 24),
], ],
), ),
Text(relation), Align(alignment: Alignment.centerLeft, child: Text(relation)),
], ],
), ),
), ),
Container( Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10), padding: EdgeInsets.all(24),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)), borderRadius: BorderRadius.all(Radius.circular(20)),
color: theme.getColorFor(ThemeCode.backgroundPrimary), color: theme.getColorFor(ThemeCode.backgroundPrimary),
@@ -73,7 +73,6 @@ class SettingsScreen extends ConsumerWidget {
child: Column( child: Column(
children: [ children: [
Row( Row(
spacing: 10,
children: [ children: [
Text( Text(
"Datos personales", "Datos personales",
@@ -83,47 +82,56 @@ class SettingsScreen extends ConsumerWidget {
TextButton(onPressed: () => {}, child: Text("Editar")), TextButton(onPressed: () => {}, child: Text("Editar")),
], ],
), ),
Text.rich( Align(
TextSpan( alignment: Alignment.centerLeft,
text: "Nombre: ", child: Text.rich(
style: TextStyle(fontWeight: FontWeight.bold), TextSpan(
children: [ text: "Nombre: ",
TextSpan( style: TextStyle(fontWeight: FontWeight.bold),
text: fullName, children: [
style: TextStyle(fontWeight: FontWeight.normal), TextSpan(
), text: fullName,
], style: TextStyle(fontWeight: FontWeight.normal),
), ),
],
),
)
), ),
Text.rich( Align(
TextSpan( alignment: Alignment.centerLeft,
text: "Fecha de nacimiento: ", child: Text.rich(
style: TextStyle(fontWeight: FontWeight.bold), TextSpan(
children: [ text: "Fecha de nacimiento: ",
TextSpan( style: TextStyle(fontWeight: FontWeight.bold),
text: birthDate, children: [
style: TextStyle(fontWeight: FontWeight.normal), TextSpan(
), text: birthDate,
], style: TextStyle(fontWeight: FontWeight.normal),
), ),
],
),
)
), ),
Text.rich( Align(
TextSpan( alignment: Alignment.centerLeft,
text: "Familiar: ", child: Text.rich(
style: TextStyle(fontWeight: FontWeight.bold), TextSpan(
children: [ text: "Familiar: ",
TextSpan( style: TextStyle(fontWeight: FontWeight.bold),
text: relation, children: [
style: TextStyle(fontWeight: FontWeight.normal), TextSpan(
), text: relation,
], style: TextStyle(fontWeight: FontWeight.normal),
), ),
],
),
)
), ),
], ],
), ),
), ),
Container( Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10), padding: EdgeInsets.all(24),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)), borderRadius: BorderRadius.all(Radius.circular(20)),
color: theme.getColorFor(ThemeCode.backgroundPrimary), color: theme.getColorFor(ThemeCode.backgroundPrimary),
@@ -131,7 +139,6 @@ class SettingsScreen extends ConsumerWidget {
child: Column( child: Column(
children: [ children: [
Row( Row(
spacing: 10,
children: [ children: [
Text( Text(
"Dirección", "Dirección",
@@ -141,47 +148,56 @@ class SettingsScreen extends ConsumerWidget {
TextButton(onPressed: () => {}, child: Text("Editar")), TextButton(onPressed: () => {}, child: Text("Editar")),
], ],
), ),
Text.rich( Align(
TextSpan( alignment: Alignment.centerLeft,
text: "Dirección: ", child: Text.rich(
style: TextStyle(fontWeight: FontWeight.bold), TextSpan(
children: [ text: "Dirección: ",
TextSpan( style: TextStyle(fontWeight: FontWeight.bold),
text: address, children: [
style: TextStyle(fontWeight: FontWeight.normal), TextSpan(
), text: address,
], style: TextStyle(fontWeight: FontWeight.normal),
),
],
),
), ),
), ),
Text.rich( Align(
TextSpan( alignment: Alignment.centerLeft,
text: "País: ", child: Text.rich(
style: TextStyle(fontWeight: FontWeight.bold), TextSpan(
children: [ text: "País: ",
TextSpan( style: TextStyle(fontWeight: FontWeight.bold),
text: country, children: [
style: TextStyle(fontWeight: FontWeight.normal), TextSpan(
), text: country,
], style: TextStyle(fontWeight: FontWeight.normal),
),
],
),
), ),
), ),
Text.rich( Align(
TextSpan( alignment: Alignment.centerLeft,
text: "Nacionalidad: ", child: Text.rich(
style: TextStyle(fontWeight: FontWeight.bold), TextSpan(
children: [ text: "Nacionalidad: ",
TextSpan( style: TextStyle(fontWeight: FontWeight.bold),
text: nationality, children: [
style: TextStyle(fontWeight: FontWeight.normal), TextSpan(
), text: nationality,
], style: TextStyle(fontWeight: FontWeight.normal),
),
],
),
), ),
), )
], ],
), ),
), ),
Container( Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10), padding: EdgeInsets.all(24),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)), borderRadius: BorderRadius.all(Radius.circular(20)),
color: theme.getColorFor(ThemeCode.backgroundPrimary), color: theme.getColorFor(ThemeCode.backgroundPrimary),
@@ -189,7 +205,6 @@ class SettingsScreen extends ConsumerWidget {
child: Column( child: Column(
children: [ children: [
Row( Row(
spacing: 10,
children: [ children: [
Text( Text(
"Usuario", "Usuario",
@@ -199,42 +214,46 @@ class SettingsScreen extends ConsumerWidget {
TextButton(onPressed: () => {}, child: Text("Editar")), TextButton(onPressed: () => {}, child: Text("Editar")),
], ],
), ),
Text.rich( Align(
TextSpan( alignment: Alignment.centerLeft,
text: "Correo: ", child: Text.rich(
style: TextStyle(fontWeight: FontWeight.bold), TextSpan(
children: [ text: "Correo: ",
TextSpan( style: TextStyle(fontWeight: FontWeight.bold),
text: email, children: [
style: TextStyle(fontWeight: FontWeight.normal), TextSpan(
), text: email,
], style: TextStyle(fontWeight: FontWeight.normal),
),
],
),
), ),
), ),
Text.rich( Align(
TextSpan( alignment: Alignment.centerLeft,
text: "Teléfono: ", child: Text.rich(
style: TextStyle(fontWeight: FontWeight.bold), TextSpan(
children: [ text: "Teléfono: ",
TextSpan( style: TextStyle(fontWeight: FontWeight.bold),
text: phone, children: [
style: TextStyle(fontWeight: FontWeight.normal), TextSpan(
), text: phone,
], style: TextStyle(fontWeight: FontWeight.normal),
),
],
),
), ),
), )
], ],
), ),
), ),
Container( Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10), padding: EdgeInsets.all(24),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)), borderRadius: BorderRadius.all(Radius.circular(20)),
color: theme.getColorFor(ThemeCode.backgroundPrimary), color: theme.getColorFor(ThemeCode.backgroundPrimary),
), ),
child: Row( child: Row(
spacing: 10,
children: [ children: [
Text( Text(
"Cambio de contraseña", "Cambio de contraseña",
@@ -246,7 +265,7 @@ class SettingsScreen extends ConsumerWidget {
), ),
), ),
Container( Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10), padding: EdgeInsets.all(24),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)), borderRadius: BorderRadius.all(Radius.circular(20)),
color: theme.getColorFor(ThemeCode.backgroundPrimary), color: theme.getColorFor(ThemeCode.backgroundPrimary),
@@ -254,7 +273,6 @@ class SettingsScreen extends ConsumerWidget {
child: Column( child: Column(
children: [ children: [
Row( Row(
spacing: 10,
children: [ children: [
Text( Text(
"Método de pago", "Método de pago",
@@ -269,7 +287,26 @@ class SettingsScreen extends ConsumerWidget {
), ),
), ),
Container( Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10), padding: EdgeInsets.all(24),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: theme.getColorFor(ThemeCode.backgroundPrimary),
),
child: Column(
spacing: 24,
children: [
Text(
"Retirar y reembolsar dinero del wallet",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
Text("Para transferirte el saldo a tu cuenta necesitamos tu IBAN y algunos datos básics. Así nos aseguramos de que la transferencia sea segura y rápida."),
CustomTextField(label: "Nombre y Apellidos", hint: "******"),
CustomTextField(label: "IBAN con número español", hint: "******")
],
),
),
Container(
padding: EdgeInsets.all(24),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)), borderRadius: BorderRadius.all(Radius.circular(20)),
color: theme.getColorFor(ThemeCode.backgroundTertiary), color: theme.getColorFor(ThemeCode.backgroundTertiary),
@@ -277,7 +314,6 @@ class SettingsScreen extends ConsumerWidget {
child: Column( child: Column(
children: [ children: [
Row( Row(
spacing: 10,
children: [ children: [
Text( Text(
"Plan anual", "Plan anual",
@@ -287,15 +323,81 @@ class SettingsScreen extends ConsumerWidget {
TextButton(onPressed: () => {}, child: Text("Cambiar Plan")), TextButton(onPressed: () => {}, child: Text("Cambiar Plan")),
], ],
), ),
Text("Sin permanencia"), Align(
Text("Llamadas y datos ilimitados"), alignment: Alignment.centerLeft,
Text("2 meses gratis"), child: Row(
spacing: 8,
children: [
Icon(Icons.check, size: 24),
Text(
"Sin permanencia",
style: TextStyle(fontSize: 16, letterSpacing: 0),
),
],
)
),
Align(
alignment: Alignment.centerLeft,
child: Row(
spacing: 8,
children: [
Icon(Icons.check, size: 24),
Text(
"Llamadas y datos ilimitados",
style: TextStyle(fontSize: 16, letterSpacing: 0),
),
],
)
),
Align(
alignment: Alignment.centerLeft,
child: Row(
spacing: 8,
children: [
Icon(Icons.check, size: 24),
Text(
"2 meses gratis",
style: TextStyle(fontSize: 16, letterSpacing: 0),
),
],
)
),
], ],
), ),
), ),
Column(
TextButton(onPressed: () => {}, child: Text("Contáctanos")), spacing: 16,
TextButton(onPressed: () => {}, child: Text("Preguntas frecuentes")), children: [
Align(
alignment: Alignment.topLeft,
child: TextButton(
style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
onPressed: () => {},
child: Row(
spacing: 4,
children: [
Icon(Icons.contact_support_outlined, size: 24),
Text("Contáctanos")
],
)
)
),
Align(
alignment: Alignment.topLeft,
child: TextButton(
style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.all(0))),
onPressed: () => {},
child: Row(
spacing: 4,
children: [
Icon(Icons.contact_support_outlined, size: 24),
Text("Preguntas frecuentes")
],
)
)
),
],
)
]; ];
return Scaffold( return Scaffold(
@@ -304,7 +406,7 @@ class SettingsScreen extends ConsumerWidget {
children: [ children: [
DecoratedBox( DecoratedBox(
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(30)), borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(24), bottomRight: Radius.circular(24)),
color: Color(0xFF4B4B4B), color: Color(0xFF4B4B4B),
), ),
child: SizedBox(width: double.infinity, height: 200), child: SizedBox(width: double.infinity, height: 200),
@@ -336,13 +438,10 @@ class SettingsScreen extends ConsumerWidget {
), ),
child: Column( child: Column(
children: [ children: [
FilledButton( PrimaryButton(
onPressed: () => {}, onPressed: () => {},
child: Container( text: "Guardar cambios",
width: double.infinity, color: theme.getColorFor(ThemeCode.buttonPrimary)
padding: EdgeInsets.all(20),
child: Center(child: Text("Guardar cambios")),
),
), ),
TextButton( TextButton(
onPressed: () => Navigator.pop(context), onPressed: () => Navigator.pop(context),

6
packages/design_system/lib/design_system.dart
View File

@@ -4,4 +4,8 @@ export 'src/steps/step_indicator.dart';
export 'src/texts/money_text.dart'; export 'src/texts/money_text.dart';
export 'src/progress_bars/progress_bar.dart'; export 'src/progress_bars/progress_bar.dart';
export 'src/inputs/textfields.dart'; export 'src/inputs/textfields.dart';
export 'src/snackbars/snackbar.dart'; export 'src/snackbars/snackbar.dart';
export 'src/buttons/primary_button.dart';
export 'src/buttons/secondary_button.dart';
export 'src/buttons/custom_text_button.dart';
export 'src/dropdowns/dropdown.dart';

39
packages/design_system/lib/src/buttons/custom_text_button.dart Normal file
View File

@@ -0,0 +1,39 @@
import 'package:flutter/material.dart';
class CustomTextButton extends StatelessWidget{
final onPressed;
final String text;
final double size;
final FontWeight weight;
final Color? color;
@override
const CustomTextButton({
super.key,
required this.onPressed,
required this.text,
this.size = 14,
this.weight = FontWeight.normal,
this.color
});
@override
Widget build(BuildContext context) {
return TextButton(
style: ButtonStyle(padding: WidgetStatePropertyAll(EdgeInsets.zero)),
onPressed: onPressed,
child: Text(
text,
style: TextStyle(
fontSize: size,
fontWeight: weight,
letterSpacing: 0,
color: color?? Color(0xFF4B4B4B),
decoration: TextDecoration.underline
),
)
);
}
}

54
packages/design_system/lib/src/buttons/primary_button.dart Normal file
View File

@@ -0,0 +1,54 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
class PrimaryButton extends StatelessWidget{
final onPressed;
final String text;
final Color color;
final double height;
final double? width;
final double size;
final double radius;
final double padding;
PrimaryButton({
required this.onPressed,
required this.text,
required this.color,
this.height = 60,
this.width,
this.size = 18,
this.radius = 18,
this.padding = 0,
});
@override
Widget build(BuildContext context) {
return FilledButton(
style: ButtonStyle(
backgroundColor: WidgetStatePropertyAll<Color>(color),
padding: WidgetStatePropertyAll(EdgeInsets.symmetric(horizontal: padding)),
shape: WidgetStatePropertyAll(RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(radius)),
)),
),
onPressed: onPressed,
child: SizedBox(
width: width,
height: height,
child: Center(child: Text(
text,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: size,
fontWeight: FontWeight.w500,
letterSpacing: 0,
color: Colors.white//theme.getColorFor(ThemeCode.textSecondary)
)
))
)
);
}
}

67
packages/design_system/lib/src/buttons/secondary_button.dart Normal file
View File

@@ -0,0 +1,67 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
class SecondaryButton extends StatelessWidget {
final onPressed;
final String? text;
final IconData? icon;
final String? label;
final Color? color;
final double radius;
final double padding;
final double height;
final double? width;
final double? size;
@override
SecondaryButton({
required this.onPressed,
this.text,
this.icon,
this.label,
this.color,
this.radius = 18,
this.padding = 0,
this.height = 60,
this.width,
this.size,
});
@override
Widget build(BuildContext context) {
return OutlinedButton(
style: ButtonStyle(
padding: WidgetStatePropertyAll(EdgeInsets.symmetric(horizontal: padding)),
shape: WidgetStatePropertyAll(RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(radius)),
side: BorderSide(color: Color(0xFF4B4B4B))
)),
),
onPressed: onPressed,
child: SizedBox(
width: width,
height: height,
child: Center(child: text!=null ? Text(
text!,
textAlign: TextAlign.center,
semanticsLabel: label,
style: TextStyle(
fontSize: size ?? 18,
fontWeight: FontWeight.w500,
letterSpacing: 0,
color: Color(0xFF4B4B4B)
)
) : Icon(
icon,
semanticLabel: label,
size: size ?? 24,
color: color ?? Color(0xFF4B4B4B)
))
)
);
}
}

67
packages/design_system/lib/src/dropdowns/dropdown.dart Normal file
View File

@@ -0,0 +1,67 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
class CustomDropdown extends StatelessWidget{
final List<Widget> items;
final values;
final onChanged;
final value;
final String? hint;
final String? label;
final double radius;
final double height;
final double width;
final Color? color;
const CustomDropdown({
super.key,
required this.items,
this.values,
required this.onChanged,
this.value,
this.hint,
this.label,
this.radius = 12,
this.width = double.infinity,
this.height = 70,
this.color
});
@override
Widget build(BuildContext context) {
return Column(
spacing: 8,
children: [
if (label != null) Align(
alignment: Alignment.bottomLeft,
child: Text(
label!,
style: TextStyle(fontSize: 14, letterSpacing: 0),
),
),
SizedBox(
width: width,
height: height,
child: Center(child: DropdownButtonFormField(
dropdownColor: Colors.white,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(radius)),
borderSide: BorderSide(color: color??Color(0xFF4B4B4B))
)
),
//underline: Container(),
initialValue: value,
onChanged: onChanged,
hint: Text(hint??""),
items: List<DropdownMenuItem>.generate(items.length, (int index){
return DropdownMenuItem(value: (values!=null)?values[index]:index, child: items[index]);
})
)),
)
],
) ;
}
}

85
packages/design_system/lib/src/inputs/textfields.dart
View File

@@ -3,7 +3,7 @@ import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
class CustomTextField extends ConsumerStatefulWidget{ class CustomTextField extends StatefulWidget{
bool? showPassword; bool? showPassword;
final bool numeric; final bool numeric;
final String hint; final String hint;
@@ -24,49 +24,60 @@ class CustomTextField extends ConsumerStatefulWidget{
}); });
@override @override
ConsumerState<CustomTextField> createState() => CustomTextFieldState(); State<CustomTextField> createState() => CustomTextFieldState();
} }
class CustomTextFieldState extends ConsumerState<CustomTextField>{ class CustomTextFieldState extends State<CustomTextField>{
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final theme = ref.watch(themePortProvider);
return TextFormField( return Column(
keyboardType: widget.numeric? TextInputType.number : TextInputType.text, spacing: 8,
obscureText: !(widget.showPassword ?? true), children: [
enableSuggestions: widget.showPassword ?? true, ?widget.label == '' ? null : Align(
autocorrect: !(widget.showPassword ?? false), alignment: Alignment.bottomLeft,
style: TextStyle(color: theme.getColorFor(ThemeCode.buttonSecondary)), child: Text(
inputFormatters: widget.numeric? [ widget.label,
FilteringTextInputFormatter.digitsOnly style: TextStyle(fontSize: 14, letterSpacing: 0),
] : [], )
decoration: InputDecoration(
counterText: "",
hintText: widget.hint,
labelText: widget.label,
floatingLabelBehavior: FloatingLabelBehavior.always,
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12)),
borderSide: BorderSide(color: theme.getColorFor(ThemeCode.textPrimary)),
gapPadding: 16
), ),
suffixIcon: widget.showPassword!=null ? IconButton( TextFormField(
icon: Icon(widget.showPassword! keyboardType: widget.numeric? TextInputType.number : TextInputType.text,
? Icons.visibility_off obscureText: !(widget.showPassword ?? true),
: Icons.visibility), enableSuggestions: widget.showPassword ?? true,
onPressed: () { autocorrect: !(widget.showPassword ?? false),
setState(() { style: TextStyle(color: Color(0xFF4B4B4B)),
widget.showPassword = !widget.showPassword!; inputFormatters: widget.numeric? [
}); FilteringTextInputFormatter.digitsOnly
}, ] : [],
) : null, decoration: InputDecoration(
), counterText: "",
minLines: widget.lines ?? 1, hintText: widget.hint,
maxLines: widget.lines ?? 1, //labelText: widget.label,
maxLength: widget.length, //floatingLabelBehavior: FloatingLabelBehavior.always,
onChanged: widget.onChanged ?? (_)=>{}, border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(12)),
borderSide: BorderSide(color: Color(0xFF4B4B4B)),
gapPadding: 16
),
suffixIcon: widget.showPassword!=null ? IconButton(
icon: Icon(widget.showPassword!
? Icons.visibility_off
: Icons.visibility),
onPressed: () {
setState(() {
widget.showPassword = !widget.showPassword!;
});
},
) : null,
),
minLines: widget.lines ?? 1,
maxLines: widget.lines ?? 1,
maxLength: widget.length,
onChanged: widget.onChanged ?? (_)=>{},
)
],
); );
} }
} }

18
packages/design_system/lib/src/progress_bars/progress_bar.dart
View File

@@ -12,15 +12,15 @@ class ProgressBar extends ConsumerWidget{
final Color foregroundColor; final Color foregroundColor;
final Color textColor; final Color textColor;
const ProgressBar( const ProgressBar({
this.max, required this.max,
this.value, required this.value,
this.height, required this.height,
this.textSize, required this.textSize,
this.textSecondarySize, required this.textSecondarySize,
this.backgroundColor, required this.backgroundColor,
this.foregroundColor, required this.foregroundColor,
this.textColor, required this.textColor,}
); );
@override @override

15
packages/design_system/lib/src/snackbars/snackbar.dart
View File

@@ -9,25 +9,24 @@ enum MessageType {
success success
} }
class CustomSnackBar extends ConsumerWidget{ class CustomSnackBar extends StatelessWidget{
final MessageType type; final MessageType? type;
final String message; final String message;
CustomSnackBar({ const CustomSnackBar({
super.key, super.key,
this.type = MessageType.info, this.type,
required this.message, required this.message,
}); });
@override @override
SnackBar build(BuildContext context, WidgetRef ref) { SnackBar build(BuildContext context) {
final theme = ref.watch(themePortProvider);
late final Color foregroundColor; late final Color foregroundColor;
late final Color backgroundColor; late final Color backgroundColor;
late final IconData icon; late final IconData icon;
switch (type){ switch (type??MessageType.info){
case MessageType.info: case MessageType.info:
backgroundColor = Color(0xFFE3EFFD); backgroundColor = Color(0xFFE3EFFD);
foregroundColor = Color(0xFF1F4ECF); foregroundColor = Color(0xFF1F4ECF);
@@ -57,7 +56,7 @@ class CustomSnackBar extends ConsumerWidget{
spacing: 8, spacing: 8,
children: [ children: [
Icon(icon, color: foregroundColor), Icon(icon, color: foregroundColor),
Expanded(child: Text(message, style: TextStyle(color: theme.getColorFor(ThemeCode.textPrimary), fontSize: 14))) Expanded(child: Text(message, style: TextStyle(color: Color(0xFF4B4B4B), fontSize: 14)))
], ],
), ),
); );

9
packages/design_system/lib/src/texts/money_text.dart
View File

@@ -18,11 +18,12 @@ class MoneyText extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final units = text.split(".")[0]; final split = text.contains(".") ? text.split(".") : text.split("€");
final cents = ",${text.split(".")[1]}"; final mainText = split[0];
var secondaryText = text.contains(".") ? ",${split[1]}" : "€${split[1]}";
return Text.rich(TextSpan( return Text.rich(TextSpan(
text: units, text: mainText,
style: TextStyle( style: TextStyle(
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
fontSize: size, fontSize: size,
@@ -31,7 +32,7 @@ class MoneyText extends StatelessWidget {
), ),
children: [ children: [
TextSpan( TextSpan(
text: cents, text: secondaryText,
style: TextStyle( style: TextStyle(
fontWeight: FontWeight.normal, fontWeight: FontWeight.normal,
fontSize: secondarySize ?? size, fontSize: secondarySize ?? size,

2
packages/design_system/pubspec.yaml
View File

@@ -20,12 +20,14 @@ dev_dependencies:
flutter_test: flutter_test:
sdk: flutter sdk: flutter
flutter_lints: ^5.0.0 flutter_lints: ^5.0.0
golden_toolkit: ^0.15.0
# For information on the generic Dart part of this file, see the # For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec # following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter packages. # The following section is specific to Flutter packages.
flutter: flutter:
uses-material-design: true
# To add assets to your package, add an assets section, like this: # To add assets to your package, add an assets section, like this:
# assets: # assets:

201
packages/design_system/test/widget_test.dart Normal file
View File

@@ -0,0 +1,201 @@
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:golden_toolkit/golden_toolkit.dart';
import 'package:design_system/design_system.dart';
void main() {
themePackages();
testGoldens('Step Indicator', (tester) async {
final widget = (int step)=>StepIndicator(max: 3, current: step, color: Colors.blueAccent);
final builder = GoldenBuilder.column()
..addScenario('step -1', widget(-1))
..addScenario('step 0', widget(0))
..addScenario('step 1', widget(1))
..addScenario('step 2', widget(2))
..addScenario('step 3', widget(3))
..addScenario('step 4', widget(4));
await tester.pumpWidgetBuilder(builder.build());
await screenMatchesGolden(tester, 'step_indicator');
});
testGoldens('Progress Bar - Small', (tester) async {
final widget = (double value, double max) => ProgressBar(max: max, value: value, height: 24, textSize: 16, textSecondarySize: 12, backgroundColor: Colors.blueGrey, foregroundColor: Colors.blueAccent, textColor: Colors.black87);
final builder = GoldenBuilder.column()
..addScenario('full', widget(100, 100))
..addScenario('empty', widget(0, 100))
..addScenario('half', widget(75, 150))
..addScenario('overflowing', widget(200, 150))
//..addScenario('negative', widget(-20, 83))
..addScenario('tiny value', widget(2.15, 150));
await tester.pumpWidgetBuilder(builder.build());
await screenMatchesGolden(tester, 'progress_bar_small');
});
testGoldens('Progress Bar - Large', (tester) async {
final widget = (double value, double max) => ProgressBar(max: max, value: value, height: 83, textSize: 40, textSecondarySize: 24, backgroundColor: Colors.blueGrey, foregroundColor: Colors.blueAccent, textColor: Colors.black87);
final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1)
..addScenario('full', widget(100, 100))
..addScenario('empty', widget(0, 100))
..addScenario('half', widget(75, 150))
..addScenario('overflowing', widget(200, 150))
..addScenario('tiny value', widget(2.15, 150));
await tester.pumpWidgetBuilder(builder.build());
await screenMatchesGolden(tester, 'progress_bar_large');
});
testGoldens('Text Field', (tester) async {
final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1)
..addScenario('basic', SizedBox(height: 70, width: 250, child: CustomTextField()))
..addScenario('hint', SizedBox(height: 70, width: 250, child: CustomTextField(hint: "type something")))
..addScenario('label', SizedBox(height: 100, width: 250, child: CustomTextField(hint: "type something", label: "text input")))
..addScenario('numeric', SizedBox(height: 70, width: 250, child: CustomTextField(numeric: true)))
..addScenario('password', SizedBox(height: 70, width: 250, child: CustomTextField(showPassword: false)))
..addScenario('multiline', SizedBox(height: 200, width: 250, child: CustomTextField(lines: 4)));
await tester.pumpWidgetBuilder(builder.build());
await screenMatchesGolden(tester, 'textfield');
});
testGoldens('Primary Button', (tester) async {
final widget = ({onPressed, text}) => SizedBox(
height: 70, width: 250,
child:PrimaryButton(onPressed: onPressed, text: text, color: Colors.blueAccent)
);
final builder = GoldenBuilder.grid(columns: 2, widthToHeightRatio: 1)
..addScenario('empty', SizedBox(height: 70, width: 250, child: PrimaryButton(onPressed: ()=>{}, text: "", color: Colors.blueAccent)))
..addScenario('basic', SizedBox(height: 70, width: 250, child: PrimaryButton(onPressed: ()=>{}, text: "press me", color: Colors.blueAccent)))
..addScenario('round', SizedBox(height: 70, width: 250, child: PrimaryButton(onPressed: ()=>{}, radius: 100, text: "press me", color: Colors.blueAccent)))
..addScenario('small', SizedBox(height: 70, width: 250, child: PrimaryButton(onPressed: ()=>{}, width: 100, text: "press me", color: Colors.blueAccent)));
await tester.pumpWidgetBuilder(builder.build());
await screenMatchesGolden(tester, 'primary_button');
});
testGoldens('Text Button', (tester) async {
final tapTarget = Key("tap-target");
final builder = GoldenBuilder.column()
..addScenario('empty', CustomTextButton(onPressed: ()=>{}, text: ""))
..addScenario('basic', CustomTextButton(onPressed: ()=>{}, text: "press me"))
..addScenario('tapped', CustomTextButton(onPressed: ()=>{}, text: "press me", key: tapTarget))
..addScenario('large text', CustomTextButton(onPressed: ()=>{}, text: "press me", size: 40, weight: FontWeight.w500))
..addScenario('small text', CustomTextButton(onPressed: ()=>{}, text: "press me", size: 10))
..addScenario('colored', CustomTextButton(onPressed: ()=>{}, text: "press me", color: Colors.blueAccent));
await tester.pumpWidgetBuilder(builder.build());
await tester.tap(find.byKey(tapTarget));
await tester.pump();
await screenMatchesGolden(tester, 'text_button');
});
testGoldens('Money Text', (tester) async {
final builder = GoldenBuilder.column()
..addScenario('basic', MoneyText(text: "29.13€", size: 20, color: Colors.blueAccent))
..addScenario('without cents', MoneyText(text: "50€", size: 20, color: Colors.blueAccent))
..addScenario('different sizes', MoneyText(text: "29.13€", size: 30, secondarySize: 15, color: Colors.blueAccent))
..addScenario('different sizes without cents', MoneyText(text: "50€", size: 30, secondarySize: 15, color: Colors.blueAccent));
await tester.pumpWidgetBuilder(builder.build());
await screenMatchesGolden(tester, 'money_text');
});
testGoldens('Secondary Button', (tester) async {
final widget = ({onPressed, text}) => SizedBox(
height: 70, width: 250,
child:SecondaryButton(onPressed: onPressed, text: text)
);
final builder = GoldenBuilder.grid(columns: 3, widthToHeightRatio: 1)
..addScenario('empty', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, text: "")))
..addScenario('text', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, text: "press me")))
..addScenario('icon', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, icon: Icons.account_circle_outlined)))
..addScenario('colored', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, text: "press me", color: Colors.blueAccent,)))
..addScenario('small', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, width: 100, text: "press me")))
..addScenario('round', SizedBox(height: 70, width: 250, child:SecondaryButton(onPressed: ()=>{}, radius: 100, text: "press me", color: Colors.blueAccent,)));
await tester.pumpWidgetBuilder(builder.build());
await screenMatchesGolden(tester, 'secondary_button');
});
final snackbarTest = ({message, type, testName}) {
testGoldens('Snackbar $testName', (tester) async {
const Key tapTarget = Key('tap-target');
final widget = () =>
SizedBox(
width: 800,
height: 600,
child: MaterialApp(
home: Scaffold(
body: Builder(
builder: (BuildContext context) {
return GestureDetector(
onTap: () {
ScaffoldMessenger.of(context).showSnackBar(
CustomSnackBar(
message: message,
type: type,
).build(context)
);
},
behavior: HitTestBehavior.opaque,
key: tapTarget,
);
}
),
),
),
);
final builder = DeviceBuilder()
..overrideDevicesForAllScenarios(devices: [
Device(size: Size(750, 550), name: 'base')
])
..addScenario(name: testName, widget: widget());
await tester.pumpWidgetBuilder(builder.build());
await tester.tap(find.byKey(tapTarget));
await screenMatchesGolden(tester, 'snackbar/$testName');
});
};
final shortText = "Mensaje de prueba";
final longText = "Mensaje de prueba largo para comprobar los casos en los que el texto ocupa varias líneas";
snackbarTest(message: "", type: null, testName: "default_empty");
snackbarTest(message: shortText, type: null, testName: "default");
snackbarTest(message: longText, type: null, testName: "default_long_text");
snackbarTest(message: "", type: MessageType.info, testName: "info_empty");
snackbarTest(message: shortText, type: MessageType.info, testName: "info");
snackbarTest(message: longText, type: MessageType.info, testName: "info_long_text");
snackbarTest(message: "", type: MessageType.success, testName: "success_empty");
snackbarTest(message: shortText, type: MessageType.success, testName: "success");
snackbarTest(message: longText, type: MessageType.success, testName: "success_long_text");
snackbarTest(message: "", type: MessageType.warning, testName: "warning_empty");
snackbarTest(message: shortText, type: MessageType.warning, testName: "warning");
snackbarTest(message: longText, type: MessageType.warning, testName: "warning_long_text");
snackbarTest(message: "", type: MessageType.error, testName: "error_empty");
snackbarTest(message: shortText, type: MessageType.error, testName: "error");
snackbarTest(message: longText, type: MessageType.error, testName: "error_long_text");
testGoldens('Dropdown', (tester) async {
final List<Widget> emptyList = [];
final List<Widget> shortList = [Text("A"), Text("B"), Text("C")];
final builder = GoldenBuilder.column()
..addScenario('empty', CustomDropdown(items: emptyList, onChanged: (_)=>{}, width: 200))
..addScenario('initial value', CustomDropdown(items: shortList, value: 1, onChanged: (_)=>{}, width: 300))
..addScenario('hint', CustomDropdown(items: shortList, hint: "choose an option", onChanged: (_)=>{}))
..addScenario('label', CustomDropdown(items: shortList, label: "select", onChanged: (_)=>{}, width: 200));
await tester.pumpWidgetBuilder(builder.build());
await screenMatchesGolden(tester, 'dropdown');
});
}

4
packages/sf_shared/lib/sf_shared.dart
View File

@@ -1,7 +1,9 @@
export 'src/models/kid.dart'; export 'src/models/kid.dart';
export 'src/models/task.dart';
export 'src/models/savings_goal.dart';
export 'src/widgets/line_graph.dart'; export 'src/widgets/line_graph.dart';
export 'src/widgets/deposit_block.dart'; export 'src/widgets/deposit_block.dart';
export 'src/screens/connection_error_screen.dart'; export 'src/screens/connection_error_screen.dart';
export 'src/screens/server_error_screen.dart'; export 'src/screens/server_error_screen.dart';
export 'src/screens/no_plan_error_screen.dart'; export 'src/screens/no_plan_error_screen.dart';
export 'src/widgets/wallet_balance_block.dart'; export 'src/widgets/wallet_balance_block.dart';

12
packages/sf_shared/lib/src/models/savings_goal.dart Normal file
View File

@@ -0,0 +1,12 @@
class SavingsGoal{
final String name;
final double goal;
final double saved;
const SavingsGoal({
required this.name,
required this.goal,
required this.saved
});
}

21
packages/sf_shared/lib/src/models/task.dart Normal file
View File

@@ -0,0 +1,21 @@
class Task{
final double rewardAmount;
final List<Subtask> subtasks;
const Task({
required this.rewardAmount,
this.subtasks = const []
});
}
class Subtask{
final String name;
final bool completed;
const Subtask({
required this.name,
required this.completed
});
}

23
packages/sf_shared/lib/src/widgets/deposit_block.dart
View File

@@ -32,7 +32,7 @@ class DepositBlock extends ConsumerWidget {
spacing: 16, spacing: 16,
children: [ children: [
Row( Row(
spacing: 10, spacing: 16,
children: [ children: [
Expanded( Expanded(
child: CustomTextField( child: CustomTextField(
@@ -41,20 +41,15 @@ class DepositBlock extends ConsumerWidget {
numeric: true, numeric: true,
), ),
), ),
FilledButton( Align(
onPressed: () => {}, alignment: Alignment.bottomRight,
style: ButtonStyle( child: PrimaryButton(
backgroundColor: WidgetStatePropertyAll<Color>( onPressed: () => {},
theme.getColorFor(ThemeCode.buttonPrimary), text: "Ingresar",
), color: theme.getColorFor(ThemeCode.buttonPrimary),
shape: WidgetStatePropertyAll(RoundedRectangleBorder( padding: 24,
borderRadius: BorderRadius.all(Radius.circular(18))
))
), ),
child: SizedBox( )
height: 60,
child: Center(child: Text("Ingresar", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500)))),
),
], ],
), ),
Align( Align(

67
packages/sf_shared/lib/src/widgets/line_graph.dart
View File

@@ -1,10 +1,13 @@
import 'dart:math';
import 'package:design_system/design_system.dart'; import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart'; import 'package:fl_chart/fl_chart.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
class LineGraph extends ConsumerStatefulWidget { class LineGraph extends ConsumerStatefulWidget {
final lines = [[0,1,0,1,0,1,0],[1,0,1,0,1,0,1]]; final lines = [[0,1,0,3,0,1,0],[1,0,1,0,4,0,1]];
late final maxValue = lines.map((x)=>x.reduce(max)).reduce(max);
LineGraph({super.key}); LineGraph({super.key});
@@ -42,25 +45,22 @@ class LineGraphState extends ConsumerState<LineGraph> {
Text("Gastos", style: TextStyle(fontWeight: FontWeight.w500, fontSize: 18)), Text("Gastos", style: TextStyle(fontWeight: FontWeight.w500, fontSize: 18)),
Spacer(), Spacer(),
Container( Container(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 0),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8)), borderRadius: BorderRadius.all(Radius.circular(8)),
color: theme.getColorFor(ThemeCode.backgroundSecondary), color: theme.getColorFor(ThemeCode.backgroundSecondary),
), ),
child: DropdownButton( child:
underline: Container(), CustomDropdown(
value: timeSpan, value: timeSpan,
onChanged: (String? value) {
setState(() {
timeSpan = value;
});
},
dropdownColor: theme.getColorFor(ThemeCode.backgroundPrimary),
items: [ items: [
DropdownMenuItem(value: "day", child: Text("Hoy", style: TextStyle(fontSize: 14, letterSpacing: 0))), Text("Hoy", style: TextStyle(fontSize: 14, letterSpacing: 0)),
DropdownMenuItem(value: "week", child: Text("Esta semana", style: TextStyle(fontSize: 14, letterSpacing: 0))), Text("Esta semana", style: TextStyle(fontSize: 14, letterSpacing: 0)),
DropdownMenuItem(value: "month", child: Text("Este mes", style: TextStyle(fontSize: 14, letterSpacing: 0))), Text("Este mes", style: TextStyle(fontSize: 14, letterSpacing: 0))
] ],
values: ["day", "week", "month"],
onChanged: (value)=>{},
color: Colors.transparent,
width: 151,
), ),
) )
]), ]),
@@ -136,33 +136,26 @@ class LineGraphState extends ConsumerState<LineGraph> {
top: const BorderSide(color: Colors.transparent), top: const BorderSide(color: Colors.transparent),
), ),
), ),
lineBarsData: [ lineBarsData: List<LineChartBarData>.generate(widget.lines.length, (int i)=>
LineChartBarData( LineChartBarData(
isCurved: true, isCurved: true,
color: Colors.pink, gradient: LinearGradient(
barWidth: 5, begin: Alignment.bottomCenter,
isStrokeCapRound: true, end: Alignment.topCenter,
dotData: const FlDotData(show: false), colors: theme.getCardColorFor(i)
belowBarData: BarAreaData(show: false), ),
spots: List<FlSpot>.generate(days.length, (int index){ barWidth: 5,
return FlSpot(index.toDouble(), (index+1)%2); isStrokeCapRound: true,
}) dotData: const FlDotData(show: false),
belowBarData: BarAreaData(show: false),
spots: List<FlSpot>.generate(widget.lines[i].length, (int j){
return FlSpot(j.toDouble(), widget.lines[i][j].toDouble());
})
), ),
LineChartBarData( ),
isCurved: true,
color: Colors.cyan,
barWidth: 5,
isStrokeCapRound: true,
dotData: const FlDotData(show: false),
belowBarData: BarAreaData(show: false),
spots: List<FlSpot>.generate(days.length, (int index){
return FlSpot(index.toDouble(), index%2);
})
),
],
minX: 0, minX: 0,
maxX: days.length-1, maxX: days.length-1,
maxY: 1, maxY: widget.maxValue.toDouble(),
minY: 0, minY: 0,
)) ))
) )

22
packages/sf_shared/lib/src/widgets/wallet_balance_block.dart
View File

@@ -49,8 +49,26 @@ class WalletBalanceBlock extends ConsumerWidget {
Spacer(), Spacer(),
Text("$savingsPlan€") Text("$savingsPlan€")
]), ]),
ProgressBar(savingsPlan, savings, 24, 16, 12, theme.getColorFor(ThemeCode.backgroundSecondary), theme.getColorFor(ThemeCode.backgroundTertiary), theme.getColorFor(ThemeCode.textPrimary)), ProgressBar(
ProgressBar(max, value, 83, 40, 24, theme.getColorFor(ThemeCode.backgroundTertiary), theme.getColorFor(ThemeCode.buttonPrimary), theme.getColorFor(ThemeCode.textSecondary)), max: savingsPlan,
value: savings,
height: 24,
textSize: 16,
textSecondarySize: 12,
backgroundColor: theme.getColorFor(ThemeCode.backgroundSecondary),
foregroundColor: theme.getColorFor(ThemeCode.backgroundTertiary),
textColor: theme.getColorFor(ThemeCode.textPrimary)
),
ProgressBar(
max: max,
value: value,
height: 83,
textSize: 40,
textSecondarySize: 24,
backgroundColor: theme.getColorFor(ThemeCode.backgroundTertiary),
foregroundColor: theme.getColorFor(ThemeCode.buttonPrimary),
textColor: theme.getColorFor(ThemeCode.textSecondary)
),
Center(child: Text("Disponible")), Center(child: Text("Disponible")),
], ],
), ),