Les Animations Implicites dans Flutter

Objectif du Tutoriel

L’objectif de ce tutoriel est de vous apprendre à utiliser les animations implicites dans Flutter pour rendre vos applications plus dynamiques et engageantes. À la fin de ce tutoriel, vous serez capable de :

Comprendre les Concepts d’Animations Implicites : Appréhender les bases des animations implicites et savoir différencier les widgets animés intégrés de Flutter (AnimatedFoo).
Utiliser les Widgets Animés Intégrés (AnimatedFoo) : Apprendre à utiliser des widgets comme AnimatedContainer, AnimatedAlign, AnimatedOpacity, etc., pour animer les propriétés de vos widgets de manière simple et efficace.
Maîtriser le TweenAnimationBuilder : Savoir utiliser TweenAnimationBuilder pour animer des widgets qui n’ont pas de versions animées intégrées, en définissant des paramètres comme duration, tween, et builder.
Personnaliser les Animations avec Curves : Découvrir comment personnaliser les animations en utilisant différentes courbes (Curves) pour créer des transitions douces et fluides.
Appliquer des Animations à Divers Types de Variables : Explorer les différents types de Tween disponibles pour animer des variables telles que les couleurs, les tailles, les alignements, etc.

Introduction

Les animations implicites sont des animations simples à mettre en œuvre dans Flutter, permettant de transformer facilement des widgets statiques en éléments dynamiques. Ce tutoriel vous guidera à travers la création de vos premières animations implicites en utilisant les widgets intégrés de Flutter, également appelés les « AnimatedFoo ».

Comprendre les « AnimatedFoo »

Dans le contexte de Flutter, « Foo » représente un widget commun. Ainsi, lorsque vous voyez AnimatedFoo ou FooTransition, remplacez « Foo » par le widget approprié. Par exemple, Positioned devient AnimatedPositioned et PositionedTransition.

Widgets « AnimatedFoo » Intégrés

Flutter propose une série de widgets animés, qui sont des versions animées de widgets existants.
Ces widgets créent des animations chaque fois que l’une de leurs propriétés change. Voici quelques exemples de ces widgets :

AnimatedContainer

Définitions

Dans Flutter, un conteneur est un widget simple avec des propriétés bien définies comme la hauteur, la largeur, la couleur, etc.
Le widget AnimatedContainer est un widget conteneur simple avec des animations.
Ces types de widgets peuvent être animés en modifiant les valeurs de leurs propriétés qui sont les mêmes que celles du widget Container.
Ces types d’animation dans Flutter sont connus sous le nom d' »animation implicite ».
AnimatedContainer aide à rendre l’interface de votre application plus vivante et attrayante sans avoir besoin d’utiliser des bibliothèques externes.
Il offre aux développeurs un moyen simple d’améliorer l’expérience utilisateur et de rendre l’interaction avec l’application plus engageante.

Propriétés de AnimatedContainer

duration

Cette propriété est utilisée pour définir la durée de la transition de l’AnimatedContainer d’un état à un autre.

AnimatedContainer( duration: Duration(seconds: 1), );

curve

Cette propriété permet de définir la courbe temporelle utilisée pour la transition entre les états de l’AnimatedContainer.

AnimatedContainer( curve: Curves.easeInOut, );

decoration

Cette propriété permet de définir la décoration de l’AnimatedContainer, comme la couleur de fond, les bordures et les ombres.

AnimatedContainer( decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(10.0), boxShadow: [ BoxShadow( color: Colors.grey, blurRadius: 5.0, ), ], ), );

width

Cette propriété est utilisée pour définir la largeur de l’AnimatedContainer.

AnimatedContainer( width: 200.0, );

height

Cette propriété est utilisée pour définir la hauteur de l’AnimatedContainer.

AnimatedContainer( height: 200.0, );

alignment

Cette propriété permet de définir l’alignement de l’AnimatedContainer par rapport à son parent.

AnimatedContainer( alignment: Alignment.center, );

