- Implémentation responsive avec LayoutBuilder pour détecter mobile/desktop - Mode mobile : titre au-dessus, carte pleine largeur avec ratio 2/3, boutons verticaux - Mode desktop : chevron en haut à gauche, layout texte/carte côte à côte - Extraction de la logique de carte dans ChoiceCardWidget réutilisable - Bouton "Précédent" stylisé avec CustomNavigationButton et HoverReliefWidget - Tailles d'icônes augmentées (140px mobile, 170px desktop) Co-authored-by: Cursor <cursoragent@cursor.com>
168 lines
5.2 KiB
Dart
168 lines
5.2 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
import 'dart:math' as math;
|
|
import '../../widgets/choice_card_widget.dart';
|
|
import '../../widgets/hover_relief_widget.dart';
|
|
import '../../widgets/custom_navigation_button.dart';
|
|
import '../../models/card_assets.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
|
|
class RegisterChoiceScreen extends StatelessWidget {
|
|
const RegisterChoiceScreen({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
body: LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
final width = constraints.maxWidth;
|
|
final height = constraints.maxHeight;
|
|
final screenSize = Size(width, height);
|
|
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: [
|
|
// 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,
|
|
),
|
|
child: AspectRatio(
|
|
aspectRatio: 2 / 3,
|
|
child: ChoiceCardWidget(
|
|
isMobile: false,
|
|
onParentSelected: () => context.go('/parent-register-step1'),
|
|
onAmSelected: () => context.go('/am-register-step1'),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildMobileLayout(BuildContext context, Size screenSize) {
|
|
return Center(
|
|
child: SingleChildScrollView(
|
|
padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 20),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Text(
|
|
'Veuillez choisir votre\ntype de compte :',
|
|
style: GoogleFonts.merienda(
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.black87,
|
|
height: 1.3,
|
|
),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
const SizedBox(height: 30),
|
|
// Carte rose verticale
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: AspectRatio(
|
|
aspectRatio: 2 / 3,
|
|
child: ChoiceCardWidget(
|
|
isMobile: true,
|
|
onParentSelected: () => context.go('/parent-register-step1'),
|
|
onAmSelected: () => context.go('/am-register-step1'),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 30),
|
|
// Bouton Précédent
|
|
HoverReliefWidget(
|
|
child: CustomNavigationButton(
|
|
text: 'Précédent',
|
|
style: NavigationButtonStyle.purple,
|
|
width: double.infinity,
|
|
height: 50,
|
|
fontSize: 16,
|
|
onPressed: () {
|
|
if (context.canPop()) {
|
|
context.pop();
|
|
} else {
|
|
context.go('/login');
|
|
}
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|