Flutter: animation.

Bienvenue à tous et à toutes dans cet article qui nous aidera à comprendre l'un des concepts fondamentaux du développement avec Flutter qui rend l'expérience utilisateur un peu plus fluide : les Animations. 

Dans le dernier article, on a appris l'utilité des widgets, mais, pour avoir une application plus intuitive, il faut apprendre comment les animations fonctionnent dans Flutter.

Animation : Fonctionnement

Flutter perçoit l'animation comme une valeur qui peut prendre différents types. Cela peut être un Double qui va modifier l'opacité d'un Widget ou cela peut être une couleur d'un widget qui passe d'une couleur à une autre.

 Ces valeurs sont stockées dans un objet qui s'appelle 'Animation' qui a un objet accompagnateur qui s'appelle 'AnimationStatus' qui va vérifier si l'objet Animation est en cours d'exécution ou pas. 

On peut aussi ajouter l'élément 'animation.addStatusListener' pour qu'à chaque fois qu'une animation finit, on peut déclencher un évènement qui montre, par exemple, la page de connexion.

La librairie "flutter/animation.dart"

La librairie 'animation.dart' offre les éléments basiques pour implémenter l'animation dans votre application Flutter. Flutter rend cela très facile en incluant dans la librairie 'Widget', des éléments qui servent à animer les propriétés d'un widget à l'aide de certains modules comme 'ImplicitlyAnimatedWidgets' et 'AnimatedWidgets'. L'avantage de cette librairie, c'est qu'elle offre beaucoup de flexibilité dans le cas où les animations de base ne comblent pas les besoins de l'application. Elle peut être personnalisée pour avoir les animations de widgets que vous voulez.

Animation Controller :

AnimationController est un élément du système d'animation Flutter qui permet le contrôle du déroulement de l'animation. Il contrôle la durée de l'animation, la courbe d'animation (comment l'animation évolue au cours du temps), et l'état de l'animation.

Tween :

Un Tween est un élément qui s'applique à une animation de type Double et sert à changer les valeurs d'une animation. Par exemple, pour faire une transition d'un widget entre deux couleurs, on peut utiliser TweenColor pour qu'il facilite la transition entre la valeur d'animation de départ et celle de la fin. 

Animation en utilisant 'physics'

On peut aussi utiliser les simulations physiques qui vont agir comme un moyen de rendre l'application plus intuitive pour les utilisateurs, en simulant que l'objet est attaché à un ressort.etc

Examples d'animations:

Dans cet exemple pris du site officiel de Flutter, on essaie de changer la taille d'un conteneur à des valeurs aléatoires.

``` 

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(const AnimatedContainerApp());

class AnimatedContainerApp extends StatefulWidget {
 const AnimatedContainerApp({super.key});

 @override
 State<AnimatedContainerApp> createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {

 double _width = 50;
 double _height = 50;
 Color _color = Colors.green;
 BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       appBar: AppBar(
         title: const Text('Animation FLutter'),
       ),
       body: Center(
         child: AnimatedContainer(
          
           width: _width,
           height: _height,
           decoration: BoxDecoration(
             color: _color,
             borderRadius: _borderRadius,
           ),
          
           duration: const Duration(seconds: 1),
          
           curve: Curves.fastOutSlowIn,
         ),
       ),
       floatingActionButton: FloatingActionButton(
         
         onPressed: () {
          
           setState(() {
           
             final random = Random();

           
             _width = random.nextInt(300).toDouble();
             _height = random.nextInt(300).toDouble();

           
             _color = Color.fromRGBO(
               random.nextInt(256),
               random.nextInt(256),
               random.nextInt(256),
               1,
             );

           
             _borderRadius =
                 BorderRadius.circular(random.nextInt(100).toDouble());
           });
         },
         child: const Icon(Icons.play_arrow),
       ),
     ),
   );
 }
}

``

Références:

https://api.flutter.dev/flutter/animation/animation-library.html ,consulté le 16/03/2024

https://docs.flutter.dev/cookbook/animation/animated-container , consulté le 16/03/2024

https://api.flutter.dev/flutter/widgets/AnimatedBuilder-class.html ,consulté 16/03/2024

https://medium.com/flutter-community/a-complete-guide-to-flutter-animations-and-all-its-parts-3f427e14d669 , consulté le 16/03/2024.