margin

Cette propriété est utilisée pour définir la marge extérieure de l’AnimatedContainer.

AnimatedContainer( margin: EdgeInsets.all(10.0), );

padding

Cette propriété permet de définir l’espacement intérieur de l’AnimatedContainer.

AnimatedContainer( padding: EdgeInsets.all(10.0), );

transform

Cette propriété est utilisée pour définir les transformations géométriques de l’AnimatedContainer, comme la rotation et la translation.

AnimatedContainer( transform: Matrix4.rotationZ(0.5), );

onEnd

Cette propriété permet de définir une fonction qui sera exécutée à la fin de la transition de l’AnimatedContainer.

AnimatedContainer( onEnd: () { print('Animation terminée'); }, );

Exemple : Utilisation de AnimatedContainer

Pour créer une animation simple, nous utiliserons AnimatedContainer. Il suffit de préfixer Container avec Animated pour créer une animation. Voici un exemple :

AnimatedContainer( height: _bigger ? 300 : 500, width: _bigger ? 300 : 500, color: Colors.blue, duration: Duration(seconds: 3), curve: Curves.elasticInOut, )

Dans cet exemple, deux propriétés supplémentaires sont utilisées : duration et curve.
Duration : Définit la durée de l’animation. Ici, la largeur et la hauteur du conteneur passent de 300 à 500 pixels en 3 secondes.
Curve : Permet de personnaliser l’animation en ajoutant des variations de valeur au sein de la durée définie. Dans cet exemple, l’effet elasticInOut est utilisé. Explorez les différentes courbes proposées par la classe Curves pour obtenir des animations variées et personnalisées.

AnimatedAlign

AnimatedDefaultTextStyle

Définitions

AnimatedPadding aide à rendre l’interface de votre application plus vivante et attrayante sans avoir besoin d’utiliser des bibliothèques externes.
Il offre aux développeurs un moyen simple d’améliorer l’expérience utilisateur et de rendre l’interaction avec l’application plus intéressante.

Propriétés de AnimatedPadding

style

Utilisée pour définir le style de base du texte, cette propriété inclut des caractéristiques telles que la couleur, la police et la taille, et est appliquée au texte affiché dans l’application.

AnimatedDefaultTextStyle( style: TextStyle( color: Colors.black, fontSize: 20.0, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic, ), child: Text('Hello, World!'), );

child

Utilisée pour définir l’élément qui est affiché dans AnimatedDefaultTextStyle. Cet élément peut être n’importe quel widget.

AnimatedDefaultTextStyle( style: TextStyle( color: Colors.black, fontSize: 20.0, ), child: Text('Hello, World!'), );

duration

Utilisée pour définir la durée de l’animation lors de la transition d’un style de texte à un autre. Elle indique le temps nécessaire pour changer les propriétés du texte affiché.

AnimatedDefaultTextStyle( style: TextStyle( color: Colors.black, fontSize: 20.0, ), duration: Duration(seconds: 1), child: Text('Hello, World!'), );

curve

Utilisée pour définir la courbe de l’animation, permettant une transition graduelle et fluide. Cette courbe est appliquée à la durée définie précédemment.

AnimatedDefaultTextStyle( style: TextStyle( color: Colors.black, fontSize: 20.0, ), duration: Duration(seconds: 1), curve: Curves.easeInOut, child: Text('Hello, World!'), );

textAlign

Utilisée pour définir l’alignement du texte à l’intérieur de l’élément. Des valeurs comme TextAlign.center sont utilisées pour centrer le texte.

AnimatedDefaultTextStyle( style: TextStyle( color: Colors.black, fontSize: 20.0, ), duration: Duration(seconds: 1), textAlign: TextAlign.center, child: Text('Hello, World!'), );

softWrap

Utilisée pour déterminer si le texte doit être coupé en nouvelles lignes lorsqu’il atteint le bord de l’élément de texte.

