Aller au contenu principal

📱 Guide du système de modals modernes

Ce guide explique comment utiliser le système de modals uniformisé de l'application.

🎨 Philosophie​

Toutes les modals de l'application suivent un design cohérent avec :

  • Largeur fixe : 700px maximum (plus large pour meilleure lisibilité)
  • Coins arrondis : 16px
  • Palette de couleurs : Neutre (#F9FAFB, #E5E7EB, #6B7280, #111827)
  • Boutons flat : elevation: 0
  • Typography : Cohérente et hiérarchisée

🧩 Composants de base​

1. BaseModernDialog​

Wrapper de base pour toutes les modals.

BaseModernDialog(
  maxWidth: 700,              // Largeur max (défaut: 700)
  padding: EdgeInsets.zero,   // Padding autour du contenu
  scrollable: true,           // Utilise SingleChildScrollView
  child: YourContent(),
)

2. ModernDialogHeader​

En-tête avec gradient pour les modals.

ModernDialogHeader(
  title: 'Titre de la modal',
  subtitle: 'Sous-titre optionnel',
  color: Colors.blue,         // Couleur du gradient
  onClose: () => Navigator.pop(context),
)

3. ModernDialogContent​

Contenu avec padding cohérent (24px par défaut).

ModernDialogContent(
  padding: const EdgeInsets.all(24),  // Optionnel
  children: [
    Text('Contenu...'),
    // Vos widgets ici
  ],
)

4. ModernDialogActions​

Boutons d'actions standardisés.

ModernDialogActions(
  cancelText: 'Annuler',              // Optionnel
  confirmText: 'Confirmer',
  onCancel: () => Navigator.pop(),    // Optionnel
  onConfirm: () => _handleConfirm(),
  confirmColor: Colors.green,         // Optionnel
  isDestructive: false,               // Bouton rouge si true
)

5. ModernDialogIcon​

Icône avec background coloré.

ModernDialogIcon(
  icon: Icons.check_circle,
  color: Colors.green,
  size: 24,
)

6. ModernDialogSection​

Section avec label pour organiser le contenu.

ModernDialogSection(
  label: 'Informations',
  children: [
    Text('Contenu de la section'),
    // Plus de widgets...
  ],
)

7. ModernDialogInfoCard​

Card d'information stylisée.

ModernDialogInfoCard(
  icon: Icons.receipt_long,
  label: 'Prix total',
  value: '150.00 EUR',
  valueColor: Colors.green,  // Optionnel
)

📝 Exemples d'utilisation​

final confirmed = await ModernConfirmationDialog.show(
  context: context,
  title: 'Confirmer l\'action',
  message: 'Êtes-vous sûr de vouloir continuer ?',
  confirmText: 'Oui, continuer',
  cancelText: 'Annuler',
  confirmColor: Colors.blue,
  icon: Icons.info,
  iconColor: Colors.blue,
);

if (confirmed == true) {
  // Action confirmée
}
showDialog(
  context: context,
  builder: (context) => BaseModernDialog(
    padding: EdgeInsets.zero,
    child: Column(
      children: [
        // Header avec gradient
        ModernDialogHeader(
          title: 'Mon titre',
          subtitle: 'Description',
          color: Colors.orange,
          onClose: () => Navigator.pop(context),
        ),

        // Contenu
        ModernDialogContent(
          children: [
            ModernDialogInfoCard(
              icon: Icons.person,
              label: 'Client',
              value: 'Jean Dupont',
            ),
            const SizedBox(height: 16),
            ModernDialogSection(
              label: 'Détails',
              children: [
                Text('Informations détaillées...'),
              ],
            ),
          ],
        ),

        // Actions
        ModernDialogActions(
          cancelText: 'Fermer',
          confirmText: 'Valider',
          onConfirm: () {
            // Votre logique
            Navigator.pop(context);
          },
          confirmColor: Colors.green,
        ),
      ],
    ),
  ),
);
final choice = await showDialog<String>(
  context: context,
  builder: (context) => BaseModernDialog(
    padding: EdgeInsets.zero,
    child: Column(
      children: [
        ModernDialogHeader(
          title: 'Choisir une option',
          color: Colors.purple,
          onClose: () => Navigator.pop(context),
        ),

        ModernDialogContent(
          children: [
            ModernDialogSection(
              label: 'Options disponibles',
              children: [
                _buildOptionTile('option1', 'Option 1'),
                SizedBox(height: 12),
                _buildOptionTile('option2', 'Option 2'),
              ],
            ),
          ],
        ),
      ],
    ),
  ),
);

🔄 Migration des anciennes modals​

Avant (AlertDialog)​

showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: Text('Mon titre'),
    content: Text('Mon message'),
    actions: [
      TextButton(
        onPressed: () => Navigator.pop(context),
        child: Text('Annuler'),
      ),
      ElevatedButton(
        onPressed: () => Navigator.pop(context, true),
        child: Text('Confirmer'),
      ),
    ],
  ),
);

Après (ModernConfirmationDialog)​

final result = await ModernConfirmationDialog.show(
  context: context,
  title: 'Mon titre',
  message: 'Mon message',
  confirmText: 'Confirmer',
  cancelText: 'Annuler',
  icon: Icons.info,
  iconColor: Colors.blue,
);

🎯 Bonnes pratiques​

  1. Toujours utiliser BaseModernDialog comme wrapper de base
  2. Largeur fixe à 700px pour toutes les modals (sauf exceptions)
  3. Utiliser ModernDialogHeader pour les modals avec en-tête
  4. Organiser le contenu avec ModernDialogSection
  5. Utiliser ModernDialogActions pour les boutons
  6. Icônes cohérentes avec ModernDialogIcon
  7. Couleurs sémantiques :
    • 🔵 Bleu : Information, envoi
    • 🟢 Vert : Succès, confirmation
    • 🟠 Orange : Avertissement, acompte
    • 🔴 Rouge : Danger, suppression
    • 🟣 Violet : Actions spéciales

📦 Fichiers à migrer​

Liste des fichiers contenant des modals à uniformiser :

  • lib/core/widgets/modern_confirmation_dialog.dart ✅
  • lib/features/calendar/presentation/widgets/balance_payment_dialog.dart ✅
  • lib/features/calendar/presentation/widgets/payment_amount_dialog.dart ✅
  • lib/features/calendar/presentation/widgets/commande_status_widget.dart
  • lib/features/settings/presentation/pages/settings_page.dart
  • lib/main.dart
  • lib/features/premium/presentation/pages/premium_page.dart
  • lib/features/promo_code/presentation/pages/promo_code_admin_page.dart
  • lib/features/promo_code/presentation/pages/promo_code_page.dart
  • lib/features/clients/presentation/pages/clients_page.dart
  • lib/features/calendar/presentation/pages/commandes_page.dart
  • lib/features/premium/presentation/widgets/premium_gate.dart
  • lib/core/widgets/payment_selection_dialog.dart
  • lib/features/calendar/presentation/pages/linear_calendar_page.dart

🚀 Checklist de migration​

Pour chaque fichier :

  1. Importer base_modern_dialog.dart
  2. Remplacer Dialog ou AlertDialog par BaseModernDialog
  3. Utiliser ModernDialogHeader si header avec gradient
  4. Wrapper le contenu dans ModernDialogContent
  5. Remplacer les boutons par ModernDialogActions
  6. Tester visuellement
  7. Vérifier la largeur (700px par défaut)
  8. Vérifier le scrolling si contenu long