Aller au contenu principal

Atelier 2 : Applications de Rencontre

Vue d'Ensemble​

Cet atelier comprend 3 portions d'interface couvrant différents aspects de Flutter. Chaque exercice est un widget complet et autonome.

Modèles de Données​

class Contact {
  final String id;
  final String firstName;
  final String lastName;
  final String email;
  final String phone;

  Contact({
    required this.id,
    required this.firstName,
    required this.lastName,
    required this.email,
    required this.phone,
  });

  String get fullName => '$firstName $lastName';
  String get initials => '${firstName[0]}${lastName[0]}'.toUpperCase();
}

class Image {
  final String id;
  final String title;
  final String assetPath;
  bool isFavorite;

  Image({
    required this.id,
    required this.title,
    required this.assetPath,
    this.isFavorite = false,
  });
}

Exercice 1 : Gestionnaire de Contacts avec i18n​

Objectif​

Créer une application affichant une liste de contacts avec support multi-langues (en, fr), ajout, suppression et édition.

Points à Couvrir​

  • ListView.builder avec les contacts
  • Dismissible (swipe pour supprimer)
  • Bouton d'ajout FAB
  • Édition des contacts (modification des informations)
  • ValueKey pour identifier les contacts
  • Internationalisation (i18n) - FR/EN

Fonctionnalités à Implémenter​

  1. Affichage de la liste : ListView.builder

    • Avatar avec initiales (CircleAvatar)
    • Nom complet
    • Email
    • Bouton pour éditer le contact

  2. Suppression : Dismissible - swiper pour supprimer avec confirmation

  3. Ajout de contacts : FAB qui ouvre un formulaire simple

  4. Édition de contacts : Modification des informations

  5. Clés uniques : Chaque contact avec ValueKey(contact.id)

  6. Internationalisation (i18n) :

    • Fichiers ARB pour FR/EN
    • Sélecteur de langue accessible

Exercice 2 : Formulaire de Saisie de Contacts avec i18n​

Objectif​

Créer une application avec un formulaire permettant la saisie et la validation des informations d'un contact, avec support multi-langues.

Points à Couvrir​

  • Form et TextFormField
  • Validation personnalisée
  • GlobalKey<FormState>
  • Clavier adapté selon le champ
  • Internationalisation (i18n) - FR/EN

Fonctionnalités à Implémenter​

  1. Champs du formulaire :

    • Prénom (min 2 caractères)
    • Nom (min 2 caractères)
    • Email (doit contenir @)
    • Téléphone (10 chiffres)

  2. Validateurs personnalisés : Implémenter pour chaque champ

  3. Clavier adapté : emailAddress, phone, text selon le champ

  4. Boutons : Soumettre et Réinitialiser

  5. Feedback : Afficher les erreurs de validation

  6. Internationalisation (i18n) : Tous les labels et messages en FR/EN

Exercice 3 : Galerie d'Images Interactive avec i18n​

Objectif​

Créer une application affichant une galerie d'images en grille, permettant la sélection de favoris avec animations, et support multi-langues.

Points à Couvrir​

  • GridView.builder avec 2 colonnes
  • Dismissible (swipe pour supprimer)
  • Animations implicites (AnimatedOpacity, AnimatedContainer)
  • Sélection interactive (favoris)
  • ValueKey pour identifier les images
  • Internationalisation (i18n) - FR/EN

Fonctionnalités à Implémenter​

  1. Affichage en grille : GridView.builder (2 colonnes)

    • 12-15 images de test (conteneurs colorés ou assets)
    • Titre de chaque image

  2. Sélection interactive :

    • Cliquer pour ajouter/retirer un cœur (favori)
    • Animation au clic (opacité ou échelle)

  3. Compteur : Afficher "X images favorites"

  4. Suppression : Dismissible - swiper pour supprimer une image

  5. Actions : Bouton "Réinitialiser les favoris"

  6. Clés uniques : Chaque image avec ValueKey(image.id)

  7. Internationalisation (i18n) : Labels et boutons en FR/EN

Étapes de Développement Recommandées​

  1. Commencer par l'exercice 2 : Créer et tester le formulaire de saisie
  2. Puis l'exercice 1 : Créer la liste de contacts en utilisant le formulaire pour ajouter
  3. Enfin l'exercice 3 : Créer la galerie d'images indépendante

Chaque exercice est une application autonome - pas de lien entre eux pour l'instant.

Exercice 4 : Accessibilité (a11y)​

Améliorer l'accessibilité de l'application :

  1. Ajouter des Semantics et semanticLabel aux images et boutons
  2. Ajouter des Tooltip explicites
  3. Assurer la navigation clavier (Tab/Shift+Tab)
  4. Vérifier les contrastes (WCAG AA minimum)
  5. Tester avec un lecteur d'écran (VoiceOver/TalkBack)

Exercice 5 : Assets et Ressources​

Améliorer la gestion des assets :

  1. Images : charger les images de la galerie depuis assets/images/
  2. Polices : utiliser une police personnalisée pour les titres
  3. Données : charger une configuration JSON depuis les assets
  4. Résolutions : gérer les images en @2x et @3x

Structure recommandée :

assets/
  images/
    gallery/
      - img1.png
      - img2.png
      - ... (15 images)
    ui/
      - logo.png
      - background.jpg
  fonts/
    - CustomFont-Regular.ttf
    - CustomFont-Bold.ttf
  data/
    - config.json

Exercice 6 : Animations Avancées (BONUS)​

Améliorer les animations de la galerie (optionnel) :

  • ScaleTransition : animer l'échelle des images au clic
  • AnimatedOpacity : fade in/out des images préférées
  • RotationTransition : rotation du cœur quand il devient favori
  • HeroAnimation : transition fluide vers le détail des images

Ressources​