AnimatedDefaultTextStyle( style: TextStyle( color: Colors.black, fontSize: 20.0, ), duration: Duration(seconds: 1), softWrap: true, child: Text('Hello, World!'), );

overflow

Utilisée pour définir comment gérer le texte lorsque sa taille dépasse celle de l’élément. Des valeurs comme TextOverflow.ellipsis sont utilisées pour afficher des points de suspension (…) lorsque le texte dépasse la taille de l’élément.

AnimatedDefaultTextStyle( style: TextStyle( color: Colors.black, fontSize: 20.0, ), duration: Duration(seconds: 1), overflow: TextOverflow.ellipsis, child: Text('Hello, World!'), );

maxLines

Utilisée pour définir le nombre maximum de lignes de texte qui peuvent être affichées. Cette limite est appliquée au texte affiché dans AnimatedDefaultTextStyle.

AnimatedDefaultTextStyle( style: TextStyle( color: Colors.black, fontSize: 20.0, ), duration: Duration(seconds: 1), maxLines: 2, child: Text('Hello, World!'), );

AnimatedOpacity

Définitions

Flutter permet aux développeurs de modifier progressivement et de manière animée la transparence des éléments de l’interface utilisateur grâce au widget AnimatedOpacity.
Ce widget peut être utilisé pour animer des textes, des images, des formes et des icônes, améliorant ainsi l’expérience utilisateur.

Propriétés de AnimatedOpacity

opacity

Définit la transparence de l’élément à animer. Vous pouvez utiliser une valeur comprise entre 0 et 1 pour cette propriété.

AnimatedOpacity( opacity: _opacity, duration: Duration(seconds: 1), child: Container( width: 200, height: 200, color: Colors.blue, ), );

duration

Définit la durée de l’animation de la transparence de l’élément. La valeur est définie en fonction des besoins de l’application.

AnimatedOpacity( opacity: _opacity, duration: Duration(seconds: 1), child: Container( width: 200, height: 200, color: Colors.blue, ), );

curve

Définit la courbe de transition pour le changement de transparence de l’élément. Vous pouvez utiliser l’une des courbes intégrées de Flutter ou définir une courbe personnalisée.

AnimatedOpacity( opacity: _opacity, duration: Duration(seconds: 1), curve: Curves.easeInOut, child: Container( width: 200, height: 200, color: Colors.blue, ), );

onEnd

Permet aux développeurs de définir une fonction qui sera exécutée une fois que l’animation de la transparence de l’élément est terminée.

AnimatedOpacity( opacity: _opacity, duration: Duration(seconds: 1), onEnd: () { print('Animation terminée'); }, child: Container( width: 200, height: 200, color: Colors.blue, ), );

child

Définit l’élément dont la transparence sera modifiée.

AnimatedOpacity( opacity: _opacity, duration: Duration(seconds: 1), child: Container( width: 200, height: 200, color: Colors.blue, ), );

Exemple d’utilisation de AnimatedOpacity dans Flutter:

Voici un exemple d’utilisation de AnimatedOpacity dans Flutter pour animer et changer la transparence d’un élément unique dans l’application :

import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Exemple de AnimatedOpacity', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyAnimatedOpacity(), ); } } class MyAnimatedOpacity extends StatefulWidget { const MyAnimatedOpacity({Key? key}) : super(key: key); @override _MyAnimatedOpacityState createState() => _MyAnimatedOpacityState(); } class _MyAnimatedOpacityState extends State { double _opacity = 1.0; bool _visible = false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Démonstration de Animated Opacity'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ AnimatedOpacity( opacity: _opacity, duration: const Duration(seconds: 1), child: Container( width: 200, height: 200, color: Colors.blue, ), ), const SizedBox(height: 20), ElevatedButton( onPressed: () { setState(() { _opacity = _opacity == 1.0 ? 0.0 : 1.0; }); }, child: const Text('Basculer la transparence'), ), const SizedBox(height: 20), ElevatedButton( onPressed: () { setState(() { _visible = !_visible; }); }, child: const Text('Basculer la visibilité'), ), const SizedBox(height: 20), AnimatedOpacity( opacity: _visible ? 1.0 : 0.0, duration: const Duration(seconds: 1), child: Container( width: 200, height: 200, color: Colors.red, child: const Center( child: Text( 'Visible', style: TextStyle( color: Colors.white, fontSize: 32, fontWeight: FontWeight.bold, ), ), ), ), ), ], ), ), ); } }

