TP14 Réaliser des Animations en Flutter

TP14 Réaliser des Animations en Flutter

1. Objectifs

   • Comprendre et appliquer les concepts d'animations explicites et implicites dans Flutter.
   • Utiliser des classes comme AnimationController, Tween, et CurvedAnimation pour créer des animations complexes.
   • Mettre en place des animations déclenchées par des interactions, comme des clics, des gestes ou des sélections dans l’interface.
   • Gérer les états des animations en réponse aux événements utilisateur.

2. Application

   1. Exigences Fonctionnelles :

      • Création et Gestion des Animations
        • L'application doit inclure des animations continues (par exemple, rotation ou changement de couleur).
        • Les animations doivent pouvoir être déclenchées par des interactions utilisateur, comme un clic sur un bouton ou un geste (glissement).
      • Animations avec Interaction
        • L'utilisateur doit pouvoir contrôler certaines animations via des boutons (agrandissement/rétrécissement, changement de couleur).
        • Des animations doivent être déclenchées par des gestes, comme un glissement (swipe).
      • Transitions Animées
        • Les changements de position (slide), de taille (scale), ou d’opacité (fade) doivent être animés.
        • Les transformations doivent inclure des rotations ou des changements d’échelle.
        • Effets d’Animations Implicites
          • Les animations implicites doivent être implémentées via des widgets comme AnimatedContainer ou TweenAnimationBuilder.
          • Les transitions implicites doivent combiner plusieurs propriétés (taille, couleur, bordure).
        • Interface Dynamique et Intuitive
          • Tous les widgets animés doivent être disposés de manière claire et intuitive.
          • L'application doit inclure un menu animé (Drawer) qui s’ouvre avec une transition fluide.
          • Un bouton doit être utilisé pour déclencher ou contrôler chaque animation distincte.
        • Arrière-Plan Animé
          • L’application doit inclure un arrière-plan dynamique avec un changement de couleur graduel et continu.
        • Gestion des Durées d'Animation
          • Chaque animation doit respecter une durée définie (entre 2 et 7 secondes).
        • Comportement des Widgets Animés
          • Les animations doivent se comporter de manière fluide et sans discontinuité.
          • Les widgets animés doivent être réactifs et adaptés aux actions de l’utilisateur.
        • Compatibilité Multiplateforme
          • L’application doit fonctionner correctement sur les appareils Android et iOS.

   2. Contexte

      • Vous allez créer une application Flutter démontrant une variété d'animations et interactions. Cet examen vous permettra d'explorer et de mettre en œuvre différentes techniques d'animation en Flutter, y compris des transitions implicites et explicites, des animations liées à des gestes, et des transformations dynamiques.

   3. Instructions

      • Création de l'application
      • Créez un nouveau projet Flutter nommé AnimationMasteryExam.
      • Ouvrez le fichier principal main.dart sous le dossier lib.
        • Partie 1 : Animations de Base
          • 1. Animation Continue :
            • Créez un conteneur carré vert (100x100 pixels) qui effectue une rotation continue.
            • Utilisez un AnimationController pour gérer cette animation.
          • 2. Animation de Couleur :
            • Créez un conteneur rond (cercle) de 80 pixels de diamètre.
            • Ce conteneur doit passer progressivement du bleu au rouge lorsqu'un bouton est pressé.
            • Utilisez un ColorTween avec un bouton pour déclencher cette animation.
          • 3. Animation de Taille avec Interaction :
            • Créez un conteneur carré initialement de 100x100 pixels.
            • Ajoutez un bouton permettant d’alterner entre deux tailles (100x100 et 200x200 pixels).
            • Utilisez un ScaleTransition pour animer cette transformation.
        • Partie 2 : Animations Avancées
          • 4. Animation d’Opacité (Fade In/Out) :
            • Créez un texte au centre de l’écran.
            • Lorsqu’un bouton est pressé, le texte doit disparaître ou réapparaître avec un effet de fondu (FadeTransition).
          • 5. Animation de Position (Slide) :
            • Ajoutez une barre (rectangle de 300 pixels de largeur et 50 pixels de hauteur) qui glisse horizontalement d’un côté de l’écran à l’autre en boucle.
            • Utilisez un SlideTransition pour gérer cette animation.
          • 6. Animation liée aux gestes :
            • Créez une image ou un conteneur coloré (par exemple, 150x150 pixels).
            • Lorsque l’utilisateur effectue un geste de glissement (swipe), le conteneur doit changer de position ou de taille.
            • Utilisez un GestureDetector combiné avec un AnimatedBuilder.
        • Partie 3 : Animations Implicites
          • 7. Animation avec AnimatedContainer :
            • Créez un conteneur ayant une couleur, une taille, et une bordure qui changent simultanément lorsqu’un bouton est pressé.
            • Utilisez AnimatedContainer pour gérer cette animation.
          • 8. Animation de Transformation :
            • Ajoutez un bouton qui fait pivoter un conteneur de 45° sur l’axe Z tout en augmentant sa taille.
            • Utilisez un Transform ou AnimatedTransform.
        • Partie 4 : Interface Utilisateur et Animation Combinée
          • 9. Menu Animé (Drawer) :
            • Implémentez un Drawer qui s’ouvre avec une animation personnalisée. Par exemple, le menu glisse de la gauche tout en changeant légèrement de taille.
          • 10. Animation d’Arrière-Plan :
            • Ajoutez un arrière-plan dynamique où une couleur change graduellement en boucle (par exemple, du bleu au violet en passant par le rose).
            • Utilisez un TweenAnimationBuilder.
        • Partie 5 : classe AppTheme
          • Créez une classe AppTheme qui définit deux thèmes principaux :
            • Thème clair (Light) : Utilisez une palette de couleurs lumineuses.
            • Thème sombre (Dark) : Utilisez une palette de couleurs adaptées aux environnements peu éclairés.
            • Ajoutez la logique pour permettre à l'utilisateur de basculer entre les deux thèmes à l'aide d'un Switch sur une page dédiée aux paramètres.
          • Intégrez la classe AppTheme dans l'application pour que le thème sélectionné soit appliqué uniformément sur toutes les pages et les animations.
          • Les pages doivent s'adapter dynamiquement au changement de thème sans nécessiter de redémarrage de l'application.

   4. Critères de Durée

      • Toutes les animations doivent avoir une durée entre 2 et 7 secondes selon leur complexité.

   5. Interface Utilisateur

      • Disposez les widgets de manière claire et intuitive.
      • Assurez-vous que chaque animation est bien séparée et que les interactions sont explicites (par exemple, des boutons ou des gestes clairement identifiables).

   6. Critères d’Évaluation

      • 1. Fonctionnalité :
        • Toutes les animations fonctionnent comme prévu.
        • Les gestes et boutons déclenchent les animations correspondantes.
      • 2. Qualité du Code :
        • Utilisation correcte des outils d'animation en Flutter (comme AnimationController, Tween, Transition, etc.).
        • Code structuré, lisible et commenté.
      • 3. Interface et Expérience Utilisateur :
        • Interface propre et bien organisée.
        • Les animations améliorent l’expérience utilisateur sans surcharger l’interface.
      • 4. Créativité :
        • Ajout d’animations supplémentaires ou d’effets visuels (par exemple, transitions entre les écrans, sons, etc.).
      • 5. La classe AppTheme :
        • La classe AppTheme est bien définie et respecte les conventions de Flutter.
        • Le changement de thème est fluide et n'entraîne pas de latence perceptible.
        • Les animations et widgets respectent les couleurs définies dans le thème sélectionné.
        • Les styles du thème incluent : la couleur principale, la couleur d'accent, les polices, et les arrière-plans.

   ---

   Cours Flutter