Introduction aux Animations dans Flutter
Sommaire
- 1- Objectif du Tutoriel
- 2- Introduction aux Animations dans Flutter
- 3- Les Bases des Animations dans Flutter
- 3.1- Qu'est-ce Qu'une Animation Flutter ?
- 3.1.1- Rappel : Le State dans Flutter
- 3.1.2- Définition d'une Animation
- 3.1.3- Animations "Drawing-Based"
- 3.1.4- Animations "Code-Based"
- 4- Conclusion
- 5- Types d'animations dans flutter
- 5.1- Animations implicites
- 5.2- Animation explicite
- 5.2.1- Cours Flutter
Introduction aux Animations dans Flutter
-
Objectif du Tutoriel
-
L’objectif de ce tutoriel est de vous guider à travers les bases et les concepts avancés des animations dans
Flutter, afin de vous permettre de créer des applications plus dynamiques et engageantes. En suivant ce
tutoriel, vous apprendrez à : - Comprendre les Bases des Animations : Différencier les types d’animations dans Flutter, notamment les
animations « drawing-based » et « code-based ». - Utiliser des Animations Implicites : Mettre en œuvre des animations simples en utilisant les widgets
implicites de Flutter. - Maîtriser les Animations Explicites : Contrôler et personnaliser vos animations avec des
AnimationController et Tween. - Explorer les Animations « Drawing-Based » : Découvrir comment animer des dessins complexes avec la classe
CustomPainter et des bibliothèques tierces comme Rive ou Lottie. - Mettre en Pratique avec des Exemples : Expérimenter des animations via des exemples guidés et comprendre
comment appliquer ces concepts à vos propres projets. -
Introduction aux Animations dans Flutter
-
Les animations sont essentielles pour rendre vos applications plus dynamiques et améliorer l’expérience
utilisateur en les rendant plus vivantes et intuitives. Flutter facilite la création d’animations, permettant de
transformer des interactions simples en effets visuels impressionnants avec quelques lignes de code. -
Dans ce tutoriel, nous allons vous montrer comment créer ces effets « wow » rapidement, tout en vous fournissant
les outils pour concevoir des animations plus complexes et personnalisées. -
Les Bases des Animations dans Flutter
-
Pour bien comprendre les animations dans Flutter, il est important de différencier les animations basées sur le
dessin (« drawing-based ») et celles basées sur le code (« code-based »). Ensuite, nous aborderons les deux
principaux types d’animations : les animations implicites et explicites. -
Tout au long de ce tutoriel, vous aurez l’occasion de mettre en pratique ces différents types d’animations à
travers des exemples guidés, et de voir vos widgets prendre vie pour la première fois. -
Qu’est-ce Qu’une Animation Flutter ?
-
Rappel : Le State dans Flutter
-
Le « State » correspond à la logique et à l’état interne d’un StatefulWidget. Il s’agit d’une information
qui peut être lue de manière synchrone lorsque le widget est construit et qui peut changer durant sa vie.
C’est grâce au State que vous pouvez reconstruire en permanence vos widgets et les animer. -
Définition d’une Animation
-
Une animation peut se définir de plusieurs façons, mais dans le contexte de Flutter, elle consiste en une
succession d’images à intervalles réguliers, donnant l’impression de mouvement. Une animation Flutter
correspond à une multitude d’états d’un widget qui se succèdent environ 60 ou 90 fois par seconde, offrant
des intégrations beaucoup plus performantes que des vidéos. -
Animations « Drawing-Based »
- Définition
- Les animations « drawing-based » animent un dessin. Elles sont souvent complexes, tant en termes de
design que d’intégration. - Fondamentaux
-
Il existe deux types principaux d’animations « drawing-based » : les animations de bas niveau et celles
basées sur des bibliothèques tierces. - Animations de Bas Niveau : Utilisent la classe CustomPainter pour créer des
animations complexes via le code. - Bibliothèques Tierces : Utilisent des outils externes pour dessiner et animer, puis
importent ces animations dans Flutter. Par exemple, des bibliothèques comme Rive ou Lottie. - Exemple
-
Un exemple classique est l’animation de rotation d’une planète, où chaque image de l’animation est
dessinée et animée. -
Animations « Code-Based »
- Définition
-
Les animations « code-based » animent des widgets communs tels que des containers, des boutons, ou des
textes. - Fondamentaux
- Il existe deux principaux types d’animations « code-based » : les animations implicites et explicites.
- Animations Implicites : Utilisent des widgets qui gèrent les animations pour vous,
en implémentant la classe ImplicitlyAnimatedWidget. Par exemple, un AnimatedContainer anime
automatiquement les changements de ses propriétés. - Animations Explicites : Utilisent des AnimationController pour indiquer à Flutter
comment reconstruire rapidement l’arbre des widgets pour créer des animations. - Pour choisir le type d’animation adapté à votre projet, posez-vous les questions suivantes :
- Mon animation ne se répète pas en boucle ?
- Mon animation ne comprend pas de discontinuités dans les valeurs d’animation ?
- Mon animation est composée d’un seul child ?
- Si toutes ces affirmations sont vraies, optez pour une animation implicite. Sinon, choisissez une
animation explicite. -
Conclusion
- Les animations « code-based » sont les plus couramment utilisées car elles permettent de créer des effets
visuels rapidement et efficacement. Commencez par les animations implicites pour des transitions simples,
puis explorez les animations explicites pour plus de contrôle et de personnalisation. - Expérimentez avec les différentes techniques pour rendre vos applications Flutter plus engageantes et dynamiques.
-
Types d’animations dans flutter
-
Animations implicites
- Les animations implicites dans Flutter sont un moyen de créer des animations avec un minimum de code et d’effort. Elles sont conçues pour animer automatiquement les modifications des propriétés des widgets, sans définir explicitement les étapes de l’animation. Ces animations sont souvent utilisées pour des transitions simples, telles que le fondu, le glissement ou le redimensionnement d’un widget en réponse aux modifications de ses propriétés.
- Nous n’avons pas beaucoup de contrôle sur ces animations implicites mais elles sont très faciles à utiliser car la plupart des choses sont gérées par défaut par le framework Flutter.
-
Animation explicite
- Les animations explicites, en revanche, offrent davantage de contrôle et de flexibilité lors de la création d’animations dans Flutter. Avec les animations explicites, vous définissez explicitement le comportement de l’animation, y compris le contrôleur d’animation, les courbes d’animation et les états intermédiaires. Ce niveau de contrôle est idéal pour les animations complexes et les transitions personnalisées.
- Les animations explicites peuvent être un peu difficiles à mettre en œuvre. Ces animations sont très puissantes en termes de contrôle et d’expérience utilisateur.