AnimatedPadding

Définitions

AnimatedPadding aide à améliorer le design et l’expérience utilisateur en ajoutant des effets animés aux marges intérieures des éléments.
Vous pouvez utiliser AnimatedPadding pour créer des animations comme le déplacement du texte à l’intérieur d’une boîte ou le déplacement de tout élément à l’intérieur d’un conteneur.

Propriétés de AnimatedPadding

padding

Cette propriété est utilisée pour définir les marges intérieures de l’élément d’interface utilisateur. Vous pouvez la définir en utilisant un objet EdgeInsets.

AnimatedPadding( padding: EdgeInsets.all(16.0), child: Text("Hello, Flutter!"), );

duration

Cette propriété est utilisée pour définir la durée des animations qui seront appliquées aux marges intérieures de l’élément. Vous devez passer un objet Duration à cette propriété.

AnimatedPadding( padding: EdgeInsets.all(16.0), duration: Duration(milliseconds: 500), child: Text("Hello, Flutter!"), );

curve

Cette propriété est utilisée pour définir la courbe de l’animation qui sera appliquée aux marges intérieures de l’élément. Vous devez passer un objet Curve à cette propriété.

AnimatedPadding( padding: EdgeInsets.all(16.0), curve: Curves.easeInOut, child: Text("Hello, Flutter!"), );

child

Cette propriété est utilisée pour définir l’élément d’interface utilisateur dont les marges intérieures seront animées. Vous devez passer l’élément d’interface utilisateur en tant que child à cette propriété.

AnimatedPadding( padding: EdgeInsets.all(16.0), child: Text("Hello, Flutter!"), );

AnimatedPhysicalModel

Définitions

AnimatedPhysicalModel aide à améliorer le design et l’expérience utilisateur en ajoutant des effets animés à l’ombre physique des éléments.
Vous pouvez utiliser AnimatedPhysicalModel pour créer des animations comme la modification de la propriété d’ombre physique d’un élément à l’intérieur d’un conteneur.

Propriétés de AnimatedPadding

shape

Cette propriété est utilisée pour définir la forme de l’élément. Vous pouvez la définir en utilisant un objet ShapeBorder.

AnimatedPhysicalModel( shape: BoxShape.circle, child: Container( width: 200, height: 200, color: Colors.blue, ), );

elevation

Cette propriété est utilisée pour définir la valeur de l’ombre physique de l’élément. Vous devez passer une valeur double à cette propriété.

AnimatedPhysicalModel( elevation: 10.0, child: Container( width: 200, height: 200, color: Colors.blue, ), );

color

Cette propriété est utilisée pour définir la couleur de l’ombre physique de l’élément. Vous devez passer un objet Color à cette propriété.

AnimatedPhysicalModel( elevation: 10.0, color: Colors.blue, child: Container( width: 200, height: 200, color: Colors.white, ), );

shadowColor

Cette propriété est utilisée pour définir la couleur de l’ombre affichée à l’extérieur de l’élément. Vous devez passer un objet Color à cette propriété.

AnimatedPhysicalModel( elevation: 10.0, color: Colors.white, shadowColor: Colors.blue, child: Container( width: 200, height: 200, color: Colors.white, ), );

duration

Cette propriété est utilisée pour définir la durée des animations qui seront appliquées à la propriété d’ombre physique de l’élément. Vous devez passer un objet Duration à cette propriété.

AnimatedPhysicalModel( duration: Duration(milliseconds: 500), elevation: 10.0, color: Colors.white, shadowColor: Colors.blue, child: Container( width: 200, height: 200, color: Colors.white, ), );

