Julien Martin
a57993a90f
Layout mobile complètement repensé avec séparation desktop/mobile : **Layout Desktop (_buildDesktopFields) :** - Champs par paires horizontales (Row avec Expanded) - Code Postal + Ville avec ratio flex 2:5 - Espacement 32px entre lignes - Taille police : 22px labels, 20px input **Layout Mobile (_buildMobileFields) :** - Tous les champs empilés verticalement (Column pure) - Chaque champ prend toute la largeur - Espacement 12px entre champs (compact) - Taille police : 15px labels, 14px input - Hauteur champs réduite : 45px **Nouveau widget CustomNavigationButton :** - Widget réutilisable pour boutons navigation - Enum NavigationButtonStyle (green/purple) - Utilise assets images comme fond - Bouton "Précédent" : fond lavande, texte violet foncé - Bouton "Suivant" : fond vert, texte vert foncé **Boutons mobile :** - Positionnés sous la carte (dans le scroll) - Aligned avec les marges de la carte (5% de chaque côté) - Prennent toute la largeur avec Expanded - Écart de 16px entre les deux - Utilisation de CustomNavigationButton **Optimisations mobile :** - Padding carte réduit : 20px vertical (vs 40px initial) - Toggles compacts (Switch scale 0.85) - Titre : 18px (vs 24px desktop) - Étape : 13px (vs 16px desktop) Référence: #78 Co-authored-by: Cursor <cursoragent@cursor.com>
88 lines
2.2 KiB
Dart
88 lines
2.2 KiB
Dart
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é
|
|
}
|
|
}
|
|
}
|