Ajouter des animations avec le package lottie de Flutter

Installer le package google lottie

La première chose à faire pour utiliser un package Flutter est de l’exporter. Deux options s’offrent donc à vous pour télécharger le package lottie dans sa dernière version (3.1.2) : 

Utiliser le terminal de commande dans Visual Studio et entrer la commande : 

• $ flutter pub add lottie ;
• Placer la dépendance lottie: ^3.1.2 dans votre dossier pubspec.yaml.

Une fois cela fait, laissez le package se télécharger et ajoutez la ligne import ‘package:lottie/lottie.dart’; en haut de chaque document en .dart où vous souhaitez l’utiliser.

Utiliser le package lottie

Une fois installé, le package va vous permettre d’afficher des animations venant de la bibliothèque du site Lottie, directement dans votre application Flutter. Comme pour le widget Image, le widget Lottie propose deux méthodes : 

• asset, qui vous permet d’intégrer des ressources que vous avez importées dans votre application au préalable ; 
• network, pour récupérer des ressources en ligne via leur url. 

Voici un code d’exemple fourni par Flutter :

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: [
            Lottie.network(
                'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json'),
          ],
        ),
      ),
    );
  }
}

Récupérer le lien d’une animation Lottie

Vous ne pouvez pas simplement mettre le lien de la page de l’animation, dans votre méthode lottie.network. Voici donc comment récupérer un lien qui va pouvoir être exploité par le package : 

1. Cliquez sur l’animation qui vous intéresse ;
2. Cliquez sur le bouton Download et ajoutez la ressource à votre Workspace ; 
3. Une fois cela fait, une nouvelle page va charger, sur laquelle l’animation lottie va se répeter, avec un menu sur la gauche ; 
4. Dans ce menu, vous trouverez un “oEmbed URL”, qui est le lien que vous devez copier et utiliser avec la méthode lottie.network 

Personnaliser ses animations

Contrôler votre animation 

Le package lottie, vous laisse contrôler la manière dont votre application va lancer vos animations. Par exemple, vous pouvez décider du moment où celles-ci débutent ou s’arrêtent, si elles se jouent à l’endroit ou à l’envers, etc. Tout cela est possible en ajoutant un controller à votre application. Je vous partage ici, le code de la documentation officielle du package : 

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: [
            Lottie.asset(
              'assets/LottieLogo1.json',
              controller: _controller,
              onLoaded: (composition) {
                // Configure the AnimationController with the duration of the
                // Lottie file and start the animation.
                _controller
                  ..duration = composition.duration
                  ..forward();
              },
            ),
          ],
        ),
      ),
    );
  }
}

Contrôler la tailler de mes animations 

Vous pouvez gérer la taille de vos animations en ajoutant directement des arguments width et heigth à votre widget lottie. Ajoutez-y un argument fit qui va prendre comme paramètre BoxFit.fill et votre animation prendra tout l’espace que vous avez défini. Voici un exemple : 

Lottie.network(
  'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json',
  width: 200,
  height: 200,
  fit: BoxFit.fill,
)

Ralentir ou accélérer une animation

la vitesse de votre animation peut facilement être modifié grâce au paramètre frameRate. Celui peut ensuite prendre une des trois valeurs suivantes : 

• FrameRate.max (120 FPS est le maximum) ; 
• FrameRate.composition (utilise la vitesse de base de l’animation) ; 
• FrameRate(20) (Utilise la valeur que vous indiquez, en nombre de frames par secondes).