curve

Cette propriété est utilisée pour définir la courbe de l’animation qui sera appliquée à la propriété d’ombre physique de l’élément. Vous devez passer un objet Curve à cette propriété.

AnimatedPhysicalModel( duration: Duration(milliseconds: 500), curve: Curves.easeInOut, elevation: 10.0, color: Colors.white, shadowColor: Colors.blue, child: Container( width: 200, height: 200, color: Colors.white, ), );

borderRadius

Cette propriété est utilisée pour définir la forme des coins de l’élément. Vous pouvez la définir en utilisant un objet BorderRadius.

AnimatedPhysicalModel( duration: Duration(milliseconds: 500), curve: Curves.easeInOut, elevation: 10.0, color: Colors.white, shadowColor: Colors.blue, borderRadius: BorderRadius.circular(10.0), child: Container( width: 200, height: 200, color: Colors.white, ), );

animateColor

Cette propriété est utilisée pour déterminer si la couleur de l’ombre physique est animée ou non. Vous devez passer une valeur boolean à cette propriété.

AnimatedPhysicalModel( duration: Duration(milliseconds: 500), curve: Curves.easeInOut, elevation: 10.0, color: Colors.white, shadowColor: Colors.blue, borderRadius: BorderRadius.circular(10.0), animateColor: true, child: Container( width: 200, height: 200, color: Colors.white, ), );

onEnd

Cette propriété est utilisée pour définir la fonction qui sera appelée à la fin de l’animation. Vous devez passer une fonction à cette propriété.

AnimatedPhysicalModel( duration: Duration(milliseconds: 500), curve: Curves.easeInOut, elevation: 10.0, color: Colors.white, shadowColor: Colors.blue, borderRadius: BorderRadius.circular(10.0), animateColor: true, animateShape: true, onEnd: () { print("Animation terminée"); }, child: Container( width: 200, height: 200, color: Colors.white, ), );

AnimatedList

Définitions

AnimatedList AnimatedList aide à rendre l’interface de votre application plus vivante et attrayante sans avoir besoin d’utiliser des bibliothèques externes. Il offre aux développeurs un moyen simple d’améliorer l’expérience utilisateur et de rendre l’interaction avec l’application plus intéressante.

Propriétés de AnimatedList

itemBuilder

Utilisée pour définir comment chaque élément de la liste est construit. Une fonction de création d’élément doit être passée à cette propriété.

AnimatedList( itemBuilder: (BuildContext context, int index, Animation animation) { return ListTile( title: Text("Item $index"), ); }, );

initialItemCount

Utilisée pour définir le nombre initial d’éléments à afficher dans AnimatedList. Cette propriété peut être définie à n’importe quelle valeur entière.

AnimatedList( initialItemCount: 3, itemBuilder: (BuildContext context, int index, Animation animation) { return ListTile( title: Text("Item $index"), ); }, );

key

Utilisée pour définir une clé unique pour AnimatedList. Cette clé peut être utilisée pour reconstruire AnimatedList à l’avenir.

final GlobalKey _listKey = GlobalKey(); AnimatedList( key: _listKey, itemBuilder: (BuildContext context, int index, Animation animation) { return ListTile( title: Text("Item $index"), ); }, );

padding

Utilisée pour définir les marges intérieures de AnimatedList.

AnimatedList( padding: EdgeInsets.all(16.0), itemBuilder: (BuildContext context, int index, Animation animation) { return ListTile( title: Text("Item $index"), ); }, );

reverse

Utilisée pour afficher AnimatedList dans l’ordre inverse.

AnimatedList( reverse: true, itemBuilder: (BuildContext context, int index, Animation animation) { return ListTile( title: Text("Item $index"), ); }, );

controller

Utilisée pour fournir un accès à AnimatedListController qui contrôle la liste animée. Ce contrôleur peut être utilisé pour ajouter et supprimer des éléments de AnimatedList.

