petitspas/frontend/lib/widgets/summary_screen.dart
Julien Martin 271dc713a3 feat(widgets): Créer composants réutilisables pour écrans de récapitulatif
Nouveau fichier summary_screen.dart avec :
- Widget SummaryScreen : Layout générique pour récapitulatif
- Widget SummaryCard : Carte de récapitulatif avec AspectRatio et bouton Edit
- Fonction buildDisplayFieldValue : Champ en lecture seule stylisé

Ces composants permettront de simplifier et unifier les écrans
de récapitulatif parent et AM.
2026-01-28 17:03:10 +01:00

249 lines
8.2 KiB
Dart

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:go_router/go_router.dart';
import 'dart:math' as math;
import '../models/card_assets.dart';
import 'image_button.dart';
/// Widget générique pour afficher un écran de récapitulatif
/// Utilisé pour le récapitulatif d'inscription Parents et AM
class SummaryScreen extends StatelessWidget {
final String stepText;
final String title;
final List<Widget> summaryCards;
final String previousRoute;
final VoidCallback onSubmit;
final String submitButtonText;
const SummaryScreen({
super.key,
required this.stepText,
required this.title,
required this.summaryCards,
required this.previousRoute,
required this.onSubmit,
this.submitButtonText = 'Soumettre ma demande',
});
void _showConfirmationModal(BuildContext context) {
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext ctx) {
return AlertDialog(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
backgroundColor: const Color(0xFFF4F1DE),
title: Text('Demande envoyée !', style: GoogleFonts.merienda(fontSize: 20, fontWeight: FontWeight.bold, color: const Color(0xFF2D6A4F)), textAlign: TextAlign.center),
content: Text('Votre demande a bien été enregistrée. Nous reviendrons vers vous prochainement.', style: GoogleFonts.merienda(fontSize: 16, color: Colors.black87), textAlign: TextAlign.center),
actions: [
Center(
child: ImageButton(
bg: 'assets/images/btn_green.png',
text: 'OK',
textColor: const Color(0xFF2D6A4F),
width: 150,
height: 40,
fontSize: 16,
onPressed: () {
Navigator.of(ctx).pop();
context.go('/');
},
),
),
],
);
},
);
}
@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.repeatY),
),
Center(
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(vertical: 40.0),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: screenSize.width / 4.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(stepText, style: GoogleFonts.merienda(fontSize: 16, color: Colors.black54)),
const SizedBox(height: 20),
Text(title, style: GoogleFonts.merienda(fontSize: 22, fontWeight: FontWeight.bold, color: Colors.black87), textAlign: TextAlign.center),
const SizedBox(height: 30),
// Cartes de récapitulatif passées en paramètre
...summaryCards.map((card) => Padding(
padding: const EdgeInsets.only(bottom: 20),
child: card,
)),
const SizedBox(height: 20),
ImageButton(
bg: 'assets/images/btn_green.png',
text: submitButtonText,
textColor: const Color(0xFF2D6A4F),
width: 350,
height: 50,
fontSize: 18,
onPressed: () {
onSubmit();
_showConfirmationModal(context);
},
),
],
),
),
),
),
// 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(previousRoute);
}
},
tooltip: 'Retour',
),
),
],
),
);
}
}
/// Helper widget pour créer une carte de récapitulatif avec un titre et un contenu
class SummaryCard extends StatelessWidget {
final String title;
final String backgroundImagePath;
final List<Widget> content;
final VoidCallback? onEdit;
const SummaryCard({
super.key,
required this.title,
required this.backgroundImagePath,
required this.content,
this.onEdit,
});
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 2.0,
child: Container(
padding: const EdgeInsets.symmetric(vertical: 20.0, horizontal: 25.0),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(backgroundImagePath),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.circular(15),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Align(
alignment: Alignment.center,
child: Text(
title,
style: GoogleFonts.merienda(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
textAlign: TextAlign.center,
),
),
const SizedBox(height: 15),
Expanded(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: content,
),
),
),
],
),
),
if (onEdit != null) ...[
const SizedBox(width: 15),
Align(
alignment: Alignment.center,
child: IconButton(
icon: Image.asset('assets/images/input_field_bg.png', height: 35),
tooltip: 'Modifier',
onPressed: onEdit,
),
),
],
],
),
),
);
}
}
/// Fonction helper pour afficher un champ de type "lecture seule" stylisé
Widget buildDisplayFieldValue(
BuildContext context,
String label,
String value, {
bool multiLine = false,
double fieldHeight = 50.0,
double labelFontSize = 18.0,
}) {
const FontWeight labelFontWeight = FontWeight.w600;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(label, style: GoogleFonts.merienda(fontSize: labelFontSize, fontWeight: labelFontWeight)),
const SizedBox(height: 4),
Container(
width: double.infinity,
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'),
fit: BoxFit.fill,
),
),
child: Text(
value.isNotEmpty ? value : '-',
style: GoogleFonts.merienda(fontSize: labelFontSize),
maxLines: multiLine ? null : 1,
overflow: multiLine ? TextOverflow.visible : TextOverflow.ellipsis,
),
),
],
);
}