feat(frontend): Refonte infrastructure formulaires multi-modes
- Support des modes Desktop/Mobile et Édition/Lecture seule - Refactoring des widgets de formulaire (PersonalInfo, ProfessionalInfo, Presentation, ChildCard) - Mise à jour des écrans de récapitulatif (ParentStep5, AmStep4) - Ajout de navigation (Précédent/Soumettre) sur mobile Closes #78 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
@@ -0,0 +1,220 @@
|
||||
# Infrastructure générique pour les formulaires
|
||||
|
||||
## 📋 Vue d'ensemble
|
||||
|
||||
Cette infrastructure permet de créer des formulaires qui s'adaptent automatiquement :
|
||||
- **Mode éditable** (inscription) vs **lecture seule** (récapitulatif)
|
||||
- **Layout mobile** (vertical, < 600px) vs **desktop** (horizontal, ≥ 600px)
|
||||
- **Mobile reste toujours vertical**, même en rotation paysage
|
||||
|
||||
## 🏗️ Architecture
|
||||
|
||||
### 1. `display_config.dart` - Configuration centrale
|
||||
|
||||
```dart
|
||||
// Mode d'affichage
|
||||
enum DisplayMode {
|
||||
editable, // Formulaire éditable
|
||||
readonly, // Récapitulatif
|
||||
}
|
||||
|
||||
// Type de layout
|
||||
enum LayoutType {
|
||||
mobile, // < 600px, toujours vertical
|
||||
desktop, // ≥ 600px, horizontal
|
||||
}
|
||||
|
||||
// Configuration complète
|
||||
DisplayConfig config = DisplayConfig.fromContext(
|
||||
context,
|
||||
mode: DisplayMode.editable,
|
||||
);
|
||||
```
|
||||
|
||||
### 2. `form_field_wrapper.dart` - Champs génériques
|
||||
|
||||
#### FormFieldWrapper
|
||||
Widget pour afficher un champ unique qui s'adapte automatiquement.
|
||||
|
||||
**Mode éditable :**
|
||||
```dart
|
||||
FormFieldWrapper(
|
||||
config: config,
|
||||
label: 'Prénom',
|
||||
value: '',
|
||||
controller: firstNameController,
|
||||
onChanged: (value) => {},
|
||||
hint: 'Entrez votre prénom',
|
||||
)
|
||||
```
|
||||
|
||||
**Mode readonly :**
|
||||
```dart
|
||||
FormFieldWrapper(
|
||||
config: config,
|
||||
label: 'Prénom',
|
||||
value: 'Jean',
|
||||
)
|
||||
```
|
||||
|
||||
#### FormFieldRow
|
||||
Widget pour afficher plusieurs champs sur une ligne (desktop) ou en colonne (mobile).
|
||||
|
||||
```dart
|
||||
FormFieldRow(
|
||||
config: config,
|
||||
fields: [
|
||||
FormFieldWrapper(...),
|
||||
FormFieldWrapper(...),
|
||||
],
|
||||
)
|
||||
```
|
||||
|
||||
### 3. `base_form_screen.dart` - Structure de page générique
|
||||
|
||||
Encapsule toute la structure d'une page de formulaire :
|
||||
- En-tête (étape + titre)
|
||||
- Carte avec fond adapté (horizontal/vertical)
|
||||
- Boutons de navigation
|
||||
- Gestion automatique du layout
|
||||
|
||||
```dart
|
||||
BaseFormScreen(
|
||||
config: DisplayConfig.fromContext(
|
||||
context,
|
||||
mode: DisplayMode.editable,
|
||||
),
|
||||
stepText: 'Étape 1/4',
|
||||
title: 'Informations personnelles',
|
||||
cardColor: CardColorHorizontal.blue,
|
||||
previousRoute: '/previous',
|
||||
onSubmit: () => _handleSubmit(),
|
||||
content: Column(
|
||||
children: [
|
||||
FormFieldRow(
|
||||
config: config,
|
||||
fields: [
|
||||
FormFieldWrapper(...),
|
||||
FormFieldWrapper(...),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
```
|
||||
|
||||
## 📱 Comportement responsive
|
||||
|
||||
### Breakpoint : 600px
|
||||
|
||||
| Largeur écran | LayoutType | Orientation carte | Disposition champs |
|
||||
|--------------|------------|-------------------|-------------------|
|
||||
| < 600px | mobile | Verticale | Colonne |
|
||||
| ≥ 600px | desktop | Horizontale | Ligne |
|
||||
|
||||
### Règle importante
|
||||
**Sur mobile, le layout reste TOUJOURS vertical**, même si l'utilisateur tourne son téléphone en mode paysage.
|
||||
|
||||
## 🎨 Utilisation dans un widget de formulaire
|
||||
|
||||
### Exemple : PersonalInfoFormScreen
|
||||
|
||||
```dart
|
||||
class PersonalInfoFormScreen extends StatefulWidget {
|
||||
final DisplayMode mode;
|
||||
final PersonalInfoData? initialData;
|
||||
final Function(PersonalInfoData) onSubmit;
|
||||
|
||||
// ...
|
||||
}
|
||||
|
||||
class _PersonalInfoFormScreenState extends State<PersonalInfoFormScreen> {
|
||||
late TextEditingController _firstNameController;
|
||||
late TextEditingController _lastNameController;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final config = DisplayConfig.fromContext(
|
||||
context,
|
||||
mode: widget.mode,
|
||||
);
|
||||
|
||||
return BaseFormScreen(
|
||||
config: config,
|
||||
stepText: 'Étape 1/4',
|
||||
title: 'Informations personnelles',
|
||||
cardColor: CardColorHorizontal.blue,
|
||||
previousRoute: '/previous',
|
||||
onSubmit: _handleSubmit,
|
||||
content: Column(
|
||||
children: [
|
||||
FormFieldRow(
|
||||
config: config,
|
||||
fields: [
|
||||
FormFieldWrapper(
|
||||
config: config,
|
||||
label: 'Prénom',
|
||||
value: _firstNameController.text,
|
||||
controller: config.isEditable ? _firstNameController : null,
|
||||
onChanged: config.isEditable ? (v) => setState(() {}) : null,
|
||||
),
|
||||
FormFieldWrapper(
|
||||
config: config,
|
||||
label: 'Nom',
|
||||
value: _lastNameController.text,
|
||||
controller: config.isEditable ? _lastNameController : null,
|
||||
onChanged: config.isEditable ? (v) => setState(() {}) : null,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _handleSubmit() {
|
||||
final data = PersonalInfoData(
|
||||
firstName: _firstNameController.text,
|
||||
lastName: _lastNameController.text,
|
||||
);
|
||||
widget.onSubmit(data);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ Avantages
|
||||
|
||||
1. **Code unique** : Un seul widget pour éditable + readonly + mobile + desktop
|
||||
2. **Cohérence** : Tous les formulaires se comportent de la même façon
|
||||
3. **Maintenance** : Modification centralisée de l'UI
|
||||
4. **Performance** : Pas de rebuild inutile, layout déterminé au build
|
||||
5. **Simplicité** : API claire et prévisible
|
||||
|
||||
## 🔧 Utilitaires disponibles
|
||||
|
||||
```dart
|
||||
// Détecter le type de layout
|
||||
bool isMobile = LayoutHelper.isMobile(context);
|
||||
bool isDesktop = LayoutHelper.isDesktop(context);
|
||||
|
||||
// Espacement adaptatif
|
||||
double spacing = LayoutHelper.getSpacing(
|
||||
context,
|
||||
mobileSpacing: 12.0,
|
||||
desktopSpacing: 20.0,
|
||||
);
|
||||
|
||||
// Largeur max adaptative
|
||||
double maxWidth = LayoutHelper.getMaxWidth(context);
|
||||
```
|
||||
|
||||
## 🚀 Migration des widgets existants
|
||||
|
||||
Pour migrer un widget existant vers cette infrastructure :
|
||||
|
||||
1. Ajouter paramètre `DisplayMode mode`
|
||||
2. Créer `DisplayConfig.fromContext(context, mode: widget.mode)`
|
||||
3. Remplacer la structure Scaffold par `BaseFormScreen`
|
||||
4. Remplacer les champs par `FormFieldWrapper`
|
||||
5. Grouper les champs avec `FormFieldRow`
|
||||
6. Tester en mode editable + readonly + mobile + desktop
|
||||
@@ -7,6 +7,7 @@ class AppCustomCheckbox extends StatelessWidget {
|
||||
final ValueChanged<bool> onChanged;
|
||||
final double checkboxSize;
|
||||
final double checkmarkSizeFactor;
|
||||
final double fontSize;
|
||||
|
||||
const AppCustomCheckbox({
|
||||
super.key,
|
||||
@@ -15,6 +16,7 @@ class AppCustomCheckbox extends StatelessWidget {
|
||||
required this.onChanged,
|
||||
this.checkboxSize = 20.0,
|
||||
this.checkmarkSizeFactor = 1.4,
|
||||
this.fontSize = 16.0,
|
||||
});
|
||||
|
||||
@override
|
||||
@@ -51,7 +53,7 @@ class AppCustomCheckbox extends StatelessWidget {
|
||||
Flexible(
|
||||
child: Text(
|
||||
label,
|
||||
style: GoogleFonts.merienda(fontSize: 16),
|
||||
style: GoogleFonts.merienda(fontSize: fontSize),
|
||||
overflow: TextOverflow.ellipsis, // Gérer le texte long
|
||||
),
|
||||
),
|
||||
|
||||
@@ -265,7 +265,7 @@ class _ChangePasswordDialogState extends State<ChangePasswordDialog> {
|
||||
child: _isLoading
|
||||
? const CircularProgressIndicator()
|
||||
: ImageButton(
|
||||
bg: 'assets/images/btn_green.png',
|
||||
bg: 'assets/images/bg_green.png',
|
||||
width: 250,
|
||||
height: 40,
|
||||
text: 'Changer le mot de passe',
|
||||
|
||||
@@ -0,0 +1,225 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import '../config/display_config.dart';
|
||||
import '../models/card_assets.dart';
|
||||
import 'hover_relief_widget.dart';
|
||||
import 'image_button.dart';
|
||||
|
||||
/// Widget de base générique pour tous les écrans de formulaire
|
||||
/// Gère automatiquement le layout, les boutons de navigation, etc.
|
||||
class BaseFormScreen extends StatelessWidget {
|
||||
/// Configuration d'affichage
|
||||
final DisplayConfig config;
|
||||
|
||||
/// Texte de l'étape (ex: "Étape 1/4")
|
||||
final String stepText;
|
||||
|
||||
/// Titre du formulaire
|
||||
final String title;
|
||||
|
||||
/// Couleur de la carte (horizontal pour desktop)
|
||||
final CardColorHorizontal cardColor;
|
||||
|
||||
/// Contenu du formulaire
|
||||
final Widget content;
|
||||
|
||||
/// Texte du bouton de soumission (par défaut "Suivant")
|
||||
final String? submitButtonText;
|
||||
|
||||
/// Callback de soumission
|
||||
final VoidCallback onSubmit;
|
||||
|
||||
/// Route précédente (pour le bouton retour)
|
||||
final String previousRoute;
|
||||
|
||||
/// Widget supplémentaire au-dessus du contenu (ex: toggle)
|
||||
final Widget? headerWidget;
|
||||
|
||||
/// Widget supplémentaire en dessous du contenu (ex: checkbox CGU)
|
||||
final Widget? footerWidget;
|
||||
|
||||
/// Padding personnalisé pour le contenu
|
||||
final EdgeInsets? contentPadding;
|
||||
|
||||
const BaseFormScreen({
|
||||
super.key,
|
||||
required this.config,
|
||||
required this.stepText,
|
||||
required this.title,
|
||||
required this.cardColor,
|
||||
required this.content,
|
||||
required this.onSubmit,
|
||||
required this.previousRoute,
|
||||
this.submitButtonText,
|
||||
this.headerWidget,
|
||||
this.footerWidget,
|
||||
this.contentPadding,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: const Color(0xFFFFF8E1),
|
||||
body: SafeArea(
|
||||
child: SingleChildScrollView(
|
||||
padding: EdgeInsets.all(
|
||||
LayoutHelper.getSpacing(context,
|
||||
mobileSpacing: 16.0,
|
||||
desktopSpacing: 32.0,
|
||||
),
|
||||
),
|
||||
child: Center(
|
||||
child: ConstrainedBox(
|
||||
constraints: BoxConstraints(
|
||||
maxWidth: LayoutHelper.getMaxWidth(context),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Texte de l'étape
|
||||
Text(
|
||||
stepText,
|
||||
style: GoogleFonts.merienda(
|
||||
fontSize: config.isMobile ? 14 : 16,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: const Color(0xFF6D4C41),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
|
||||
// Titre
|
||||
Text(
|
||||
title,
|
||||
style: GoogleFonts.merienda(
|
||||
fontSize: config.isMobile ? 24 : 32,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: const Color(0xFF4A4A4A),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Header widget (si fourni)
|
||||
if (headerWidget != null) ...[
|
||||
headerWidget!,
|
||||
const SizedBox(height: 16),
|
||||
],
|
||||
|
||||
// Carte principale
|
||||
_buildCard(context),
|
||||
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Footer widget (si fourni)
|
||||
if (footerWidget != null) ...[
|
||||
footerWidget!,
|
||||
const SizedBox(height: 24),
|
||||
],
|
||||
|
||||
// Boutons de navigation
|
||||
_buildNavigationButtons(context),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Construit la carte principale
|
||||
Widget _buildCard(BuildContext context) {
|
||||
final effectivePadding = contentPadding ??
|
||||
EdgeInsets.all(
|
||||
LayoutHelper.getSpacing(context,
|
||||
mobileSpacing: 16.0,
|
||||
desktopSpacing: 32.0,
|
||||
),
|
||||
);
|
||||
|
||||
if (config.isMobile) {
|
||||
// Carte verticale sur mobile
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image: AssetImage(_getVerticalCardAsset()),
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: effectivePadding,
|
||||
child: content,
|
||||
),
|
||||
);
|
||||
} else {
|
||||
// Carte horizontale sur desktop
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image: AssetImage(cardColor.path),
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: effectivePadding,
|
||||
child: content,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Retourne l'asset de carte vertical correspondant à la couleur
|
||||
String _getVerticalCardAsset() {
|
||||
// Mapping couleur horizontale -> verticale
|
||||
switch (cardColor) {
|
||||
case CardColorHorizontal.blue:
|
||||
return CardColorVertical.blue.path;
|
||||
case CardColorHorizontal.green:
|
||||
return CardColorVertical.green.path;
|
||||
case CardColorHorizontal.lavender:
|
||||
return CardColorVertical.lavender.path;
|
||||
case CardColorHorizontal.lime:
|
||||
return CardColorVertical.lime.path;
|
||||
case CardColorHorizontal.peach:
|
||||
return CardColorVertical.peach.path;
|
||||
case CardColorHorizontal.pink:
|
||||
return CardColorVertical.pink.path;
|
||||
case CardColorHorizontal.red:
|
||||
return CardColorVertical.red.path;
|
||||
}
|
||||
}
|
||||
|
||||
/// Construit les boutons de navigation
|
||||
Widget _buildNavigationButtons(BuildContext context) {
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
// Bouton Précédent
|
||||
HoverReliefWidget(
|
||||
child: ImageButton(
|
||||
bg: 'assets/images/bg_green.png',
|
||||
text: 'Précédent',
|
||||
textColor: Colors.white,
|
||||
onPressed: () => Navigator.pushNamed(context, previousRoute),
|
||||
width: config.isMobile ? 120 : 150,
|
||||
height: config.isMobile ? 40 : 50,
|
||||
),
|
||||
),
|
||||
|
||||
// Bouton Suivant/Soumettre
|
||||
HoverReliefWidget(
|
||||
child: ImageButton(
|
||||
bg: 'assets/images/bg_green.png',
|
||||
text: submitButtonText ?? 'Suivant',
|
||||
textColor: Colors.white,
|
||||
onPressed: config.isReadonly ? onSubmit : () {
|
||||
// En mode éditable, valider avant de soumettre
|
||||
onSubmit();
|
||||
},
|
||||
width: config.isMobile ? 120 : 150,
|
||||
height: config.isMobile ? 40 : 50,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -5,8 +5,10 @@ import 'package:flutter/foundation.dart' show kIsWeb;
|
||||
import '../models/user_registration_data.dart';
|
||||
import '../models/card_assets.dart';
|
||||
import 'custom_app_text_field.dart';
|
||||
import 'form_field_wrapper.dart';
|
||||
import 'app_custom_checkbox.dart';
|
||||
import 'hover_relief_widget.dart';
|
||||
import '../config/display_config.dart';
|
||||
|
||||
/// Widget pour afficher et éditer une carte enfant
|
||||
/// Utilisé dans le workflow d'inscription des parents
|
||||
@@ -22,6 +24,8 @@ class ChildCardWidget extends StatefulWidget {
|
||||
final ValueChanged<bool> onToggleIsUnborn;
|
||||
final VoidCallback onRemove;
|
||||
final bool canBeRemoved;
|
||||
final DisplayMode mode;
|
||||
final VoidCallback? onEdit;
|
||||
|
||||
const ChildCardWidget({
|
||||
required Key key,
|
||||
@@ -36,6 +40,8 @@ class ChildCardWidget extends StatefulWidget {
|
||||
required this.onToggleIsUnborn,
|
||||
required this.onRemove,
|
||||
required this.canBeRemoved,
|
||||
this.mode = DisplayMode.editable,
|
||||
this.onEdit,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
@@ -87,101 +93,137 @@ class _ChildCardWidgetState extends State<ChildCardWidget> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final config = DisplayConfig.fromContext(context, mode: widget.mode);
|
||||
final screenSize = MediaQuery.of(context).size;
|
||||
final scaleFactor = config.isMobile ? 0.9 : 1.1; // Réduire légèrement sur mobile
|
||||
|
||||
// Si mode Readonly Desktop : Layout spécial "Vintage" horizontal
|
||||
if (config.isReadonly && !config.isMobile) {
|
||||
return _buildReadonlyDesktopCard(context, config, screenSize);
|
||||
}
|
||||
|
||||
// Si mode Readonly Mobile : Layout spécial "Vintage" vertical (1:2)
|
||||
if (config.isReadonly && config.isMobile) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: screenSize.width * 0.05),
|
||||
child: _buildReadonlyMobileCard(context, config),
|
||||
);
|
||||
}
|
||||
|
||||
final File? currentChildImage = widget.childData.imageFile;
|
||||
// Utiliser la couleur de la carte de childData pour l'ombre si besoin, ou directement pour le fond
|
||||
// ... (reste du code existant pour mobile/editable)
|
||||
final Color baseCardColorForShadow = widget.childData.cardColor == CardColorVertical.lavender
|
||||
? Colors.purple.shade200
|
||||
: (widget.childData.cardColor == CardColorVertical.pink ? Colors.pink.shade200 : Colors.grey.shade200); // Placeholder pour autres couleurs
|
||||
: (widget.childData.cardColor == CardColorVertical.pink ? Colors.pink.shade200 : Colors.grey.shade200);
|
||||
final Color initialPhotoShadow = baseCardColorForShadow.withAlpha(90);
|
||||
final Color hoverPhotoShadow = baseCardColorForShadow.withAlpha(130);
|
||||
|
||||
return Container(
|
||||
width: 345.0 * 1.1, // 379.5
|
||||
height: 570.0 * 1.2, // 684.0
|
||||
padding: const EdgeInsets.all(22.0 * 1.1), // 24.2
|
||||
width: config.isMobile ? double.infinity : screenSize.width * 0.6,
|
||||
// On retire la hauteur fixe pour laisser le contenu définir la taille, comme les autres cartes
|
||||
// height: config.isMobile ? null : 600.0 * scaleFactor,
|
||||
padding: EdgeInsets.all(22.0 * scaleFactor),
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(image: AssetImage(widget.childData.cardColor.path), fit: BoxFit.cover),
|
||||
borderRadius: BorderRadius.circular(20 * 1.1), // 22
|
||||
image: DecorationImage(image: AssetImage(widget.childData.cardColor.path), fit: BoxFit.fill),
|
||||
borderRadius: BorderRadius.circular(20 * scaleFactor),
|
||||
),
|
||||
child: Stack(
|
||||
children: [
|
||||
Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// ... (contenu existant)
|
||||
HoverReliefWidget(
|
||||
onPressed: widget.onPickImage,
|
||||
onPressed: config.isReadonly ? null : widget.onPickImage,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
initialShadowColor: initialPhotoShadow,
|
||||
hoverShadowColor: hoverPhotoShadow,
|
||||
child: SizedBox(
|
||||
height: 200.0,
|
||||
width: 200.0,
|
||||
height: 200.0 * (config.isMobile ? 0.8 : 1.0),
|
||||
width: 200.0 * (config.isMobile ? 0.8 : 1.0),
|
||||
child: Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(5.0 * 1.1), // 5.5
|
||||
padding: EdgeInsets.all(5.0 * scaleFactor),
|
||||
child: currentChildImage != null
|
||||
? ClipRRect(borderRadius: BorderRadius.circular(10 * 1.1), child: kIsWeb ? Image.network(currentChildImage.path, fit: BoxFit.cover) : Image.file(currentChildImage, fit: BoxFit.cover))
|
||||
? ClipRRect(borderRadius: BorderRadius.circular(10 * scaleFactor), child: kIsWeb ? Image.network(currentChildImage.path, fit: BoxFit.cover) : Image.file(currentChildImage, fit: BoxFit.cover))
|
||||
: Image.asset('assets/images/photo.png', fit: BoxFit.contain),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12.0 * 1.1), // Augmenté pour plus d'espace après la photo
|
||||
SizedBox(height: 10.0 * scaleFactor),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text('Enfant à naître ?', style: GoogleFonts.merienda(fontSize: 16 * 1.1, fontWeight: FontWeight.w600)),
|
||||
Switch(value: widget.childData.isUnbornChild, onChanged: widget.onToggleIsUnborn, activeColor: Theme.of(context).primaryColor),
|
||||
Text(
|
||||
'Enfant à naître ?',
|
||||
style: GoogleFonts.merienda(
|
||||
fontSize: config.isMobile ? 14 : 16 * scaleFactor,
|
||||
fontWeight: FontWeight.w600
|
||||
)
|
||||
),
|
||||
Transform.scale(
|
||||
scale: config.isMobile ? 0.8 : 1.0,
|
||||
child: Switch(
|
||||
value: widget.childData.isUnbornChild,
|
||||
onChanged: config.isReadonly ? null : widget.onToggleIsUnborn,
|
||||
activeColor: Theme.of(context).primaryColor,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 9.0 * 1.1), // 9.9
|
||||
CustomAppTextField(
|
||||
SizedBox(height: 8.0 * scaleFactor),
|
||||
_buildField(
|
||||
config: config,
|
||||
scaleFactor: scaleFactor,
|
||||
label: 'Prénom',
|
||||
controller: _firstNameController,
|
||||
labelText: 'Prénom',
|
||||
hintText: 'Facultatif si à naître',
|
||||
hint: 'Facultatif si à naître',
|
||||
isRequired: !widget.childData.isUnbornChild,
|
||||
fieldHeight: 55.0 * 1.1, // 60.5
|
||||
),
|
||||
const SizedBox(height: 6.0 * 1.1), // 6.6
|
||||
CustomAppTextField(
|
||||
SizedBox(height: 5.0 * scaleFactor),
|
||||
_buildField(
|
||||
config: config,
|
||||
scaleFactor: scaleFactor,
|
||||
label: 'Nom',
|
||||
controller: _lastNameController,
|
||||
labelText: 'Nom',
|
||||
hintText: 'Nom de l\'enfant',
|
||||
enabled: true,
|
||||
fieldHeight: 55.0 * 1.1, // 60.5
|
||||
hint: 'Nom de l\'enfant',
|
||||
),
|
||||
const SizedBox(height: 9.0 * 1.1), // 9.9
|
||||
CustomAppTextField(
|
||||
SizedBox(height: 8.0 * scaleFactor),
|
||||
_buildField(
|
||||
config: config,
|
||||
scaleFactor: scaleFactor,
|
||||
label: widget.childData.isUnbornChild ? 'Date prévisionnelle de naissance' : 'Date de naissance',
|
||||
controller: _dobController,
|
||||
labelText: widget.childData.isUnbornChild ? 'Date prévisionnelle de naissance' : 'Date de naissance',
|
||||
hintText: 'JJ/MM/AAAA',
|
||||
hint: 'JJ/MM/AAAA',
|
||||
readOnly: true,
|
||||
onTap: widget.onDateSelect,
|
||||
onTap: config.isReadonly ? null : widget.onDateSelect,
|
||||
suffixIcon: Icons.calendar_today,
|
||||
fieldHeight: 55.0 * 1.1, // 60.5
|
||||
),
|
||||
const SizedBox(height: 11.0 * 1.1), // 12.1
|
||||
SizedBox(height: 10.0 * scaleFactor),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
AppCustomCheckbox(
|
||||
label: 'Consentement photo',
|
||||
value: widget.childData.photoConsent,
|
||||
onChanged: widget.onTogglePhotoConsent,
|
||||
checkboxSize: 22.0 * 1.1, // 24.2
|
||||
onChanged: config.isReadonly ? (v) {} : widget.onTogglePhotoConsent,
|
||||
checkboxSize: config.isMobile ? 20.0 : 22.0 * scaleFactor,
|
||||
fontSize: config.isMobile ? 13.0 : 16.0,
|
||||
),
|
||||
const SizedBox(height: 6.0 * 1.1), // 6.6
|
||||
SizedBox(height: 5.0 * scaleFactor),
|
||||
AppCustomCheckbox(
|
||||
label: 'Naissance multiple',
|
||||
value: widget.childData.multipleBirth,
|
||||
onChanged: widget.onToggleMultipleBirth,
|
||||
checkboxSize: 22.0 * 1.1, // 24.2
|
||||
onChanged: config.isReadonly ? (v) {} : widget.onToggleMultipleBirth,
|
||||
checkboxSize: config.isMobile ? 20.0 : 22.0 * scaleFactor,
|
||||
fontSize: config.isMobile ? 13.0 : 16.0,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
if (widget.canBeRemoved)
|
||||
if (widget.canBeRemoved && !config.isReadonly)
|
||||
Positioned(
|
||||
top: -5, right: -5,
|
||||
child: InkWell(
|
||||
@@ -189,14 +231,361 @@ class _ChildCardWidgetState extends State<ChildCardWidget> {
|
||||
customBorder: const CircleBorder(),
|
||||
child: Image.asset(
|
||||
'assets/images/red_cross2.png',
|
||||
width: 36,
|
||||
height: 36,
|
||||
width: config.isMobile ? 30 : 36,
|
||||
height: config.isMobile ? 30 : 36,
|
||||
fit: BoxFit.contain,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
if (config.isReadonly && widget.onEdit != null)
|
||||
Positioned(
|
||||
top: -5, right: -5,
|
||||
child: IconButton(
|
||||
icon: const Icon(Icons.edit, color: Colors.black54),
|
||||
onPressed: widget.onEdit,
|
||||
tooltip: 'Modifier',
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Layout SPÉCIAL Readonly Desktop (Ancien Design Horizontal)
|
||||
Widget _buildReadonlyDesktopCard(BuildContext context, DisplayConfig config, Size screenSize) {
|
||||
// Convertir la couleur verticale (pour mobile) en couleur horizontale (pour desktop/récap)
|
||||
// On mappe les couleurs verticales vers horizontales
|
||||
String horizontalCardAsset = CardColorHorizontal.lavender.path; // Par défaut
|
||||
|
||||
// Mapping manuel simple
|
||||
if (widget.childData.cardColor.path.contains('lavender')) horizontalCardAsset = CardColorHorizontal.lavender.path;
|
||||
else if (widget.childData.cardColor.path.contains('blue')) horizontalCardAsset = CardColorHorizontal.blue.path;
|
||||
else if (widget.childData.cardColor.path.contains('green')) horizontalCardAsset = CardColorHorizontal.green.path;
|
||||
else if (widget.childData.cardColor.path.contains('lime')) horizontalCardAsset = CardColorHorizontal.lime.path;
|
||||
else if (widget.childData.cardColor.path.contains('peach')) horizontalCardAsset = CardColorHorizontal.peach.path;
|
||||
else if (widget.childData.cardColor.path.contains('pink')) horizontalCardAsset = CardColorHorizontal.pink.path;
|
||||
else if (widget.childData.cardColor.path.contains('red')) horizontalCardAsset = CardColorHorizontal.red.path;
|
||||
|
||||
final File? currentChildImage = widget.childData.imageFile;
|
||||
final cardWidth = screenSize.width / 2.0;
|
||||
|
||||
return SizedBox(
|
||||
width: cardWidth,
|
||||
child: AspectRatio(
|
||||
aspectRatio: 2.0,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(vertical: 20.0, horizontal: 25.0),
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image: AssetImage(horizontalCardAsset),
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
// Titre + Edit Button
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
'Enfant ${widget.childIndex + 1}' + (widget.childData.isUnbornChild ? ' (à naître)' : ''),
|
||||
style: GoogleFonts.merienda(fontSize: 28, fontWeight: FontWeight.w600),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
),
|
||||
if (widget.onEdit != null)
|
||||
IconButton(
|
||||
icon: const Icon(Icons.edit, color: Colors.black54, size: 28),
|
||||
onPressed: widget.onEdit,
|
||||
tooltip: 'Modifier',
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 18),
|
||||
|
||||
// Contenu principal : Photo + Champs
|
||||
Expanded(
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
// PHOTO (1/3)
|
||||
Expanded(
|
||||
flex: 1,
|
||||
child: Center(
|
||||
child: AspectRatio(
|
||||
aspectRatio: 1,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(18),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.1),
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, 5),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(18),
|
||||
child: currentChildImage != null
|
||||
? (kIsWeb
|
||||
? Image.network(currentChildImage.path, fit: BoxFit.cover)
|
||||
: Image.file(currentChildImage, fit: BoxFit.cover))
|
||||
: Image.asset('assets/images/photo.png', fit: BoxFit.contain),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 32),
|
||||
|
||||
// CHAMPS (2/3)
|
||||
Expanded(
|
||||
flex: 2,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
_buildReadonlyField('Prénom :', _firstNameController.text),
|
||||
const SizedBox(height: 12),
|
||||
_buildReadonlyField('Nom :', _lastNameController.text),
|
||||
const SizedBox(height: 12),
|
||||
_buildReadonlyField(
|
||||
widget.childData.isUnbornChild ? 'Date prévisionnelle :' : 'Date de naissance :',
|
||||
_dobController.text
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 18),
|
||||
|
||||
// Consentements
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
AppCustomCheckbox(
|
||||
label: 'Consentement photo',
|
||||
value: widget.childData.photoConsent,
|
||||
onChanged: (v) {}, // Readonly
|
||||
checkboxSize: 22.0,
|
||||
fontSize: 16.0,
|
||||
),
|
||||
const SizedBox(width: 32),
|
||||
AppCustomCheckbox(
|
||||
label: 'Naissance multiple',
|
||||
value: widget.childData.multipleBirth,
|
||||
onChanged: (v) {}, // Readonly
|
||||
checkboxSize: 22.0,
|
||||
fontSize: 16.0,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/// Carte en mode readonly MOBILE avec hauteur adaptative
|
||||
Widget _buildReadonlyMobileCard(BuildContext context, DisplayConfig config) {
|
||||
final File? currentChildImage = widget.childData.imageFile;
|
||||
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
// Pas de height fixe
|
||||
padding: const EdgeInsets.symmetric(vertical: 20.0, horizontal: 24.0),
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image: AssetImage(widget.childData.cardColor.path), // Image verticale
|
||||
fit: BoxFit.fill, // Fill pour s'adapter
|
||||
),
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
),
|
||||
child: Stack(
|
||||
children: [
|
||||
Column(
|
||||
mainAxisSize: MainAxisSize.min, // S'adapte au contenu
|
||||
children: [
|
||||
// Titre + Edit Button
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
'Enfant ${widget.childIndex + 1}' + (widget.childData.isUnbornChild ? ' (à naître)' : ''),
|
||||
style: GoogleFonts.merienda(fontSize: 18, fontWeight: FontWeight.bold, color: Colors.black87),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
),
|
||||
if (widget.onEdit != null)
|
||||
const SizedBox(width: 28),
|
||||
],
|
||||
),
|
||||
|
||||
// Contenu aligné en haut
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 20.0),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: [
|
||||
// Photo
|
||||
SizedBox(
|
||||
height: 150,
|
||||
width: 150,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.1),
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, 5),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
child: currentChildImage != null
|
||||
? (kIsWeb
|
||||
? Image.network(currentChildImage.path, fit: BoxFit.cover)
|
||||
: Image.file(currentChildImage, fit: BoxFit.cover))
|
||||
: Image.asset('assets/images/photo.png', fit: BoxFit.contain),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// Champs
|
||||
_buildReadonlyField('Prénom :', _firstNameController.text),
|
||||
const SizedBox(height: 8),
|
||||
_buildReadonlyField('Nom :', _lastNameController.text),
|
||||
const SizedBox(height: 8),
|
||||
_buildReadonlyField(
|
||||
widget.childData.isUnbornChild ? 'Date prévisionnelle :' : 'Date de naissance :',
|
||||
_dobController.text
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
|
||||
// Consentements
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
AppCustomCheckbox(
|
||||
label: 'Consentement photo',
|
||||
value: widget.childData.photoConsent,
|
||||
onChanged: (v) {},
|
||||
checkboxSize: 20.0,
|
||||
fontSize: 14.0,
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Row(
|
||||
children: [
|
||||
AppCustomCheckbox(
|
||||
label: 'Naissance multiple',
|
||||
value: widget.childData.multipleBirth,
|
||||
onChanged: (v) {},
|
||||
checkboxSize: 20.0,
|
||||
fontSize: 14.0,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
if (widget.onEdit != null)
|
||||
Positioned(
|
||||
top: 0,
|
||||
right: 0,
|
||||
child: IconButton(
|
||||
padding: EdgeInsets.zero,
|
||||
constraints: const BoxConstraints(),
|
||||
icon: const Icon(Icons.edit, color: Colors.black54, size: 24),
|
||||
onPressed: widget.onEdit,
|
||||
tooltip: 'Modifier',
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Helper pour champ Readonly style "Beige"
|
||||
Widget _buildReadonlyField(String label, String value) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
label,
|
||||
style: GoogleFonts.merienda(fontSize: 22.0, fontWeight: FontWeight.w600),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Container(
|
||||
width: double.infinity,
|
||||
height: 50.0,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 18.0, vertical: 12.0),
|
||||
decoration: BoxDecoration(
|
||||
image: const DecorationImage(
|
||||
image: AssetImage('assets/images/bg_beige.png'),
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Text(
|
||||
value.isNotEmpty ? value : '-',
|
||||
style: GoogleFonts.merienda(fontSize: 18.0),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildField({
|
||||
required DisplayConfig config,
|
||||
required double scaleFactor,
|
||||
required String label,
|
||||
required TextEditingController controller,
|
||||
String? hint,
|
||||
bool isRequired = false,
|
||||
bool readOnly = false,
|
||||
VoidCallback? onTap,
|
||||
IconData? suffixIcon,
|
||||
}) {
|
||||
if (config.isReadonly) {
|
||||
return FormFieldWrapper(
|
||||
config: config,
|
||||
label: label,
|
||||
value: controller.text,
|
||||
);
|
||||
} else {
|
||||
return CustomAppTextField(
|
||||
controller: controller,
|
||||
labelText: label,
|
||||
hintText: hint ?? label,
|
||||
isRequired: isRequired,
|
||||
fieldHeight: config.isMobile ? 40.0 : 50.0 * scaleFactor, // Hauteur réduite
|
||||
labelFontSize: config.isMobile ? 12.0 : 18.0, // Police réduite
|
||||
inputFontSize: config.isMobile ? 13.0 : 16.0, // Police réduite
|
||||
readOnly: readOnly,
|
||||
onTap: onTap,
|
||||
suffixIcon: suffixIcon,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -54,12 +54,12 @@ class _CustomAppTextFieldState extends State<CustomAppTextField> {
|
||||
String getBackgroundImagePath() {
|
||||
switch (widget.style) {
|
||||
case CustomAppTextFieldStyle.lavande:
|
||||
return 'assets/images/input_field_lavande.png';
|
||||
return 'assets/images/bg_lavender.png';
|
||||
case CustomAppTextFieldStyle.jaune:
|
||||
return 'assets/images/input_field_jaune.png';
|
||||
return 'assets/images/bg_yellow.png';
|
||||
case CustomAppTextFieldStyle.beige:
|
||||
default:
|
||||
return 'assets/images/input_field_bg.png';
|
||||
return 'assets/images/bg_beige.png';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
|
||||
/// Style de bouton de navigation
|
||||
enum NavigationButtonStyle {
|
||||
green, // Bouton vert avec texte vert foncé
|
||||
purple, // Bouton violet avec texte violet foncé
|
||||
}
|
||||
|
||||
/// Widget de bouton de navigation personnalisé
|
||||
/// Utilise les assets existants pour le fond
|
||||
class CustomNavigationButton extends StatelessWidget {
|
||||
final String text;
|
||||
final VoidCallback onPressed;
|
||||
final NavigationButtonStyle style;
|
||||
final double? width;
|
||||
final double height;
|
||||
final double fontSize;
|
||||
|
||||
const CustomNavigationButton({
|
||||
super.key,
|
||||
required this.text,
|
||||
required this.onPressed,
|
||||
this.style = NavigationButtonStyle.green,
|
||||
this.width,
|
||||
this.height = 50,
|
||||
this.fontSize = 16,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final backgroundImage = _getBackgroundImage();
|
||||
final textColor = _getTextColor();
|
||||
|
||||
return SizedBox(
|
||||
width: width,
|
||||
height: height,
|
||||
child: Stack(
|
||||
children: [
|
||||
// Fond avec image
|
||||
Positioned.fill(
|
||||
child: Image.asset(
|
||||
backgroundImage,
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
),
|
||||
// Bouton cliquable
|
||||
Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
onTap: onPressed,
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
child: Center(
|
||||
child: Text(
|
||||
text,
|
||||
style: GoogleFonts.merienda(
|
||||
color: textColor,
|
||||
fontSize: fontSize,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
String _getBackgroundImage() {
|
||||
switch (style) {
|
||||
case NavigationButtonStyle.green:
|
||||
return 'assets/images/bg_green.png';
|
||||
case NavigationButtonStyle.purple:
|
||||
return 'assets/images/bg_lavender.png';
|
||||
}
|
||||
}
|
||||
|
||||
Color _getTextColor() {
|
||||
switch (style) {
|
||||
case NavigationButtonStyle.green:
|
||||
return const Color(0xFF2E7D32); // Vert foncé
|
||||
case NavigationButtonStyle.purple:
|
||||
return const Color(0xFF5E35B1); // Violet foncé
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,205 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import '../config/display_config.dart';
|
||||
import 'custom_app_text_field.dart';
|
||||
|
||||
/// Widget générique pour afficher un champ de formulaire
|
||||
/// S'adapte automatiquement selon le DisplayConfig (editable/readonly, mobile/desktop)
|
||||
class FormFieldWrapper extends StatelessWidget {
|
||||
/// Configuration d'affichage
|
||||
final DisplayConfig config;
|
||||
|
||||
/// Label du champ
|
||||
final String label;
|
||||
|
||||
/// Valeur actuelle
|
||||
final String value;
|
||||
|
||||
/// Controller pour le mode éditable
|
||||
final TextEditingController? controller;
|
||||
|
||||
/// Callback de changement (mode éditable)
|
||||
final ValueChanged<String>? onChanged;
|
||||
|
||||
/// Hint du champ (mode éditable)
|
||||
final String? hint;
|
||||
|
||||
/// Nombre de lignes (pour textarea)
|
||||
final int? maxLines;
|
||||
|
||||
/// Type de clavier
|
||||
final TextInputType? keyboardType;
|
||||
|
||||
/// Widget personnalisé à afficher (override le champ standard)
|
||||
final Widget? customWidget;
|
||||
|
||||
const FormFieldWrapper({
|
||||
super.key,
|
||||
required this.config,
|
||||
required this.label,
|
||||
required this.value,
|
||||
this.controller,
|
||||
this.onChanged,
|
||||
this.hint,
|
||||
this.maxLines,
|
||||
this.keyboardType,
|
||||
this.customWidget,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (config.isReadonly) {
|
||||
return _buildReadonlyField(context);
|
||||
} else {
|
||||
return _buildEditableField(context);
|
||||
}
|
||||
}
|
||||
|
||||
/// Construit un champ en mode lecture seule
|
||||
Widget _buildReadonlyField(BuildContext context) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.symmetric(
|
||||
vertical: LayoutHelper.getSpacing(context,
|
||||
mobileSpacing: 8.0,
|
||||
desktopSpacing: 12.0,
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Label
|
||||
Text(
|
||||
label,
|
||||
style: GoogleFonts.merienda(
|
||||
fontSize: config.isMobile ? 14 : 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: const Color(0xFF4A4A4A),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
|
||||
// Valeur avec fond beige
|
||||
Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 12,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
image: const DecorationImage(
|
||||
image: AssetImage('assets/images/bg_beige.png'),
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Text(
|
||||
value.isEmpty ? '-' : value,
|
||||
style: GoogleFonts.merienda(
|
||||
fontSize: config.isMobile ? 14 : 16,
|
||||
color: const Color(0xFF2C2C2C),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Construit un champ en mode éditable
|
||||
Widget _buildEditableField(BuildContext context) {
|
||||
// Si un widget personnalisé est fourni, l'utiliser
|
||||
if (customWidget != null) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.symmetric(
|
||||
vertical: LayoutHelper.getSpacing(context,
|
||||
mobileSpacing: 8.0,
|
||||
desktopSpacing: 12.0,
|
||||
),
|
||||
),
|
||||
child: customWidget,
|
||||
);
|
||||
}
|
||||
|
||||
// Sinon, utiliser le champ standard
|
||||
return Padding(
|
||||
padding: EdgeInsets.symmetric(
|
||||
vertical: LayoutHelper.getSpacing(context,
|
||||
mobileSpacing: 8.0,
|
||||
desktopSpacing: 12.0,
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Label
|
||||
Text(
|
||||
label,
|
||||
style: GoogleFonts.merienda(
|
||||
fontSize: config.isMobile ? 14 : 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: const Color(0xFF4A4A4A),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
|
||||
// Champ de saisie
|
||||
CustomAppTextField(
|
||||
controller: controller!,
|
||||
labelText: label,
|
||||
hintText: hint ?? label,
|
||||
keyboardType: keyboardType ?? TextInputType.text,
|
||||
fieldWidth: double.infinity,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Widget générique pour afficher une ligne de champs
|
||||
/// S'adapte automatiquement: horizontal sur desktop, vertical sur mobile
|
||||
class FormFieldRow extends StatelessWidget {
|
||||
/// Configuration d'affichage
|
||||
final DisplayConfig config;
|
||||
|
||||
/// Liste des champs à afficher
|
||||
final List<Widget> fields;
|
||||
|
||||
/// Espacement entre les champs
|
||||
final double? spacing;
|
||||
|
||||
const FormFieldRow({
|
||||
super.key,
|
||||
required this.config,
|
||||
required this.fields,
|
||||
this.spacing,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final effectiveSpacing = spacing ??
|
||||
LayoutHelper.getSpacing(context,
|
||||
mobileSpacing: 12.0,
|
||||
desktopSpacing: 20.0,
|
||||
);
|
||||
|
||||
if (config.isMobile) {
|
||||
// Layout vertical sur mobile
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: fields,
|
||||
);
|
||||
} else {
|
||||
// Layout horizontal sur desktop
|
||||
return Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
for (int i = 0; i < fields.length; i++) ...[
|
||||
Expanded(child: fields[i]),
|
||||
if (i < fields.length - 1) SizedBox(width: effectiveSpacing),
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -5,9 +5,15 @@ import 'dart:math' as math;
|
||||
|
||||
import 'custom_decorated_text_field.dart';
|
||||
import 'app_custom_checkbox.dart';
|
||||
import 'custom_navigation_button.dart';
|
||||
import 'hover_relief_widget.dart';
|
||||
import '../models/card_assets.dart';
|
||||
import '../config/display_config.dart';
|
||||
|
||||
/// Widget générique pour le formulaire de présentation avec texte libre + CGU
|
||||
/// Supporte mode éditable et readonly, responsive mobile/desktop
|
||||
class PresentationFormScreen extends StatefulWidget {
|
||||
final DisplayMode mode;
|
||||
final String stepText; // Ex: "Étape 3/4" ou "Étape 4/5"
|
||||
final String title; // Ex: "Présentation et Conditions" ou "Motivation de votre demande"
|
||||
final CardColorHorizontal cardColor;
|
||||
@@ -17,8 +23,12 @@ class PresentationFormScreen extends StatefulWidget {
|
||||
final String previousRoute;
|
||||
final Function(String text, bool cguAccepted) onSubmit;
|
||||
|
||||
final bool embedContentOnly;
|
||||
final VoidCallback? onEdit;
|
||||
|
||||
const PresentationFormScreen({
|
||||
super.key,
|
||||
this.mode = DisplayMode.editable,
|
||||
required this.stepText,
|
||||
required this.title,
|
||||
required this.cardColor,
|
||||
@@ -27,6 +37,8 @@ class PresentationFormScreen extends StatefulWidget {
|
||||
required this.initialCguAccepted,
|
||||
required this.previousRoute,
|
||||
required this.onSubmit,
|
||||
this.embedContentOnly = false,
|
||||
this.onEdit,
|
||||
});
|
||||
|
||||
@override
|
||||
@@ -66,9 +78,11 @@ class _PresentationFormScreenState extends State<PresentationFormScreen> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final screenSize = MediaQuery.of(context).size;
|
||||
final cardWidth = screenSize.width * 0.6;
|
||||
final double imageAspectRatio = 2.0;
|
||||
final cardHeight = cardWidth / imageAspectRatio;
|
||||
final config = DisplayConfig.fromContext(context, mode: widget.mode);
|
||||
|
||||
if (widget.embedContentOnly) {
|
||||
return _buildCard(context, config, screenSize);
|
||||
}
|
||||
|
||||
return Scaffold(
|
||||
body: Stack(
|
||||
@@ -76,94 +90,497 @@ class _PresentationFormScreenState extends State<PresentationFormScreen> {
|
||||
Positioned.fill(
|
||||
child: Image.asset('assets/images/paper2.png', fit: BoxFit.cover, repeat: ImageRepeat.repeat),
|
||||
),
|
||||
Center(
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.symmetric(vertical: 40.0, horizontal: 50.0),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
config.isMobile
|
||||
? _buildMobileLayout(context, config, screenSize)
|
||||
: _buildDesktopLayout(context, config, screenSize),
|
||||
// Chevrons desktop uniquement
|
||||
if (!config.isMobile) ...[
|
||||
// Chevron Gauche (Retour)
|
||||
Positioned(
|
||||
top: screenSize.height / 2 - 20,
|
||||
left: 40,
|
||||
child: IconButton(
|
||||
icon: Transform(
|
||||
alignment: Alignment.center,
|
||||
transform: Matrix4.rotationY(math.pi),
|
||||
child: Image.asset('assets/images/chevron_right.png', height: 40),
|
||||
),
|
||||
onPressed: () {
|
||||
if (context.canPop()) {
|
||||
context.pop();
|
||||
} else {
|
||||
context.go(widget.previousRoute);
|
||||
}
|
||||
},
|
||||
tooltip: 'Retour',
|
||||
),
|
||||
),
|
||||
// Chevron Droit (Suivant)
|
||||
Positioned(
|
||||
top: screenSize.height / 2 - 20,
|
||||
right: 40,
|
||||
child: IconButton(
|
||||
icon: Image.asset('assets/images/chevron_right.png', height: 40),
|
||||
onPressed: _cguAccepted ? _handleSubmit : null,
|
||||
tooltip: 'Suivant',
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Layout MOBILE : Plein écran sans scroll global
|
||||
Widget _buildMobileLayout(BuildContext context, DisplayConfig config, Size screenSize) {
|
||||
return Column(
|
||||
children: [
|
||||
// Header fixe
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 20.0),
|
||||
child: Column(
|
||||
children: [
|
||||
Text(
|
||||
widget.stepText,
|
||||
style: GoogleFonts.merienda(
|
||||
fontSize: 13,
|
||||
color: Colors.black54,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
widget.title,
|
||||
style: GoogleFonts.merienda(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black87,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
// Carte qui prend tout l'espace restant
|
||||
Expanded(
|
||||
child: _buildCard(context, config, screenSize),
|
||||
),
|
||||
// Boutons en bas
|
||||
const SizedBox(height: 20),
|
||||
_buildMobileButtons(context, config, screenSize),
|
||||
const SizedBox(height: 10),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// Layout DESKTOP : Avec scroll
|
||||
Widget _buildDesktopLayout(BuildContext context, DisplayConfig config, Size screenSize) {
|
||||
return Center(
|
||||
child: SingleChildScrollView(
|
||||
padding: const EdgeInsets.symmetric(vertical: 40.0, horizontal: 50.0),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
widget.stepText,
|
||||
style: GoogleFonts.merienda(fontSize: 16, color: Colors.black54),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
Text(
|
||||
widget.title,
|
||||
style: GoogleFonts.merienda(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black87,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 30),
|
||||
_buildCard(context, config, screenSize),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Wrapper pour la carte (Mobile ou Desktop)
|
||||
Widget _buildCard(BuildContext context, DisplayConfig config, Size screenSize) {
|
||||
// Si mode Readonly Desktop : Layout spécial "Vintage" horizontal (2:1)
|
||||
if (config.isReadonly && !config.isMobile && widget.embedContentOnly) {
|
||||
return _buildReadonlyDesktopCard(context, config, screenSize);
|
||||
}
|
||||
|
||||
// Si mode Readonly Mobile : Layout spécial "Vintage" vertical (1:2)
|
||||
if (config.isReadonly && config.isMobile && widget.embedContentOnly) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: screenSize.width * 0.05),
|
||||
child: _buildMobileReadonlyCard(context, config, screenSize),
|
||||
);
|
||||
}
|
||||
|
||||
final Widget cardContent = config.isMobile
|
||||
? _buildMobileCard(context, config, screenSize)
|
||||
: _buildDesktopCard(context, config, screenSize);
|
||||
|
||||
return Stack(
|
||||
clipBehavior: Clip.none,
|
||||
children: [
|
||||
if (widget.embedContentOnly)
|
||||
Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
widget.title,
|
||||
style: GoogleFonts.merienda(
|
||||
fontSize: config.isMobile ? 18 : 22,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black87,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
cardContent,
|
||||
],
|
||||
)
|
||||
else
|
||||
cardContent,
|
||||
|
||||
if (config.isReadonly && widget.onEdit != null)
|
||||
Positioned(
|
||||
top: widget.embedContentOnly ? 50 : 10,
|
||||
right: 10,
|
||||
child: IconButton(
|
||||
icon: const Icon(Icons.edit, color: Colors.black54),
|
||||
onPressed: widget.onEdit,
|
||||
tooltip: 'Modifier',
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// Carte en mode readonly MOBILE avec hauteur adaptative
|
||||
Widget _buildMobileReadonlyCard(BuildContext context, DisplayConfig config, Size screenSize) {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
// Pas de height fixe, s'adapte au contenu
|
||||
padding: const EdgeInsets.symmetric(vertical: 20.0, horizontal: 24.0),
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image: AssetImage(_getVerticalCardAsset()),
|
||||
fit: BoxFit.fill, // Fill pour que l'image s'étire selon la hauteur du contenu
|
||||
),
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
),
|
||||
child: Stack(
|
||||
children: [
|
||||
Column(
|
||||
mainAxisSize: MainAxisSize.min, // S'adapte au contenu
|
||||
children: [
|
||||
// Titre + Edit Button
|
||||
Row(
|
||||
children: [
|
||||
Text(
|
||||
widget.stepText,
|
||||
style: GoogleFonts.merienda(fontSize: 16, color: Colors.black54),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
Text(
|
||||
widget.title,
|
||||
style: GoogleFonts.merienda(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.black87),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 30),
|
||||
Container(
|
||||
width: cardWidth,
|
||||
height: cardHeight,
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image: AssetImage(widget.cardColor.path),
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(40.0),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Expanded(
|
||||
child: CustomDecoratedTextField(
|
||||
controller: _textController,
|
||||
hintText: widget.textFieldHint,
|
||||
fieldHeight: cardHeight * 0.6,
|
||||
maxLines: 10,
|
||||
expandDynamically: true,
|
||||
fontSize: 18.0,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
AppCustomCheckbox(
|
||||
label: 'J\'accepte les Conditions Générales\nd\'Utilisation et la Politique de confidentialité',
|
||||
value: _cguAccepted,
|
||||
onChanged: (value) => setState(() => _cguAccepted = value ?? false),
|
||||
),
|
||||
],
|
||||
Expanded(
|
||||
child: Text(
|
||||
widget.title,
|
||||
style: GoogleFonts.merienda(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black87
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
),
|
||||
if (widget.onEdit != null)
|
||||
const SizedBox(width: 28),
|
||||
],
|
||||
),
|
||||
|
||||
// Contenu aligné en haut (Texte scrollable + Checkbox)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 20.0),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: [
|
||||
// Champ texte scrollable
|
||||
// On utilise ConstrainedBox pour limiter la hauteur max
|
||||
ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxHeight: 300), // Max height pour éviter une carte infinie
|
||||
child: CustomDecoratedTextField(
|
||||
controller: _textController,
|
||||
hintText: widget.textFieldHint,
|
||||
fieldHeight: null, // Flexible
|
||||
maxLines: 100,
|
||||
expandDynamically: true, // Scrollable
|
||||
fontSize: 14.0,
|
||||
readOnly: config.isReadonly,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
// Checkbox
|
||||
Transform.scale(
|
||||
scale: 0.85,
|
||||
child: AppCustomCheckbox(
|
||||
label: 'J\'accepte les CGU et la\nPolitique de confidentialité',
|
||||
value: _cguAccepted,
|
||||
onChanged: (v) {},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
if (widget.onEdit != null)
|
||||
Positioned(
|
||||
top: 0,
|
||||
right: 0,
|
||||
child: IconButton(
|
||||
padding: EdgeInsets.zero,
|
||||
constraints: const BoxConstraints(),
|
||||
icon: const Icon(Icons.edit, color: Colors.black54, size: 24),
|
||||
onPressed: widget.onEdit,
|
||||
tooltip: 'Modifier',
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Carte en mode readonly desktop avec AspectRatio 2:1 (format de l'ancien récapitulatif)
|
||||
Widget _buildReadonlyDesktopCard(BuildContext context, DisplayConfig config, Size screenSize) {
|
||||
// Largeur de la carte : 50% de l'écran
|
||||
final cardWidth = screenSize.width / 2.0;
|
||||
|
||||
return SizedBox(
|
||||
width: cardWidth,
|
||||
child: AspectRatio(
|
||||
aspectRatio: 2.0,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(vertical: 20.0, horizontal: 25.0),
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image: AssetImage(widget.cardColor.path),
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
),
|
||||
// Chevron Gauche (Retour)
|
||||
Positioned(
|
||||
top: screenSize.height / 2 - 20,
|
||||
left: 40,
|
||||
child: IconButton(
|
||||
icon: Transform(
|
||||
alignment: Alignment.center,
|
||||
transform: Matrix4.rotationY(math.pi),
|
||||
child: Image.asset('assets/images/chevron_right.png', height: 40),
|
||||
child: Column(
|
||||
children: [
|
||||
// Titre + Edit Button
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
widget.title,
|
||||
style: GoogleFonts.merienda(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.black87),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
),
|
||||
if (widget.onEdit != null)
|
||||
IconButton(
|
||||
icon: const Icon(Icons.edit, color: Colors.black54, size: 28),
|
||||
onPressed: widget.onEdit,
|
||||
tooltip: 'Modifier',
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 18),
|
||||
|
||||
// Texte de motivation
|
||||
Expanded(
|
||||
child: CustomDecoratedTextField(
|
||||
controller: _textController,
|
||||
hintText: '',
|
||||
fieldHeight: double.infinity, // Remplit l'espace disponible
|
||||
maxLines: 10,
|
||||
expandDynamically: false, // Fixe pour le readonly
|
||||
fontSize: 18.0,
|
||||
readOnly: true,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
|
||||
// CGU
|
||||
AppCustomCheckbox(
|
||||
label: 'J\'accepte les Conditions Générales\nd\'Utilisation et la Politique de confidentialité',
|
||||
value: _cguAccepted,
|
||||
onChanged: (v) {}, // Readonly
|
||||
checkboxSize: 22.0,
|
||||
fontSize: 16.0,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Carte DESKTOP : Format horizontal 2:1
|
||||
Widget _buildDesktopCard(BuildContext context, DisplayConfig config, Size screenSize) {
|
||||
final cardWidth = screenSize.width * 0.6;
|
||||
final double imageAspectRatio = 2.0;
|
||||
final cardHeight = cardWidth / imageAspectRatio;
|
||||
|
||||
return Container(
|
||||
width: cardWidth,
|
||||
height: cardHeight,
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image: AssetImage(widget.cardColor.path),
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(40.0),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Expanded(
|
||||
child: CustomDecoratedTextField(
|
||||
controller: _textController,
|
||||
hintText: widget.textFieldHint,
|
||||
fieldHeight: cardHeight * 0.6,
|
||||
maxLines: 10,
|
||||
expandDynamically: true,
|
||||
fontSize: 18.0,
|
||||
readOnly: config.isReadonly,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
AppCustomCheckbox(
|
||||
label: 'J\'accepte les Conditions Générales\nd\'Utilisation et la Politique de confidentialité',
|
||||
value: _cguAccepted,
|
||||
onChanged: config.isReadonly ? (v) {} : (value) => setState(() => _cguAccepted = value ?? false),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Carte MOBILE : Prend tout l'espace disponible
|
||||
Widget _buildMobileCard(BuildContext context, DisplayConfig config, Size screenSize) {
|
||||
// Le contenu du champ texte
|
||||
Widget textFieldContent = LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
// En mode embed (récap), constraints.maxHeight peut être infini, donc on fixe une hauteur par défaut
|
||||
// En mode standalone, on utilise la hauteur disponible
|
||||
double height = constraints.maxHeight;
|
||||
if (height.isInfinite) height = 200.0;
|
||||
|
||||
return CustomDecoratedTextField(
|
||||
controller: _textController,
|
||||
hintText: widget.textFieldHint,
|
||||
fieldHeight: height,
|
||||
maxLines: 100,
|
||||
expandDynamically: false,
|
||||
fontSize: 14.0,
|
||||
readOnly: config.isReadonly,
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
return Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: screenSize.width * 0.05),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image: AssetImage(_getVerticalCardAsset()),
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
),
|
||||
padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 20),
|
||||
child: Column(
|
||||
children: [
|
||||
// Champ de texte
|
||||
if (widget.embedContentOnly)
|
||||
// En mode récapitulatif, on donne une hauteur fixe pour éviter l'erreur d'Expanded
|
||||
SizedBox(height: 200, child: textFieldContent)
|
||||
else
|
||||
// En mode écran complet, on prend tout l'espace restant
|
||||
Expanded(child: textFieldContent),
|
||||
|
||||
const SizedBox(height: 16),
|
||||
// Checkbox en bas
|
||||
Transform.scale(
|
||||
scale: 0.85,
|
||||
child: AppCustomCheckbox(
|
||||
label: 'J\'accepte les CGU et la\nPolitique de confidentialité',
|
||||
value: _cguAccepted,
|
||||
onChanged: config.isReadonly ? (v) {} : (value) => setState(() => _cguAccepted = value ?? false),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Boutons mobile
|
||||
Widget _buildMobileButtons(BuildContext context, DisplayConfig config, Size screenSize) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: screenSize.width * 0.05,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: HoverReliefWidget(
|
||||
child: CustomNavigationButton(
|
||||
text: 'Précédent',
|
||||
style: NavigationButtonStyle.purple,
|
||||
onPressed: () {
|
||||
if (context.canPop()) {
|
||||
context.pop();
|
||||
} else {
|
||||
context.go(widget.previousRoute);
|
||||
}
|
||||
},
|
||||
width: double.infinity,
|
||||
height: 50,
|
||||
fontSize: 16,
|
||||
),
|
||||
onPressed: () {
|
||||
if (context.canPop()) {
|
||||
context.pop();
|
||||
} else {
|
||||
context.go(widget.previousRoute);
|
||||
}
|
||||
},
|
||||
tooltip: 'Retour',
|
||||
),
|
||||
),
|
||||
// Chevron Droit (Suivant)
|
||||
Positioned(
|
||||
top: screenSize.height / 2 - 20,
|
||||
right: 40,
|
||||
child: IconButton(
|
||||
icon: Image.asset('assets/images/chevron_right.png', height: 40),
|
||||
onPressed: _cguAccepted ? _handleSubmit : null,
|
||||
tooltip: 'Suivant',
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: HoverReliefWidget(
|
||||
child: CustomNavigationButton(
|
||||
text: 'Suivant',
|
||||
style: NavigationButtonStyle.green,
|
||||
onPressed: _handleSubmit,
|
||||
width: double.infinity,
|
||||
height: 50,
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Retourne l'asset de carte vertical correspondant à la couleur
|
||||
String _getVerticalCardAsset() {
|
||||
switch (widget.cardColor) {
|
||||
case CardColorHorizontal.blue:
|
||||
return CardColorVertical.blue.path;
|
||||
case CardColorHorizontal.green:
|
||||
return CardColorVertical.green.path;
|
||||
case CardColorHorizontal.lavender:
|
||||
return CardColorVertical.lavender.path;
|
||||
case CardColorHorizontal.lime:
|
||||
return CardColorVertical.lime.path;
|
||||
case CardColorHorizontal.peach:
|
||||
return CardColorVertical.peach.path;
|
||||
case CardColorHorizontal.pink:
|
||||
return CardColorVertical.pink.path;
|
||||
case CardColorHorizontal.red:
|
||||
return CardColorVertical.red.path;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,9 +5,12 @@ import 'package:intl/intl.dart';
|
||||
import 'dart:math' as math;
|
||||
import 'dart:io';
|
||||
import '../models/card_assets.dart';
|
||||
import '../config/display_config.dart';
|
||||
import 'custom_app_text_field.dart';
|
||||
import 'form_field_wrapper.dart';
|
||||
import 'app_custom_checkbox.dart';
|
||||
import 'hover_relief_widget.dart';
|
||||
import 'custom_navigation_button.dart';
|
||||
|
||||
/// Données pour le formulaire d'informations professionnelles
|
||||
class ProfessionalInfoData {
|
||||
@@ -36,7 +39,9 @@ class ProfessionalInfoData {
|
||||
|
||||
/// Widget générique pour le formulaire d'informations professionnelles
|
||||
/// Utilisé pour l'inscription des Assistantes Maternelles
|
||||
/// Supporte mode éditable et readonly, responsive mobile/desktop
|
||||
class ProfessionalInfoFormScreen extends StatefulWidget {
|
||||
final DisplayMode mode;
|
||||
final String stepText;
|
||||
final String title;
|
||||
final CardColorHorizontal cardColor;
|
||||
@@ -44,9 +49,12 @@ class ProfessionalInfoFormScreen extends StatefulWidget {
|
||||
final String previousRoute;
|
||||
final Function(ProfessionalInfoData) onSubmit;
|
||||
final Future<void> Function()? onPickPhoto;
|
||||
final bool embedContentOnly;
|
||||
final VoidCallback? onEdit;
|
||||
|
||||
const ProfessionalInfoFormScreen({
|
||||
super.key,
|
||||
this.mode = DisplayMode.editable,
|
||||
required this.stepText,
|
||||
required this.title,
|
||||
required this.cardColor,
|
||||
@@ -54,6 +62,8 @@ class ProfessionalInfoFormScreen extends StatefulWidget {
|
||||
required this.previousRoute,
|
||||
required this.onSubmit,
|
||||
this.onPickPhoto,
|
||||
this.embedContentOnly = false,
|
||||
this.onEdit,
|
||||
});
|
||||
|
||||
@override
|
||||
@@ -163,15 +173,10 @@ class _ProfessionalInfoFormScreenState extends State<ProfessionalInfoFormScreen>
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final screenSize = MediaQuery.of(context).size;
|
||||
final Color baseCardColorForShadow = Colors.green.shade300;
|
||||
final Color initialPhotoShadow = baseCardColorForShadow.withAlpha(90);
|
||||
final Color hoverPhotoShadow = baseCardColorForShadow.withAlpha(130);
|
||||
final config = DisplayConfig.fromContext(context, mode: widget.mode);
|
||||
|
||||
ImageProvider? currentImageProvider;
|
||||
if (_photoFile != null) {
|
||||
currentImageProvider = FileImage(_photoFile!);
|
||||
} else if (_photoPathFramework != null && _photoPathFramework!.startsWith('assets/')) {
|
||||
currentImageProvider = AssetImage(_photoPathFramework!);
|
||||
if (widget.embedContentOnly) {
|
||||
return _buildCard(context, config, screenSize);
|
||||
}
|
||||
|
||||
return Scaffold(
|
||||
@@ -186,201 +191,697 @@ class _ProfessionalInfoFormScreenState extends State<ProfessionalInfoFormScreen>
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(widget.stepText, style: GoogleFonts.merienda(fontSize: 16, color: Colors.black54)),
|
||||
const SizedBox(height: 10),
|
||||
Text(
|
||||
widget.stepText,
|
||||
style: GoogleFonts.merienda(
|
||||
fontSize: config.isMobile ? 13 : 16,
|
||||
color: Colors.black54,
|
||||
),
|
||||
),
|
||||
SizedBox(height: config.isMobile ? 6 : 10),
|
||||
Text(
|
||||
widget.title,
|
||||
style: GoogleFonts.merienda(
|
||||
fontSize: 24,
|
||||
fontSize: config.isMobile ? 18 : 24,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black87,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 30),
|
||||
Container(
|
||||
width: screenSize.width * 0.6,
|
||||
padding: const EdgeInsets.symmetric(vertical: 50, horizontal: 50),
|
||||
constraints: const BoxConstraints(minHeight: 650),
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(image: AssetImage(widget.cardColor.path), fit: BoxFit.fill),
|
||||
SizedBox(height: config.isMobile ? 16 : 30),
|
||||
_buildCard(context, config, screenSize),
|
||||
|
||||
// Boutons mobile sous la carte
|
||||
if (config.isMobile) ...[
|
||||
const SizedBox(height: 20),
|
||||
_buildMobileButtons(context, config, screenSize),
|
||||
const SizedBox(height: 10),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
// Chevrons desktop uniquement
|
||||
if (!config.isMobile) ...[
|
||||
// Chevron Gauche (Retour)
|
||||
Positioned(
|
||||
top: screenSize.height / 2 - 20,
|
||||
left: 40,
|
||||
child: IconButton(
|
||||
icon: Transform(
|
||||
alignment: Alignment.center,
|
||||
transform: Matrix4.rotationY(math.pi),
|
||||
child: Image.asset('assets/images/chevron_right.png', height: 40),
|
||||
),
|
||||
onPressed: () {
|
||||
if (context.canPop()) {
|
||||
context.pop();
|
||||
} else {
|
||||
context.go(widget.previousRoute);
|
||||
}
|
||||
},
|
||||
tooltip: 'Précédent',
|
||||
),
|
||||
),
|
||||
// Chevron Droit (Suivant)
|
||||
Positioned(
|
||||
top: screenSize.height / 2 - 20,
|
||||
right: 40,
|
||||
child: IconButton(
|
||||
icon: Image.asset('assets/images/chevron_right.png', height: 40),
|
||||
onPressed: _submitForm,
|
||||
tooltip: 'Suivant',
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCard(BuildContext context, DisplayConfig config, Size screenSize) {
|
||||
// Si mode Readonly Desktop : Layout spécial "Vintage" horizontal
|
||||
if (config.isReadonly && !config.isMobile && widget.embedContentOnly) {
|
||||
return _buildReadonlyDesktopCard(context, config, screenSize);
|
||||
}
|
||||
|
||||
// Si mode Readonly Mobile : Layout spécial "Vintage" vertical
|
||||
if (config.isReadonly && config.isMobile && widget.embedContentOnly) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: screenSize.width * 0.05),
|
||||
child: _buildMobileReadonlyCard(context, config, screenSize),
|
||||
);
|
||||
}
|
||||
|
||||
return Stack(
|
||||
clipBehavior: Clip.none,
|
||||
children: [
|
||||
Container(
|
||||
width: config.isMobile ? screenSize.width * 0.9 : screenSize.width * 0.6,
|
||||
padding: EdgeInsets.symmetric(
|
||||
vertical: config.isMobile ? 20 : (config.isReadonly ? 30 : 50),
|
||||
horizontal: config.isMobile ? 24 : 50,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image: AssetImage(
|
||||
config.isMobile
|
||||
? _getVerticalCardAsset()
|
||||
: widget.cardColor.path
|
||||
),
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
),
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (widget.embedContentOnly) ...[
|
||||
Text(
|
||||
widget.title,
|
||||
style: GoogleFonts.merienda(
|
||||
fontSize: config.isMobile ? 18 : 22,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black87,
|
||||
),
|
||||
child: Form(
|
||||
key: _formKey,
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
],
|
||||
config.isMobile
|
||||
? _buildMobileFields(context, config)
|
||||
: _buildDesktopFields(context, config),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
if (config.isReadonly && widget.onEdit != null)
|
||||
Positioned(
|
||||
top: 10,
|
||||
right: 10,
|
||||
child: IconButton(
|
||||
icon: const Icon(Icons.edit, color: Colors.black54),
|
||||
onPressed: widget.onEdit,
|
||||
tooltip: 'Modifier',
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// Carte en mode readonly MOBILE avec hauteur adaptative
|
||||
Widget _buildMobileReadonlyCard(BuildContext context, DisplayConfig config, Size screenSize) {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
// Pas de height fixe
|
||||
padding: const EdgeInsets.symmetric(vertical: 20.0, horizontal: 24.0),
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image: AssetImage(_getVerticalCardAsset()),
|
||||
fit: BoxFit.fill, // Fill pour s'adapter
|
||||
),
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
),
|
||||
child: Stack(
|
||||
children: [
|
||||
Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// Titre + Edit Button
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
widget.title,
|
||||
style: GoogleFonts.merienda(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black87,
|
||||
),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
),
|
||||
if (widget.onEdit != null)
|
||||
const SizedBox(width: 28),
|
||||
],
|
||||
),
|
||||
|
||||
// Contenu aligné en haut
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 20.0),
|
||||
child: _buildMobileFields(context, config),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
if (widget.onEdit != null)
|
||||
Positioned(
|
||||
top: 0,
|
||||
right: 0,
|
||||
child: IconButton(
|
||||
padding: EdgeInsets.zero,
|
||||
constraints: const BoxConstraints(),
|
||||
icon: const Icon(Icons.edit, color: Colors.black54, size: 24),
|
||||
onPressed: widget.onEdit,
|
||||
tooltip: 'Modifier',
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Carte en mode readonly desktop avec AspectRatio 2:1
|
||||
Widget _buildReadonlyDesktopCard(BuildContext context, DisplayConfig config, Size screenSize) {
|
||||
final cardWidth = screenSize.width / 2.0;
|
||||
|
||||
return SizedBox(
|
||||
width: cardWidth,
|
||||
child: AspectRatio(
|
||||
aspectRatio: 2.0,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(vertical: 20.0, horizontal: 25.0),
|
||||
decoration: BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image: AssetImage(widget.cardColor.path),
|
||||
fit: BoxFit.cover,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
// Titre + Edit Button
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
widget.title,
|
||||
style: GoogleFonts.merienda(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.black87),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
),
|
||||
if (widget.onEdit != null)
|
||||
IconButton(
|
||||
icon: const Icon(Icons.edit, color: Colors.black54, size: 28),
|
||||
onPressed: widget.onEdit,
|
||||
tooltip: 'Modifier',
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 18),
|
||||
|
||||
// Contenu
|
||||
Expanded(
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
// PHOTO (1/3)
|
||||
Expanded(
|
||||
flex: 1,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
AspectRatio(
|
||||
aspectRatio: 1,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(18),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.1),
|
||||
blurRadius: 10,
|
||||
offset: const Offset(0, 5),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(18),
|
||||
child: _photoFile != null
|
||||
? Image.file(_photoFile!, fit: BoxFit.cover)
|
||||
: (_photoPathFramework != null && _photoPathFramework!.startsWith('assets/')
|
||||
? Image.asset(_photoPathFramework!, fit: BoxFit.contain)
|
||||
: Image.asset('assets/images/photo.png', fit: BoxFit.contain)),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
AppCustomCheckbox(
|
||||
label: 'J\'accepte l\'utilisation\nde ma photo.',
|
||||
value: _photoConsent,
|
||||
onChanged: (v) {}, // Readonly
|
||||
checkboxSize: 22.0,
|
||||
fontSize: 14.0,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 32),
|
||||
|
||||
// CHAMPS (2/3) - Layout optimisé compact
|
||||
Expanded(
|
||||
flex: 2,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
// Ligne 1 : Ville + Pays
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Colonne Gauche: Photo et Checkbox
|
||||
SizedBox(
|
||||
width: 300,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
HoverReliefWidget(
|
||||
onPressed: _pickPhoto,
|
||||
borderRadius: BorderRadius.circular(10.0),
|
||||
initialShadowColor: initialPhotoShadow,
|
||||
hoverShadowColor: hoverPhotoShadow,
|
||||
child: SizedBox(
|
||||
height: 270,
|
||||
width: 270,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
image: currentImageProvider != null
|
||||
? DecorationImage(image: currentImageProvider, fit: BoxFit.cover)
|
||||
: null,
|
||||
),
|
||||
child: currentImageProvider == null
|
||||
? Image.asset('assets/images/photo.png', fit: BoxFit.contain)
|
||||
: null,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
AppCustomCheckbox(
|
||||
label: 'J\'accepte l\'utilisation\nde ma photo.',
|
||||
value: _photoConsent,
|
||||
onChanged: (val) => setState(() => _photoConsent = val ?? false),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 30),
|
||||
// Colonne Droite: Champs de naissance
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
CustomAppTextField(
|
||||
controller: _birthCityController,
|
||||
labelText: 'Ville de naissance',
|
||||
hintText: 'Votre ville de naissance',
|
||||
fieldWidth: double.infinity,
|
||||
labelFontSize: 22.0,
|
||||
inputFontSize: 20.0,
|
||||
validator: (v) => v!.isEmpty ? 'Ville requise' : null,
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
CustomAppTextField(
|
||||
controller: _birthCountryController,
|
||||
labelText: 'Pays de naissance',
|
||||
hintText: 'Votre pays de naissance',
|
||||
fieldWidth: double.infinity,
|
||||
labelFontSize: 22.0,
|
||||
inputFontSize: 20.0,
|
||||
validator: (v) => v!.isEmpty ? 'Pays requis' : null,
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
CustomAppTextField(
|
||||
controller: _dateOfBirthController,
|
||||
labelText: 'Date de naissance',
|
||||
hintText: 'JJ/MM/AAAA',
|
||||
readOnly: true,
|
||||
onTap: () => _selectDate(context),
|
||||
suffixIcon: Icons.calendar_today,
|
||||
fieldWidth: double.infinity,
|
||||
labelFontSize: 22.0,
|
||||
inputFontSize: 20.0,
|
||||
validator: (v) => _selectedDate == null ? 'Date requise' : null,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Expanded(child: _buildReadonlyField('Ville de naissance', _birthCityController.text)),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(child: _buildReadonlyField('Pays de naissance', _birthCountryController.text)),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
CustomAppTextField(
|
||||
controller: _nirController,
|
||||
labelText: 'N° Sécurité Sociale (NIR)',
|
||||
hintText: 'Votre NIR à 13 chiffres',
|
||||
keyboardType: TextInputType.number,
|
||||
fieldWidth: double.infinity,
|
||||
labelFontSize: 22.0,
|
||||
inputFontSize: 20.0,
|
||||
validator: (v) {
|
||||
if (v == null || v.isEmpty) return 'NIR requis';
|
||||
if (v.length != 13) return 'Le NIR doit contenir 13 chiffres';
|
||||
if (!RegExp(r'^[1-3]').hasMatch(v[0])) return 'Le NIR doit commencer par 1, 2 ou 3';
|
||||
return null;
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
const SizedBox(height: 12),
|
||||
|
||||
// Ligne 2 : Date + NIR (NIR prend plus de place si possible ou 50/50)
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: CustomAppTextField(
|
||||
controller: _agrementController,
|
||||
labelText: 'N° d\'agrément',
|
||||
hintText: 'Votre numéro d\'agrément',
|
||||
fieldWidth: double.infinity,
|
||||
labelFontSize: 22.0,
|
||||
inputFontSize: 20.0,
|
||||
validator: (v) => v!.isEmpty ? 'Agrément requis' : null,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 20),
|
||||
Expanded(
|
||||
child: CustomAppTextField(
|
||||
controller: _capacityController,
|
||||
labelText: 'Capacité d\'accueil',
|
||||
hintText: 'Ex: 3',
|
||||
keyboardType: TextInputType.number,
|
||||
fieldWidth: double.infinity,
|
||||
labelFontSize: 22.0,
|
||||
inputFontSize: 20.0,
|
||||
validator: (v) {
|
||||
if (v == null || v.isEmpty) return 'Capacité requise';
|
||||
final n = int.tryParse(v);
|
||||
if (n == null || n <= 0) return 'Nombre invalide';
|
||||
return null;
|
||||
},
|
||||
),
|
||||
),
|
||||
Expanded(flex: 2, child: _buildReadonlyField('Date de naissance', _dateOfBirthController.text)),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(flex: 3, child: _buildReadonlyField('NIR', _nirController.text)),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
|
||||
// Ligne 3 : Agrément + Capacité
|
||||
Row(
|
||||
children: [
|
||||
Expanded(flex: 3, child: _buildReadonlyField('N° Agrément', _agrementController.text)),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(flex: 2, child: _buildReadonlyField('Capacité', _capacityController.text)),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Helper pour champ Readonly style "Beige"
|
||||
Widget _buildReadonlyField(String label, String value) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
label,
|
||||
style: GoogleFonts.merienda(fontSize: 18.0, fontWeight: FontWeight.w600),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Container(
|
||||
width: double.infinity,
|
||||
height: 45.0, // Hauteur réduite pour compacter
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 10.0),
|
||||
decoration: BoxDecoration(
|
||||
image: const DecorationImage(
|
||||
image: AssetImage('assets/images/bg_beige.png'),
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Text(
|
||||
value.isNotEmpty ? value : '-',
|
||||
style: GoogleFonts.merienda(fontSize: 16.0),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// Layout DESKTOP : Photo à gauche, champs à droite
|
||||
Widget _buildDesktopFields(BuildContext context, DisplayConfig config) {
|
||||
final double verticalSpacing = config.isReadonly ? 16.0 : 32.0;
|
||||
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Photo + Checkbox à gauche
|
||||
SizedBox(
|
||||
width: 300,
|
||||
child: _buildPhotoSection(context, config),
|
||||
),
|
||||
const SizedBox(width: 30),
|
||||
// Champs à droite
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
_buildField(
|
||||
config: config,
|
||||
label: 'Ville de naissance',
|
||||
controller: _birthCityController,
|
||||
hint: 'Votre ville de naissance',
|
||||
validator: (v) => v!.isEmpty ? 'Ville requise' : null,
|
||||
),
|
||||
SizedBox(height: verticalSpacing),
|
||||
_buildField(
|
||||
config: config,
|
||||
label: 'Pays de naissance',
|
||||
controller: _birthCountryController,
|
||||
hint: 'Votre pays de naissance',
|
||||
validator: (v) => v!.isEmpty ? 'Pays requis' : null,
|
||||
),
|
||||
SizedBox(height: verticalSpacing),
|
||||
_buildField(
|
||||
config: config,
|
||||
label: 'Date de naissance',
|
||||
controller: _dateOfBirthController,
|
||||
hint: 'JJ/MM/AAAA',
|
||||
readOnly: true,
|
||||
onTap: () => _selectDate(context),
|
||||
suffixIcon: Icons.calendar_today,
|
||||
validator: (v) => _selectedDate == null ? 'Date requise' : null,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
// Chevron Gauche (Retour)
|
||||
Positioned(
|
||||
top: screenSize.height / 2 - 20,
|
||||
left: 40,
|
||||
child: IconButton(
|
||||
icon: Transform(
|
||||
alignment: Alignment.center,
|
||||
transform: Matrix4.rotationY(math.pi),
|
||||
child: Image.asset('assets/images/chevron_right.png', height: 40),
|
||||
],
|
||||
),
|
||||
SizedBox(height: verticalSpacing),
|
||||
_buildField(
|
||||
config: config,
|
||||
label: 'N° Sécurité Sociale (NIR)',
|
||||
controller: _nirController,
|
||||
hint: 'Votre NIR à 13 chiffres',
|
||||
keyboardType: TextInputType.number,
|
||||
validator: (v) {
|
||||
if (v == null || v.isEmpty) return 'NIR requis';
|
||||
if (v.length != 13) return 'Le NIR doit contenir 13 chiffres';
|
||||
if (!RegExp(r'^[1-3]').hasMatch(v[0])) return 'Le NIR doit commencer par 1, 2 ou 3';
|
||||
return null;
|
||||
},
|
||||
),
|
||||
SizedBox(height: verticalSpacing),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: _buildField(
|
||||
config: config,
|
||||
label: 'N° d\'agrément',
|
||||
controller: _agrementController,
|
||||
hint: 'Votre numéro d\'agrément',
|
||||
validator: (v) => v!.isEmpty ? 'Agrément requis' : null,
|
||||
),
|
||||
onPressed: () {
|
||||
if (context.canPop()) {
|
||||
context.pop();
|
||||
} else {
|
||||
context.go(widget.previousRoute);
|
||||
}
|
||||
},
|
||||
tooltip: 'Précédent',
|
||||
),
|
||||
const SizedBox(width: 20),
|
||||
Expanded(
|
||||
child: _buildField(
|
||||
config: config,
|
||||
label: 'Capacité d\'accueil',
|
||||
controller: _capacityController,
|
||||
hint: 'Ex: 3',
|
||||
keyboardType: TextInputType.number,
|
||||
validator: (v) {
|
||||
if (v == null || v.isEmpty) return 'Capacité requise';
|
||||
final n = int.tryParse(v);
|
||||
if (n == null || n <= 0) return 'Nombre invalide';
|
||||
return null;
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// Layout MOBILE : Tout empilé verticalement
|
||||
Widget _buildMobileFields(BuildContext context, DisplayConfig config) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// Photo + Checkbox en premier
|
||||
_buildPhotoSection(context, config),
|
||||
const SizedBox(height: 20),
|
||||
|
||||
_buildField(
|
||||
config: config,
|
||||
label: 'Ville de naissance',
|
||||
controller: _birthCityController,
|
||||
hint: 'Votre ville de naissance',
|
||||
validator: (v) => v!.isEmpty ? 'Ville requise' : null,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
|
||||
_buildField(
|
||||
config: config,
|
||||
label: 'Pays de naissance',
|
||||
controller: _birthCountryController,
|
||||
hint: 'Votre pays de naissance',
|
||||
validator: (v) => v!.isEmpty ? 'Pays requis' : null,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
|
||||
_buildField(
|
||||
config: config,
|
||||
label: 'Date de naissance',
|
||||
controller: _dateOfBirthController,
|
||||
hint: 'JJ/MM/AAAA',
|
||||
readOnly: true,
|
||||
onTap: () => _selectDate(context),
|
||||
suffixIcon: Icons.calendar_today,
|
||||
validator: (v) => _selectedDate == null ? 'Date requise' : null,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
|
||||
_buildField(
|
||||
config: config,
|
||||
label: 'N° Sécurité Sociale (NIR)',
|
||||
controller: _nirController,
|
||||
hint: 'Votre NIR à 13 chiffres',
|
||||
keyboardType: TextInputType.number,
|
||||
validator: (v) {
|
||||
if (v == null || v.isEmpty) return 'NIR requis';
|
||||
if (v.length != 13) return 'Le NIR doit contenir 13 chiffres';
|
||||
if (!RegExp(r'^[1-3]').hasMatch(v[0])) return 'Le NIR doit commencer par 1, 2 ou 3';
|
||||
return null;
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
|
||||
_buildField(
|
||||
config: config,
|
||||
label: 'N° d\'agrément',
|
||||
controller: _agrementController,
|
||||
hint: 'Votre numéro d\'agrément',
|
||||
validator: (v) => v!.isEmpty ? 'Agrément requis' : null,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
|
||||
_buildField(
|
||||
config: config,
|
||||
label: 'Capacité d\'accueil',
|
||||
controller: _capacityController,
|
||||
hint: 'Ex: 3',
|
||||
keyboardType: TextInputType.number,
|
||||
validator: (v) {
|
||||
if (v == null || v.isEmpty) return 'Capacité requise';
|
||||
final n = int.tryParse(v);
|
||||
if (n == null || n <= 0) return 'Nombre invalide';
|
||||
return null;
|
||||
},
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// Section photo + checkbox
|
||||
Widget _buildPhotoSection(BuildContext context, DisplayConfig config) {
|
||||
final Color baseCardColorForShadow = Colors.green.shade300;
|
||||
final Color initialPhotoShadow = baseCardColorForShadow.withAlpha(90);
|
||||
final Color hoverPhotoShadow = baseCardColorForShadow.withAlpha(130);
|
||||
|
||||
ImageProvider? currentImageProvider;
|
||||
if (_photoFile != null) {
|
||||
currentImageProvider = FileImage(_photoFile!);
|
||||
} else if (_photoPathFramework != null && _photoPathFramework!.startsWith('assets/')) {
|
||||
currentImageProvider = AssetImage(_photoPathFramework!);
|
||||
}
|
||||
|
||||
final photoSize = config.isMobile ? 200.0 : 270.0;
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
HoverReliefWidget(
|
||||
onPressed: _pickPhoto,
|
||||
borderRadius: BorderRadius.circular(10.0),
|
||||
initialShadowColor: initialPhotoShadow,
|
||||
hoverShadowColor: hoverPhotoShadow,
|
||||
child: SizedBox(
|
||||
height: photoSize,
|
||||
width: photoSize,
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
image: currentImageProvider != null
|
||||
? DecorationImage(image: currentImageProvider, fit: BoxFit.cover)
|
||||
: null,
|
||||
),
|
||||
child: currentImageProvider == null
|
||||
? Image.asset('assets/images/photo.png', fit: BoxFit.contain)
|
||||
: null,
|
||||
),
|
||||
),
|
||||
// Chevron Droit (Suivant)
|
||||
Positioned(
|
||||
top: screenSize.height / 2 - 20,
|
||||
right: 40,
|
||||
child: IconButton(
|
||||
icon: Image.asset('assets/images/chevron_right.png', height: 40),
|
||||
onPressed: _submitForm,
|
||||
tooltip: 'Suivant',
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
AppCustomCheckbox(
|
||||
label: 'J\'accepte l\'utilisation\nde ma photo.',
|
||||
value: _photoConsent,
|
||||
onChanged: (val) => setState(() => _photoConsent = val ?? false),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// Construit un champ individuel
|
||||
Widget _buildField({
|
||||
required DisplayConfig config,
|
||||
required String label,
|
||||
required TextEditingController controller,
|
||||
String? hint,
|
||||
TextInputType? keyboardType,
|
||||
bool readOnly = false,
|
||||
VoidCallback? onTap,
|
||||
IconData? suffixIcon,
|
||||
String? Function(String?)? validator,
|
||||
}) {
|
||||
if (config.isReadonly) {
|
||||
return FormFieldWrapper(
|
||||
config: config,
|
||||
label: label,
|
||||
value: controller.text,
|
||||
);
|
||||
} else {
|
||||
return CustomAppTextField(
|
||||
controller: controller,
|
||||
labelText: label,
|
||||
hintText: hint ?? label,
|
||||
fieldWidth: double.infinity,
|
||||
fieldHeight: config.isMobile ? 45.0 : 53.0,
|
||||
labelFontSize: config.isMobile ? 15.0 : 22.0,
|
||||
inputFontSize: config.isMobile ? 14.0 : 20.0,
|
||||
keyboardType: keyboardType ?? TextInputType.text,
|
||||
readOnly: readOnly,
|
||||
onTap: onTap,
|
||||
suffixIcon: suffixIcon,
|
||||
validator: validator,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Boutons mobile
|
||||
Widget _buildMobileButtons(BuildContext context, DisplayConfig config, Size screenSize) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: screenSize.width * 0.05,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: HoverReliefWidget(
|
||||
child: CustomNavigationButton(
|
||||
text: 'Précédent',
|
||||
style: NavigationButtonStyle.purple,
|
||||
onPressed: () {
|
||||
if (context.canPop()) {
|
||||
context.pop();
|
||||
} else {
|
||||
context.go(widget.previousRoute);
|
||||
}
|
||||
},
|
||||
width: double.infinity,
|
||||
height: 50,
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: HoverReliefWidget(
|
||||
child: CustomNavigationButton(
|
||||
text: 'Suivant',
|
||||
style: NavigationButtonStyle.green,
|
||||
onPressed: _submitForm,
|
||||
width: double.infinity,
|
||||
height: 50,
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Retourne l'asset de carte vertical correspondant à la couleur
|
||||
String _getVerticalCardAsset() {
|
||||
switch (widget.cardColor) {
|
||||
case CardColorHorizontal.blue:
|
||||
return CardColorVertical.blue.path;
|
||||
case CardColorHorizontal.green:
|
||||
return CardColorVertical.green.path;
|
||||
case CardColorHorizontal.lavender:
|
||||
return CardColorVertical.lavender.path;
|
||||
case CardColorHorizontal.lime:
|
||||
return CardColorVertical.lime.path;
|
||||
case CardColorHorizontal.peach:
|
||||
return CardColorVertical.peach.path;
|
||||
case CardColorHorizontal.pink:
|
||||
return CardColorVertical.pink.path;
|
||||
case CardColorHorizontal.red:
|
||||
return CardColorVertical.red.path;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@ class SummaryScreen extends StatelessWidget {
|
||||
actions: [
|
||||
Center(
|
||||
child: ImageButton(
|
||||
bg: 'assets/images/btn_green.png',
|
||||
bg: 'assets/images/bg_green.png',
|
||||
text: 'OK',
|
||||
textColor: const Color(0xFF2D6A4F),
|
||||
width: 150,
|
||||
@@ -89,7 +89,7 @@ class SummaryScreen extends StatelessWidget {
|
||||
const SizedBox(height: 20),
|
||||
|
||||
ImageButton(
|
||||
bg: 'assets/images/btn_green.png',
|
||||
bg: 'assets/images/bg_green.png',
|
||||
text: submitButtonText,
|
||||
textColor: const Color(0xFF2D6A4F),
|
||||
width: 350,
|
||||
@@ -230,11 +230,12 @@ Widget buildDisplayFieldValue(
|
||||
height: multiLine ? null : fieldHeight,
|
||||
constraints: multiLine ? const BoxConstraints(minHeight: 50.0) : null,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 18.0, vertical: 12.0),
|
||||
decoration: const BoxDecoration(
|
||||
image: DecorationImage(
|
||||
image: AssetImage('assets/images/input_field_bg.png'),
|
||||
decoration: BoxDecoration(
|
||||
image: const DecorationImage(
|
||||
image: AssetImage('assets/images/bg_beige.png'),
|
||||
fit: BoxFit.fill,
|
||||
),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Text(
|
||||
value.isNotEmpty ? value : '-',
|
||||
|
||||
Reference in New Issue
Block a user