final GlobalKey _listKey = GlobalKey(); final ScrollController _listController = ScrollController(); AnimatedList( key: _listKey, controller: _listController, itemBuilder: (BuildContext context, int index, Animation animation) { return ListTile( title: Text("Item $index"), ); }, );

AnimatedPositioned

Définitions

AnimatedPositioned est un widget dans Flutter qui permet aux développeurs d’animer la position d’un élément sur l’écran.
AnimatedPositioned est une addition utile aux interfaces utilisateur de Flutter, offrant des animations fluides et impressionnantes pour les éléments présents sur l’écran.

Propriétés de AnimatedPositioned

left

Définit la position de l’élément depuis la gauche

AnimatedPositioned( left: 50.0, child: Container( width: 100.0, height: 100.0, color: Colors.red, ), ),

top

Définit la position de l’élément depuis le haut.

AnimatedPositioned( top: 50.0, child: Container( width: 100.0, height: 100.0, color: Colors.red, ), ),

right

Définit la position de l’élément depuis la droite.

AnimatedPositioned( right: 50.0, child: Container( width: 100.0, height: 100.0, color: Colors.red, ), ),

bottom

Définit la position de l’élément depuis le bas.

AnimatedPositioned( bottom: 50.0, child: Container( width: 100.0, height: 100.0, color: Colors.red, ), ),

width

Définit la largeur de l’élément.

AnimatedPositioned( width: 200.0, child: Container( height: 100.0, color: Colors.red, ), ),

height

Définit la hauteur de l’élément.

AnimatedPositioned( height: 200.0, child: Container( width: 100.0, color: Colors.red, ), ),

duration

Définit la durée de l’animation.

AnimatedPositioned( duration: Duration(seconds: 1), left: 50.0, child: Container( width: 100.0, height: 100.0, color: Colors.red, ), ),

curve

Définit le type d’animation.

AnimatedPositioned( duration: Duration(seconds: 1), curve: Curves.easeInOut, left: 50.0, child: Container( width: 100.0, height: 100.0, color: Colors.red, ), ),

onEnd

Définit la fonction qui sera appelée à la fin de l’animation.

AnimatedPositioned( duration: Duration(seconds: 1), onEnd: () { print("Animation terminée !"); }, left: 50.0, child: Container( width: 100.0, height: 100.0, color: Colors.red, ), ),

AnimatedPositionedDirectional

Utilisation de TweenAnimationBuilder

Lorsque vous souhaitez animer un widget qui n’a pas de version animée intégrée, utilisez TweenAnimationBuilder. Ce widget vous permet d’animer tous types de widgets en définissant trois paramètres principaux : duration, tween et builder.

Exemple : Animer un Widget ColorFiltered

Prenons l’exemple d’un widget ColorFiltered, qui n’a pas de version animée intégrée. Nous allons animer ce widget en utilisant TweenAnimationBuilder :

TweenAnimationBuilder( tween: ColorTween(begin: Colors.red, end: Colors.yellow), duration: Duration(seconds: 3), builder: (BuildContext context, Color value, Widget child) { return ColorFiltered( colorFilter: ColorFilter.mode(value, BlendMode.modulate), child: Container( color: Colors.white, height: 300, width: 300, ), ); }, )

Dans cet exemple, nous utilisons un ColorTween pour animer la transition de couleur entre le rouge et le jaune. Le builder retourne le widget à animer avec la couleur variable fournie par le tween.

Tweens Disponibles

Flutter propose une multitude de Tween pour différents types de variables, tels que :

AlignmentGeometryTween
ConstantTween
SizeTween
TextStyleTween

Conclusion

Les animations implicites dans Flutter sont puissantes et faciles à utiliser. Elles permettent de créer des effets visuels dynamiques sans complexité excessive. En utilisant des widgets comme AnimatedContainer et TweenAnimationBuilder, vous pouvez rapidement animer vos interfaces et offrir une expérience utilisateur plus riche et interactive.

Flutter

Les Animations Implicites dans Flutter