Sobes.tech
Middle

Parlez-moi de l'animation dans Flutter.

sobes.tech IA

Réponse de l'IA

Dans Flutter, les animations se divisent en deux types principaux : implicites et explicites.

  • Les animations implicites sont des animations simples qui gèrent automatiquement les changements d’état du widget. Par exemple, AnimatedContainer modifie en douceur ses paramètres (couleur, taille) lors de la modification de ses propriétés sans avoir besoin d’écrire des contrôleurs d’animation.

  • Les animations explicites offrent un contrôle total sur le processus d’animation. Pour cela, on utilise AnimationController, qui contrôle le temps et la progression de l’animation. Avec Tween et Animation, on peut définir comment les valeurs changent dans le temps.

Exemple d’animation implicite :

AnimatedContainer(
  duration: Duration(seconds: 1),
  width: _selected ? 200 : 100,
  height: _selected ? 200 : 100,
  color: _selected ? Colors.blue : Colors.red,
  child: ...,
)

Exemple d’animation explicite :

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
    _animation = Tween<double>(begin: 0, end: 300).animate(_controller);
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Container(
          width: _animation.value,
          height: _animation.value,
          color: Colors.blue,
        );
      },
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

Ainsi, Flutter fournit des outils puissants pour créer des animations fluides et réactives qui améliorent l’expérience utilisateur.