feat(frontend): Adapt RegisterChoiceScreen for mobile (Closes #83)
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
parent
0d88597bb6
commit
030ef81038
@ -1,164 +1,170 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:google_fonts/google_fonts.dart';
|
import 'package:google_fonts/google_fonts.dart';
|
||||||
import 'dart:math' as math; // Pour la rotation du chevron
|
import 'dart:math' as math; // Pour la rotation du chevron
|
||||||
import '../../widgets/hover_relief_widget.dart'; // Import du widget générique
|
import '../../widgets/choice_card_widget.dart'; // Import du nouveau widget
|
||||||
import '../../models/card_assets.dart'; // Import des enums de cartes
|
import '../../widgets/custom_navigation_button.dart';
|
||||||
|
import '../../widgets/hover_relief_widget.dart';
|
||||||
import 'package:go_router/go_router.dart';
|
import 'package:go_router/go_router.dart';
|
||||||
|
|
||||||
|
// Screen for choosing between Parent and AM registration
|
||||||
class RegisterChoiceScreen extends StatelessWidget {
|
class RegisterChoiceScreen extends StatelessWidget {
|
||||||
const RegisterChoiceScreen({super.key});
|
const RegisterChoiceScreen({super.key});
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final screenSize = MediaQuery.of(context).size;
|
|
||||||
|
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
body: Stack(
|
body: LayoutBuilder(
|
||||||
|
builder: (context, constraints) {
|
||||||
|
final width = constraints.maxWidth;
|
||||||
|
final height = constraints.maxHeight;
|
||||||
|
final screenSize = Size(width, height);
|
||||||
|
|
||||||
|
// Utilisation de la largeur disponible pour déterminer le mode
|
||||||
|
// C'est plus fiable que MediaQuery si le widget est contraint
|
||||||
|
final isMobile = width < 900;
|
||||||
|
|
||||||
|
return Stack(
|
||||||
|
children: [
|
||||||
|
// Fond papier
|
||||||
|
Positioned.fill(
|
||||||
|
child: Image.asset(
|
||||||
|
'assets/images/paper2.png',
|
||||||
|
fit: BoxFit.cover,
|
||||||
|
repeat: ImageRepeat.repeat,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
|
||||||
|
// Bouton Retour (chevron gauche) - Desktop uniquement
|
||||||
|
if (!isMobile)
|
||||||
|
Positioned(
|
||||||
|
top: 40,
|
||||||
|
left: 40,
|
||||||
|
child: IconButton(
|
||||||
|
icon: Transform.flip(
|
||||||
|
flipX: true,
|
||||||
|
child: Image.asset(
|
||||||
|
'assets/images/chevron_right.png',
|
||||||
|
height: 40
|
||||||
|
)
|
||||||
|
),
|
||||||
|
onPressed: () {
|
||||||
|
if (context.canPop()) {
|
||||||
|
context.pop();
|
||||||
|
} else {
|
||||||
|
context.go('/login');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: 'Retour',
|
||||||
|
),
|
||||||
|
),
|
||||||
|
|
||||||
|
// Contenu principal
|
||||||
|
isMobile
|
||||||
|
? _buildMobileLayout(context, screenSize)
|
||||||
|
: _buildDesktopLayout(context, screenSize),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildDesktopLayout(BuildContext context, Size screenSize) {
|
||||||
|
return Padding(
|
||||||
|
padding: EdgeInsets.symmetric(horizontal: screenSize.width * 0.05),
|
||||||
|
child: Row(
|
||||||
children: [
|
children: [
|
||||||
// Fond papier
|
// Partie Gauche: Texte d'instruction centré
|
||||||
Positioned.fill(
|
Expanded(
|
||||||
child: Image.asset(
|
flex: 1,
|
||||||
'assets/images/paper2.png',
|
child: Center(
|
||||||
fit: BoxFit.cover,
|
child: Text(
|
||||||
repeat: ImageRepeat.repeat,
|
'Veuillez choisir votre\ntype de compte :',
|
||||||
|
style: GoogleFonts.merienda(
|
||||||
|
fontSize: 36,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
color: Colors.black87,
|
||||||
|
height: 1.5,
|
||||||
|
),
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
// Espace entre les deux parties
|
||||||
// Bouton Retour (chevron gauche)
|
SizedBox(width: screenSize.width * 0.05),
|
||||||
Positioned(
|
|
||||||
top: 40,
|
// Partie Droite: Carte rose avec les boutons
|
||||||
left: 40,
|
Expanded(
|
||||||
child: IconButton(
|
flex: 1,
|
||||||
icon: Transform.flip(flipX: true, child: Image.asset('assets/images/chevron_right.png', height: 40)),
|
child: Center(
|
||||||
onPressed: () {
|
child: ConstrainedBox(
|
||||||
if (context.canPop()) {
|
constraints: BoxConstraints(
|
||||||
context.pop();
|
maxHeight: screenSize.height * 0.78,
|
||||||
} else {
|
),
|
||||||
context.go('/login');
|
child: AspectRatio(
|
||||||
}
|
aspectRatio: 2 / 3,
|
||||||
},
|
child: ChoiceCardWidget(
|
||||||
tooltip: 'Retour',
|
isMobile: false,
|
||||||
),
|
onParentSelected: () => context.go('/parent-register-step1'),
|
||||||
),
|
onAmSelected: () => context.go('/am-register-step1'),
|
||||||
|
|
||||||
// Contenu principal en Row (Gauche / Droite)
|
|
||||||
Padding(
|
|
||||||
padding: EdgeInsets.symmetric(horizontal: screenSize.width * 0.05),
|
|
||||||
child: Row(
|
|
||||||
children: [
|
|
||||||
// Partie Gauche: Texte d'instruction centré
|
|
||||||
Expanded(
|
|
||||||
flex: 1,
|
|
||||||
child: Center(
|
|
||||||
child: Text(
|
|
||||||
'Veuillez choisir votre\ntype de compte :',
|
|
||||||
style: GoogleFonts.merienda(
|
|
||||||
fontSize: 36,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
color: Colors.black87,
|
|
||||||
height: 1.5,
|
|
||||||
),
|
|
||||||
textAlign: TextAlign.center,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
// Espace entre les deux parties
|
),
|
||||||
SizedBox(width: screenSize.width * 0.05),
|
|
||||||
|
|
||||||
// Partie Droite: Carte rose avec les boutons
|
|
||||||
Expanded(
|
|
||||||
flex: 1,
|
|
||||||
child: Center(
|
|
||||||
child: ConstrainedBox(
|
|
||||||
constraints: BoxConstraints(
|
|
||||||
maxHeight: screenSize.height * 0.78, // Augmenté pour éviter l'overflow
|
|
||||||
),
|
|
||||||
child: AspectRatio(
|
|
||||||
aspectRatio: 2 / 3,
|
|
||||||
child: Container(
|
|
||||||
padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 20),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
image: DecorationImage(
|
|
||||||
image: AssetImage(CardColorVertical.pink.path),
|
|
||||||
fit: BoxFit.fill,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: Column(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
|
||||||
children: [
|
|
||||||
// Bouton "Parents" avec HoverReliefWidget appliqué uniquement à l'image
|
|
||||||
_buildChoiceButton(
|
|
||||||
context: context,
|
|
||||||
iconPath: 'assets/images/icon_parents.png',
|
|
||||||
label: 'Parents',
|
|
||||||
onPressed: () {
|
|
||||||
context.go('/parent-register-step1');
|
|
||||||
},
|
|
||||||
),
|
|
||||||
// Bouton "Assistante Maternelle" avec HoverReliefWidget appliqué uniquement à l'image
|
|
||||||
_buildChoiceButton(
|
|
||||||
context: context,
|
|
||||||
iconPath: 'assets/images/icon_assmat.png',
|
|
||||||
label: 'Assistante Maternelle',
|
|
||||||
onPressed: () {
|
|
||||||
context.go('/am-register-step1');
|
|
||||||
},
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
// Nouvelle méthode helper pour construire les boutons de choix
|
Widget _buildMobileLayout(BuildContext context, Size screenSize) {
|
||||||
Widget _buildChoiceButton({
|
return Center(
|
||||||
required BuildContext context,
|
child: SingleChildScrollView(
|
||||||
required String iconPath,
|
padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 20),
|
||||||
required String label,
|
child: Column(
|
||||||
required VoidCallback onPressed,
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
}) {
|
children: [
|
||||||
// TODO: Déterminer la couleur de base de card_rose.png et ajuster ces couleurs d'ombre
|
Text(
|
||||||
final Color baseRoseColor = Colors.pink.shade300; // Placeholder
|
'Veuillez choisir votre\ntype de compte :',
|
||||||
final Color initialShadow = baseRoseColor.withAlpha(90); // Rose plus foncé et transparent pour l'ombre initiale
|
style: GoogleFonts.merienda(
|
||||||
final Color hoverShadow = baseRoseColor.withAlpha(130); // Rose encore plus foncé pour l'ombre au survol
|
fontSize: 24,
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
return Column(
|
color: Colors.black87,
|
||||||
mainAxisSize: MainAxisSize.min,
|
height: 1.3,
|
||||||
children: [
|
),
|
||||||
HoverReliefWidget(
|
textAlign: TextAlign.center,
|
||||||
onPressed: onPressed,
|
),
|
||||||
borderRadius: BorderRadius.circular(15.0),
|
const SizedBox(height: 30),
|
||||||
initialShadowColor: initialShadow, // Ombre rose initiale
|
// Carte rose verticale adaptative
|
||||||
hoverShadowColor: hoverShadow, // Ombre rose au survol
|
ChoiceCardWidget(
|
||||||
child: Padding(
|
isMobile: true,
|
||||||
padding: const EdgeInsets.all(8.0),
|
onParentSelected: () => context.go('/parent-register-step1'),
|
||||||
child: Image.asset(iconPath, height: 140),
|
onAmSelected: () => context.go('/am-register-step1'),
|
||||||
|
),
|
||||||
|
const SizedBox(height: 30),
|
||||||
|
// Bouton Précédent
|
||||||
|
SizedBox(
|
||||||
|
width: double.infinity,
|
||||||
|
child: HoverReliefWidget(
|
||||||
|
child: CustomNavigationButton(
|
||||||
|
text: 'Précédent',
|
||||||
|
style: NavigationButtonStyle.purple,
|
||||||
|
onPressed: () {
|
||||||
|
if (context.canPop()) {
|
||||||
|
context.pop();
|
||||||
|
} else {
|
||||||
|
context.go('/login');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
width: double.infinity,
|
||||||
|
height: 50,
|
||||||
|
fontSize: 16,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
const SizedBox(height: 15),
|
);
|
||||||
Text(
|
}
|
||||||
label,
|
|
||||||
style: GoogleFonts.merienda(
|
|
||||||
fontSize: 26,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
color: Colors.black.withOpacity(0.85),
|
|
||||||
),
|
|
||||||
textAlign: TextAlign.center,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- La classe HoverChoiceButton peut maintenant être supprimée si elle n'est plus utilisée ailleurs ---
|
|
||||||
// class HoverChoiceButton extends StatefulWidget { ... }
|
|
||||||
// class _HoverChoiceButtonState extends State<HoverChoiceButton> { ... }
|
|
||||||
87
frontend/lib/widgets/choice_card_widget.dart
Normal file
87
frontend/lib/widgets/choice_card_widget.dart
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:google_fonts/google_fonts.dart';
|
||||||
|
import '../models/card_assets.dart';
|
||||||
|
import 'hover_relief_widget.dart';
|
||||||
|
|
||||||
|
// Widget for the registration choice card (Parent vs AM)
|
||||||
|
class ChoiceCardWidget extends StatelessWidget {
|
||||||
|
final VoidCallback onParentSelected;
|
||||||
|
final VoidCallback onAmSelected;
|
||||||
|
final bool isMobile;
|
||||||
|
|
||||||
|
const ChoiceCardWidget({
|
||||||
|
super.key,
|
||||||
|
required this.onParentSelected,
|
||||||
|
required this.onAmSelected,
|
||||||
|
this.isMobile = false,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 20),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
image: DecorationImage(
|
||||||
|
image: AssetImage(CardColorVertical.pink.path),
|
||||||
|
fit: BoxFit.fill,
|
||||||
|
),
|
||||||
|
borderRadius: BorderRadius.circular(15),
|
||||||
|
),
|
||||||
|
child: Column(
|
||||||
|
mainAxisAlignment: isMobile ? MainAxisAlignment.center : MainAxisAlignment.spaceEvenly,
|
||||||
|
children: [
|
||||||
|
_buildChoiceButton(
|
||||||
|
iconPath: 'assets/images/icon_parents.png',
|
||||||
|
label: 'Parents',
|
||||||
|
onPressed: onParentSelected,
|
||||||
|
isMobile: isMobile,
|
||||||
|
),
|
||||||
|
SizedBox(height: isMobile ? 30 : 0),
|
||||||
|
_buildChoiceButton(
|
||||||
|
iconPath: 'assets/images/icon_assmat.png',
|
||||||
|
label: 'Assistante Maternelle',
|
||||||
|
onPressed: onAmSelected,
|
||||||
|
isMobile: isMobile,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildChoiceButton({
|
||||||
|
required String iconPath,
|
||||||
|
required String label,
|
||||||
|
required VoidCallback onPressed,
|
||||||
|
required bool isMobile,
|
||||||
|
}) {
|
||||||
|
final Color baseRoseColor = Colors.pink.shade300;
|
||||||
|
final Color initialShadow = baseRoseColor.withAlpha(90);
|
||||||
|
final Color hoverShadow = baseRoseColor.withAlpha(130);
|
||||||
|
|
||||||
|
return Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
HoverReliefWidget(
|
||||||
|
onPressed: onPressed,
|
||||||
|
borderRadius: BorderRadius.circular(15.0),
|
||||||
|
initialShadowColor: initialShadow,
|
||||||
|
hoverShadowColor: hoverShadow,
|
||||||
|
child: Padding(
|
||||||
|
padding: EdgeInsets.all(isMobile ? 6.0 : 8.0),
|
||||||
|
child: Image.asset(iconPath, height: isMobile ? 100 : 140),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
SizedBox(height: isMobile ? 10 : 15),
|
||||||
|
Text(
|
||||||
|
label,
|
||||||
|
style: GoogleFonts.merienda(
|
||||||
|
fontSize: isMobile ? 20 : 26,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
color: Colors.black.withOpacity(0.85),
|
||||||
|
),
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user