Widget AnimatedContainer – Donnez vie à votre application

À quoi peut vous servir le widget AnimatedContainer dans une application Flutter ?

Le widget AnimatedContainer vous permet d’ajouter des animations fluides et personnalisées à vos applications. Contrairement à un simple Container dont les propriétés restent fixes, celui-ci vous permet d’animer les changements de propriétés comme la taille, la couleur, la bordure, ou encore la décoration. Ces animations peuvent être effectuées sans effort et rendent votre interface utilisateur (UI) plus dynamique et attractive.

Vous pouvez par exemple l’utiliser pour :

1. Un bouton qui change de taille : Imaginez un bouton qui grossit lorsque l’utilisateur clique dessus. L’AnimatedContainer peut rendre cette transition fluide et agréable visuellement.
2. Des cartes interactives : Lorsque l’utilisateur sélectionne une carte, celle-ci peut changer de couleur ou de bordure pour indiquer la sélection, tout en animant la transition.
3. Des transitions de thèmes : En basculant d’un mode clair à un mode sombre, l’AnimatedContainer peut rendre le changement de couleurs des éléments plus fluide.
4. Des animations de chargement : Créez des animations visuelles agréables pour indiquer une progression ou un état de chargement.

Pour résumer, l’AnimatedContainer, vous pouvez enrichir l’expérience utilisateur tout en conservant une mise en œuvre simple.

Comment mettre en place un AnimatedContainer ?

Pour utiliser un AnimatedContainer, il suffit de l’intégrer dans votre widget tree et de fournir les propriétés à animer. Voici un exemple de base :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimatedContainerDemo(),
    );
  }
}

class AnimatedContainerDemo extends StatefulWidget {
  @override
  _AnimatedContainerDemoState createState() => _AnimatedContainerDemoState();
}

class _AnimatedContainerDemoState extends State<AnimatedContainerDemo> {
  double _width = 100;
  double _height = 100;
  Color _color = Colors.blue;

  void _animateContainer() {
    setState(() {
      _width = _width == 100 ? 200 : 100;
      _height = _height == 100 ? 200 : 100;
      _color = _color == Colors.blue ? Colors.red : Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedContainer Demo')),
      body: Center(
        child: GestureDetector(
          onTap: _animateContainer,
          child: AnimatedContainer(
            duration: Duration(seconds: 1),
            width: _width,
            height: _height,
            color: _color,
            curve: Curves.easeInOut,
          ),
        ),
      ),
    );
  }
}

Dans cet exemple, le conteneur change de taille et de couleur lorsque vous le touchez.

Les différents paramètres du widget AnimatedContainer

Le widget AnimatedContainer dispose de plusieurs paramètres permettant de personnaliser sa forme et la durée de son animation. Voici une explication détaillée de chaque paramètre, accompagnée d’exemples pratiques :

1. Duration : Ce paramètre est obligatoire et définit la durée de l’animation.

AnimatedContainer(
  duration: Duration(seconds: 2),
  width: 100,
  height: 100,
);

2. curve : Définit la courbe de l’animation pour contrôler la manière dont elle se déroule (linéaire, accélération, etc.).

AnimatedContainer(
  duration: Duration(seconds: 1),
  curve: Curves.easeInOut,
  color: Colors.blue,
);

Voici la liste des différents types de courbes supportées par Flutter et leur effet :

3. Propriétés animables :

La taille : Vous pouvez animer width et height pour créer des effets de changement de dimensions.

AnimatedContainer(
  duration: Duration(seconds: 1),
  width: _isExpanded ? 200 : 100,
  height: _isExpanded ? 200 : 100,
);

Couleur : La propriété color permet de passer d’une couleur à une autre avec fluidité.

AnimatedContainer(
  duration: Duration(seconds: 1),
  color: _isSelected ? Colors.red : Colors.blue,
);

Bordures : Les propriétés border et borderRadius permettent d’ajouter ou de modifier des bordures et leurs coins arrondis.

AnimatedContainer(
  duration: Duration(seconds: 1),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black, width: 2),
    borderRadius: _isRounded ? BorderRadius.circular(20) : BorderRadius.zero,
  ),
);

Décoration : Utilisez decoration pour ajouter des gradients, des ombres, ou des images en fond.

AnimatedContainer(
  duration: Duration(seconds: 1),
  decoration: BoxDecoration(
    gradient: LinearGradient(colors: [Colors.blue, Colors.green]),
  ),
);

Quelles sont les différentes animations possibles avec un AnimatedContainer ?

L’AnimatedContainer n’a pas d’animations prédéfinies, mais voici les types d’animations courantes que vous pouvez créer, accompagnées d’exemples de code pour chacune.

Animations de taille

Change la largeur et/ou la hauteur pour créer des effets d’agrandissement ou de réduction.

setState(() {
  _width = _width == 100 ? 200 : 100;
  _height = _height == 100 ? 200 : 100;
});

Animations de couleur

Modifie la couleur de fond ou la couleur de bordure pour créer des transitions visuelles attrayantes.

setState(() {
  _color = _color == Colors.blue ? Colors.red : Colors.blue;
});

Animations de bordures

Passe d’une bordure arrondie à une bordure carrée ou modifier l’épaisseur des bordures.

setState(() {
  _borderRadius = _borderRadius == BorderRadius.circular(0) ? BorderRadius.circular(20) : BorderRadius.circular(0);
});

Animations de décoration

Ajoute ou supprime des ombres, des gradients, ou même des images en fond.

setState(() {
  _decoration = BoxDecoration(
    gradient: _isGradient
      ? null
      : LinearGradient(colors: [Colors.blue, Colors.green]),
  );
  _isGradient = !_isGradient;
});

Combinaisons d’animations

Enfin, vous pouvez tout à fait mélanger plusieurs animations ensemble.

setState(() {
  _width = _width == 100 ? 200 : 100;
  _color = _color == Colors.blue ? Colors.red : Colors.blue;
  _borderRadius = _borderRadius == BorderRadius.circular(0) ? BorderRadius.circular(20) : BorderRadius.circular(0);
});