477 lines
20 KiB
Dart
477 lines
20 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
import 'dart:math' as math; // Pour la rotation du chevron
|
|
import '../../widgets/hover_relief_widget.dart'; // Import du nouveau widget
|
|
import 'package:image_picker/image_picker.dart';
|
|
// import 'package:image_cropper/image_cropper.dart'; // Supprimé
|
|
import 'dart:io' show File, Platform; // Ajout de Platform
|
|
import 'package:flutter/foundation.dart' show kIsWeb; // Import pour kIsWeb
|
|
import '../../widgets/custom_app_text_field.dart'; // Import du nouveau widget TextField
|
|
import '../../widgets/app_custom_checkbox.dart'; // Import du nouveau widget Checkbox
|
|
|
|
// Classe de données pour un enfant
|
|
class _ChildFormData {
|
|
final Key key; // Pour aider Flutter à identifier les widgets dans une liste
|
|
final TextEditingController firstNameController;
|
|
final TextEditingController lastNameController;
|
|
final TextEditingController dobController;
|
|
bool photoConsent;
|
|
bool multipleBirth;
|
|
bool isUnbornChild;
|
|
File? imageFile;
|
|
|
|
_ChildFormData({
|
|
required this.key,
|
|
String initialFirstName = '',
|
|
String initialLastName = '',
|
|
String initialDob = '',
|
|
this.photoConsent = false,
|
|
this.multipleBirth = false,
|
|
this.isUnbornChild = false,
|
|
this.imageFile,
|
|
}) : firstNameController = TextEditingController(text: initialFirstName),
|
|
lastNameController = TextEditingController(text: initialLastName),
|
|
dobController = TextEditingController(text: initialDob);
|
|
|
|
// Méthode pour disposer les contrôleurs
|
|
void dispose() {
|
|
firstNameController.dispose();
|
|
lastNameController.dispose();
|
|
dobController.dispose();
|
|
}
|
|
}
|
|
|
|
class ParentRegisterStep3Screen extends StatefulWidget {
|
|
const ParentRegisterStep3Screen({super.key});
|
|
|
|
@override
|
|
State<ParentRegisterStep3Screen> createState() => _ParentRegisterStep3ScreenState();
|
|
}
|
|
|
|
class _ParentRegisterStep3ScreenState extends State<ParentRegisterStep3Screen> {
|
|
// TODO: Gérer une liste d'enfants et leurs contrôleurs respectifs
|
|
// List<ChildData> _children = [ChildData()]; // Commencer avec un enfant
|
|
final _formKey = GlobalKey<FormState>(); // Une clé par enfant sera nécessaire si validation complexe
|
|
|
|
// Liste pour stocker les données de chaque enfant
|
|
List<_ChildFormData> _childrenDataList = [];
|
|
final ScrollController _scrollController = ScrollController(); // Ajout du ScrollController
|
|
bool _isScrollable = false;
|
|
bool _showLeftFade = false;
|
|
bool _showRightFade = false;
|
|
static const double _fadeExtent = 0.05; // Pourcentage de la vue pour le fondu (5%)
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_addChild();
|
|
_scrollController.addListener(_scrollListener);
|
|
// Appel initial pour définir l'état des fondus après le premier layout
|
|
WidgetsBinding.instance.addPostFrameCallback((_) => _scrollListener());
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
// Disposer les contrôleurs de tous les enfants
|
|
for (var childData in _childrenDataList) {
|
|
childData.dispose();
|
|
}
|
|
_scrollController.removeListener(_scrollListener); // Ne pas oublier de retirer le listener
|
|
_scrollController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void _scrollListener() {
|
|
if (!_scrollController.hasClients) return; // S'assurer que le controller est attaché
|
|
|
|
final position = _scrollController.position;
|
|
final newIsScrollable = position.maxScrollExtent > 0.0;
|
|
// Le fondu à gauche est affiché si on a scrollé plus loin que la moitié de la zone de fondu
|
|
final newShowLeftFade = newIsScrollable && position.pixels > (position.viewportDimension * _fadeExtent / 2);
|
|
// Le fondu à droite est affiché s'il reste à scroller plus que la moitié de la zone de fondu
|
|
final newShowRightFade = newIsScrollable && position.pixels < (position.maxScrollExtent - (position.viewportDimension * _fadeExtent / 2));
|
|
|
|
if (newIsScrollable != _isScrollable ||
|
|
newShowLeftFade != _showLeftFade ||
|
|
newShowRightFade != _showRightFade) {
|
|
setState(() {
|
|
_isScrollable = newIsScrollable;
|
|
_showLeftFade = newShowLeftFade;
|
|
_showRightFade = newShowRightFade;
|
|
});
|
|
}
|
|
}
|
|
|
|
void _addChild() {
|
|
String initialLastName = '';
|
|
if (_childrenDataList.isNotEmpty) {
|
|
initialLastName = _childrenDataList.first.lastNameController.text;
|
|
}
|
|
setState(() {
|
|
_childrenDataList.add(_ChildFormData(
|
|
key: UniqueKey(),
|
|
initialLastName: initialLastName,
|
|
));
|
|
});
|
|
// S'assurer que le listener est appelé après la mise à jour de l'UI
|
|
// et faire défiler vers la fin si possible
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
_scrollListener(); // Mettre à jour l'état des fondus
|
|
if (_scrollController.hasClients && _scrollController.position.maxScrollExtent > 0.0) {
|
|
_scrollController.animateTo(
|
|
_scrollController.position.maxScrollExtent,
|
|
duration: const Duration(milliseconds: 300),
|
|
curve: Curves.easeOut,
|
|
);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Méthode pour sélectionner une image (devra être adaptée pour l'index)
|
|
Future<void> _pickImage(int childIndex) async {
|
|
final ImagePicker picker = ImagePicker();
|
|
try {
|
|
final XFile? pickedFile = await picker.pickImage(
|
|
source: ImageSource.gallery,
|
|
imageQuality: 70,
|
|
maxWidth: 1024,
|
|
maxHeight: 1024,
|
|
);
|
|
|
|
if (pickedFile != null) {
|
|
setState(() {
|
|
if (childIndex < _childrenDataList.length) {
|
|
_childrenDataList[childIndex].imageFile = File(pickedFile.path);
|
|
}
|
|
});
|
|
} // Fin de if (pickedFile != null)
|
|
|
|
} catch (e) {
|
|
print("Erreur lors de la sélection de l'image: $e");
|
|
}
|
|
}
|
|
|
|
Future<void> _selectDate(BuildContext context, int childIndex) async {
|
|
final _ChildFormData currentChild = _childrenDataList[childIndex];
|
|
final DateTime now = DateTime.now();
|
|
DateTime initialDatePickerDate = now;
|
|
DateTime firstDatePickerDate = DateTime(1980);
|
|
DateTime lastDatePickerDate = now;
|
|
|
|
if (currentChild.isUnbornChild) {
|
|
firstDatePickerDate = now;
|
|
lastDatePickerDate = now.add(const Duration(days: 300));
|
|
if (currentChild.dobController.text.isNotEmpty) {
|
|
try {
|
|
List<String> parts = currentChild.dobController.text.split('/');
|
|
DateTime? parsedDate = DateTime.tryParse("${parts[2]}-${parts[1].padLeft(2, '0')}-${parts[0].padLeft(2, '0')}");
|
|
if (parsedDate != null && !parsedDate.isBefore(firstDatePickerDate) && !parsedDate.isAfter(lastDatePickerDate)) {
|
|
initialDatePickerDate = parsedDate;
|
|
}
|
|
} catch (e) { /* Ignorer */ }
|
|
}
|
|
} else {
|
|
if (currentChild.dobController.text.isNotEmpty) {
|
|
try {
|
|
List<String> parts = currentChild.dobController.text.split('/');
|
|
DateTime? parsedDate = DateTime.tryParse("${parts[2]}-${parts[1].padLeft(2, '0')}-${parts[0].padLeft(2, '0')}");
|
|
if (parsedDate != null && !parsedDate.isBefore(firstDatePickerDate) && !parsedDate.isAfter(lastDatePickerDate)) {
|
|
initialDatePickerDate = parsedDate;
|
|
}
|
|
} catch (e) { /* Ignorer */ }
|
|
}
|
|
}
|
|
|
|
final DateTime? picked = await showDatePicker(
|
|
context: context,
|
|
initialDate: initialDatePickerDate,
|
|
firstDate: firstDatePickerDate,
|
|
lastDate: lastDatePickerDate,
|
|
locale: const Locale('fr', 'FR'),
|
|
);
|
|
if (picked != null) {
|
|
setState(() {
|
|
currentChild.dobController.text = "${picked.day.toString().padLeft(2, '0')}/${picked.month.toString().padLeft(2, '0')}/${picked.year}";
|
|
});
|
|
}
|
|
}
|
|
|
|
void _removeChild(Key key) {
|
|
setState(() {
|
|
// Trouver et supprimer l'enfant par sa clé, et s'assurer qu'il en reste au moins un.
|
|
if (_childrenDataList.length > 1) {
|
|
_childrenDataList.removeWhere((child) => child.key == key);
|
|
}
|
|
});
|
|
// S'assurer que le listener est appelé après la mise à jour de l'UI
|
|
WidgetsBinding.instance.addPostFrameCallback((_) => _scrollListener());
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final screenSize = MediaQuery.of(context).size;
|
|
return Scaffold(
|
|
body: Stack(
|
|
children: [
|
|
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),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Text('Étape 3/X', style: GoogleFonts.merienda(fontSize: 16, color: Colors.black54)),
|
|
const SizedBox(height: 10),
|
|
Text(
|
|
'Merci de renseigner les informations de/vos enfant(s) :',
|
|
style: GoogleFonts.merienda(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.black87),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
const SizedBox(height: 30),
|
|
Padding( // Ajout du Padding pour les marges latérales
|
|
padding: const EdgeInsets.symmetric(horizontal: 150.0), // Marge de 150px de chaque côté
|
|
child: SizedBox(
|
|
height: 500,
|
|
child: ShaderMask(
|
|
shaderCallback: (Rect bounds) {
|
|
// Déterminer les couleurs du gradient en fonction de l'état de défilement
|
|
final Color leftFade = (_isScrollable && _showLeftFade) ? Colors.transparent : Colors.black;
|
|
final Color rightFade = (_isScrollable && _showRightFade) ? Colors.transparent : Colors.black;
|
|
|
|
// Si ce n'est pas scrollable du tout, pas de fondu.
|
|
if (!_isScrollable) {
|
|
return LinearGradient(
|
|
colors: const <Color>[Colors.black, Colors.black, Colors.black, Colors.black],
|
|
stops: const [0.0, _fadeExtent, 1.0 - _fadeExtent, 1.0],
|
|
).createShader(bounds);
|
|
}
|
|
|
|
return LinearGradient(
|
|
begin: Alignment.centerLeft,
|
|
end: Alignment.centerRight,
|
|
colors: <Color>[
|
|
leftFade, // Bord gauche
|
|
Colors.black, // Devient opaque
|
|
Colors.black, // Reste opaque
|
|
rightFade // Bord droit
|
|
],
|
|
stops: const [0.0, _fadeExtent, 1.0 - _fadeExtent, 1.0], // 5% de fondu sur chaque bord
|
|
).createShader(bounds);
|
|
},
|
|
blendMode: BlendMode.dstIn,
|
|
child: Scrollbar( // Ajout du Scrollbar
|
|
controller: _scrollController, // Utiliser le même contrôleur
|
|
thumbVisibility: true, // Rendre la thumb toujours visible pour le web si souhaité, ou la laisser adaptative
|
|
child: ListView.builder(
|
|
controller: _scrollController,
|
|
scrollDirection: Axis.horizontal,
|
|
padding: const EdgeInsets.symmetric(horizontal: 20.0),
|
|
itemCount: _childrenDataList.length + 1,
|
|
itemBuilder: (context, index) {
|
|
if (index < _childrenDataList.length) {
|
|
// Carte Enfant
|
|
return Padding(
|
|
padding: const EdgeInsets.only(right: 20.0), // Espace entre les cartes
|
|
child: _ChildCardWidget(
|
|
key: _childrenDataList[index].key, // Passer la clé unique
|
|
childData: _childrenDataList[index],
|
|
childIndex: index,
|
|
onPickImage: () => _pickImage(index),
|
|
onDateSelect: () => _selectDate(context, index),
|
|
onTogglePhotoConsent: (newValue) {
|
|
setState(() => _childrenDataList[index].photoConsent = newValue);
|
|
},
|
|
onToggleMultipleBirth: (newValue) {
|
|
setState(() => _childrenDataList[index].multipleBirth = newValue);
|
|
},
|
|
onToggleIsUnborn: (newValue) {
|
|
setState(() => _childrenDataList[index].isUnbornChild = newValue);
|
|
},
|
|
onRemove: () => _removeChild(_childrenDataList[index].key),
|
|
canBeRemoved: _childrenDataList.length > 1,
|
|
),
|
|
);
|
|
} else {
|
|
// Bouton Ajouter
|
|
return Center( // Pour centrer le bouton dans l'espace disponible
|
|
child: HoverReliefWidget(
|
|
onPressed: _addChild,
|
|
borderRadius: BorderRadius.circular(15),
|
|
child: Image.asset('assets/images/plus.png', height: 80, width: 80),
|
|
),
|
|
);
|
|
}
|
|
},
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 20), // Espace optionnel après la liste
|
|
],
|
|
),
|
|
),
|
|
),
|
|
// Chevrons de navigation
|
|
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: () => Navigator.pop(context),
|
|
tooltip: 'Retour',
|
|
),
|
|
),
|
|
Positioned(
|
|
top: screenSize.height / 2 - 20,
|
|
right: 40,
|
|
child: IconButton(
|
|
icon: Image.asset('assets/images/chevron_right.png', height: 40),
|
|
onPressed: () {
|
|
print('Passer à l\'étape 4 (Situation familiale et CGU)');
|
|
Navigator.pushNamed(context, '/parent-register/step4');
|
|
},
|
|
tooltip: 'Suivant',
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
// Nouveau Widget pour la carte enfant
|
|
class _ChildCardWidget extends StatelessWidget {
|
|
final _ChildFormData childData;
|
|
final int childIndex; // Utile pour certains callbacks ou logging
|
|
final VoidCallback onPickImage;
|
|
final VoidCallback onDateSelect;
|
|
final ValueChanged<bool> onTogglePhotoConsent;
|
|
final ValueChanged<bool> onToggleMultipleBirth;
|
|
final ValueChanged<bool> onToggleIsUnborn;
|
|
final VoidCallback onRemove; // Callback pour supprimer la carte
|
|
final bool canBeRemoved; // Pour afficher/cacher le bouton de suppression
|
|
|
|
const _ChildCardWidget({
|
|
required Key key, // Important pour le ListView.builder
|
|
required this.childData,
|
|
required this.childIndex,
|
|
required this.onPickImage,
|
|
required this.onDateSelect,
|
|
required this.onTogglePhotoConsent,
|
|
required this.onToggleMultipleBirth,
|
|
required this.onToggleIsUnborn,
|
|
required this.onRemove,
|
|
required this.canBeRemoved,
|
|
}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final File? currentChildImage = childData.imageFile;
|
|
final Color baseLavandeColor = Colors.purple.shade200;
|
|
final Color initialPhotoShadow = baseLavandeColor.withAlpha(90);
|
|
final Color hoverPhotoShadow = baseLavandeColor.withAlpha(130);
|
|
|
|
return Container(
|
|
width: 300,
|
|
padding: const EdgeInsets.all(20),
|
|
decoration: BoxDecoration(
|
|
image: const DecorationImage(image: AssetImage('assets/images/card_lavander.png'), fit: BoxFit.cover),
|
|
borderRadius: BorderRadius.circular(20),
|
|
),
|
|
child: Stack( // Stack pour pouvoir superposer le bouton de suppression
|
|
children: [
|
|
Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
HoverReliefWidget(
|
|
onPressed: onPickImage,
|
|
borderRadius: BorderRadius.circular(10),
|
|
initialShadowColor: initialPhotoShadow,
|
|
hoverShadowColor: hoverPhotoShadow,
|
|
child: SizedBox(
|
|
height: 100, width: 100,
|
|
child: Center(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(5.0),
|
|
child: currentChildImage != null
|
|
? ClipRRect(borderRadius: BorderRadius.circular(10), 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: 10),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text('Enfant à naître ?', style: GoogleFonts.merienda(fontSize: 14, fontWeight: FontWeight.w600)),
|
|
Switch(value: childData.isUnbornChild, onChanged: onToggleIsUnborn, activeColor: Theme.of(context).primaryColor),
|
|
],
|
|
),
|
|
const SizedBox(height: 15),
|
|
CustomAppTextField( // Utilisation du nouveau widget
|
|
controller: childData.firstNameController,
|
|
label: 'Prénom',
|
|
hintText: childData.isUnbornChild ? 'Prénom (optionnel)' : 'Prénom de l\'enfant',
|
|
isRequired: !childData.isUnbornChild,
|
|
),
|
|
const SizedBox(height: 10),
|
|
CustomAppTextField( // Utilisation du nouveau widget
|
|
controller: childData.lastNameController,
|
|
label: 'Nom',
|
|
hintText: 'Nom de l\'enfant',
|
|
enabled: true,
|
|
),
|
|
const SizedBox(height: 10),
|
|
CustomAppTextField( // Utilisation du nouveau widget
|
|
controller: childData.dobController,
|
|
label: childData.isUnbornChild ? 'Date prévisionnelle de naissance' : 'Date de naissance',
|
|
hintText: 'JJ/MM/AAAA',
|
|
readOnly: true,
|
|
onTap: onDateSelect,
|
|
suffixIcon: Icons.calendar_today,
|
|
),
|
|
const SizedBox(height: 18),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
AppCustomCheckbox( // Utilisation du nouveau widget
|
|
label: 'Consentement photo',
|
|
value: childData.photoConsent,
|
|
onChanged: onTogglePhotoConsent,
|
|
),
|
|
const SizedBox(height: 10),
|
|
AppCustomCheckbox( // Utilisation du nouveau widget
|
|
label: 'Naissance multiple',
|
|
value: childData.multipleBirth,
|
|
onChanged: onToggleMultipleBirth,
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
if (canBeRemoved) // Afficher le bouton de suppression conditionnellement
|
|
Positioned(
|
|
top: -5, // Ajuster pour le positionnement visuel
|
|
right: -5, // Ajuster pour le positionnement visuel
|
|
child: InkWell(
|
|
onTap: onRemove,
|
|
customBorder: const CircleBorder(), // Pour un effet de clic circulaire
|
|
child: Container(
|
|
padding: const EdgeInsets.all(4),
|
|
decoration: BoxDecoration(
|
|
color: Colors.red.withOpacity(0.8), // Fond rouge pour le bouton X
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: const Icon(Icons.close, color: Colors.white, size: 18),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
} |