Chez XPEHO, nous aimons la mobilité et nous nous sommes, depuis peu, lancés dans le partage de connaissances à travers des meetups, vidéos, articles, etc. Comme vous pouvez le découvrir dans notre dernier article sur le Monkey Testing.
Aujourd’hui, nous allons vous parler des animations Flutter !
L’ajout d’animations permet d’améliorer l’expérience utilisateur en rendant les applications plus intuitives et compréhensibles.
Flutter offre nativement la possibilité d’enrichir vos applications avec de nombreuses animations de manière très simple.
Il est également possible, comme nous allons le découvrir dans cet article, de personnaliser soit-même ces animations.
Scale Transition
Débutons ensemble avec la découverte du widget ScaleTransition.
Ce widget permet d’animer un widget afin d’effectuer des changements d’échelle/de taille sur ce dernier.
Commençons d’abord par créer un AnimationController. Ce dernier permet, comme son nom l’indique, de contrôler le comportement de notre animation [AnimationController class — animation library — Dart API].
Notons qu’un AnimationController a besoin d’un TickerProvider configurable en ajoutant le paramètre vsync à son constructeur.
class _ScaleAnimationViewState extends State<ScaleAnimationView>
with TickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 3),
vsync: this,
)..forward();
}
…
}
Définissons maintenant notre animation. Ici, nous nous servirons de la classe CurvedAnimation [CurvedAnimation class — animation library — Dart API].
late Animation _animation;
@override
void initState() {
super.initState();
…
_animation = CurvedAnimation(
parent: _controller,
curve: Curves.easeIn,
);
}
Pour terminer, ajoutons simplement le widget ScaleTransition en tant que widget parent du widget que nous souhaitons animer [ScaleTransition class — widgets library — Dart API]
ScaleTransition(
scale: _animation,
child: Image.asset(
‘assets/images/xpeho_logo.png’,
),
),
Code complet :
class ScaleAnimationView extends StatefulWidget {
const ScaleAnimationView({Key? key}) : super(key: key);@override
State<ScaleAnimationView> createState() => _ScaleAnimationViewState();
}
class _ScaleAnimationViewState extends State<ScaleAnimationView>
with TickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 3),
vsync: this,
)..forward();
_animation = CurvedAnimation(
parent: _controller,
curve: Curves.easeIn,
);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(toolbarHeight: 0),
body: Center(
child: ScaleTransition(
scale: _animation,
child: Image.asset(
‘assets/images/xpeho_logo.png’
),
),
),
);
}
}
Résultat :
Hero animation
Découvrons ensemble maintenant une autre animation simple à implémenter : Le Hero.
Ce widget permet de générer l’animation de déplacement d’un widget d’une page à une autre.
Créons un widget Hero en tant que parent du widget sur lequel nous souhaitons ajouter une animation. Nous utiliserons ici notre logo. Ajoutons un tag à ce dernier afin de faire le lien entre celui-ci et celui de la page suivante.
Hero(
tag: ‘logo_xpeho’,
child: Image.asset(
‘assets/images/xpeho_logo.png’,
),
),
Ce même widget Hero doit également être placé sur le même widget dans l’écran suivant ainsi qu’avoir le même tag que celui-ci défini dans cette page-ci [Hero animations | Flutter].
De cette manière là, l’animation entre les deux pages se fera automatiquement.
Code complet :
class HomeView extends StatelessWidget {
const HomeView({Key? key}) : super(key: key);@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(toolbarHeight: 0),
body: Center(
child: InkWell(
onTap: () {
Navigator.push(
context,
PageRouteBuilder(
transitionDuration:
const Duration(seconds: 1),
pageBuilder: (_, __, ___) => const HeroView(),
),
);
},
child: Hero(
tag: ‘logo_xpeho’,
child: Image.asset(
‘assets/images/xpeho_logo.png’,
),
),
),
),
);
}
}
class HeroView extends StatelessWidget {
const HeroView({Key? key}) : super(key: key);@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(toolbarHeight: 0),
body: Padding(
padding: const EdgeInsets.symmetric(
vertical: 48.0,
horizontal: 12.0,
),
child: Row(
children: [
Expanded(
flex: 1,
child: InkWell(
onTap: () => Navigator.pop(context),
child: Hero(
tag: ‘logo_xpeho’,
child: Image.asset(
‘assets/images/xpeho_logo.png’,
),
),
),
),
const SizedBox(
width: 12.0,
),
const Expanded(
flex: 3,
child: Text(
‘De l\’expérience et des hommes’,
style: TextStyle(
fontSize: 24,
),
),
),
],
),
),
);
}
}
Flutter a également sorti une vidéo courte sur le sujet => Hero (Flutter Widget of the Week)
Résultat :
Conclusion
Les exemples présentés dans cet article ne sont qu’une partie des multiples animations disponibles en Flutter.
Vous retrouverez l’ensemble des animations existantes dans la documentation officielle : Animation and motion widgets | Flutter
Nous vous invitons à découvrir l’ensemble de notre contenu via nos différents canaux de communication.
Nos articles sur medium : https://medium.com/@xpeho.mobile
Notre chaîne Youtube : Youtube XPEHO
Notre site officiel : https://xpeho.fr/
N’hésitez pas à nous y suivre afin de ne manquer aucun des nombreux sujets qui seront abordés par notre équipe à l’avenir !
A propos de l’auteur
Article rédigé par : NayMak
Développeur mobile chez XPEHO
