Comment créer une animation de bouton avec Flare dans Flutter? Partie 3: implémenter l'animation dans le projet Flutter

Salut à tous!

Dans l’article d’aujourd’hui, nous poursuivons une série dans laquelle nous sommes en train de créer une animation dans Flutter en utilisant Flare. Cette série est divisée en trois parties et vous pouvez toutes les vérifier ici:

  • Partie 1: Créez votre première animation!
  • Partie 2: Animations avec TrimPath
  • Partie 3: implémenter l'animation dans le projet Flutter

Ceci est la dernière partie. Dans cet article, nous allons passer à la dernière étape: intégrer l'animation à notre projet Flutter pour atteindre ce résultat:

Si vous n'avez pas lu les articles précédents, vous pouvez tous les lire (je vous encourage!) Ou vous pouvez lancer ce projet Flare et commencer à partir de là.

Étape 1: Créer un projet Flutter

Nous allons commencer par le projet Flutter vide. Vous pouvez omettre cette étape si vous souhaitez intégrer une animation à une application existante. Si vous n'en avez pas, suivez les étapes décrites dans le guide du site Flutter.

Étape 2: Ajouter le package flare_flutter

Pour pouvoir utiliser flare dans votre projet Flutter, vous devez ajouter la bibliothèque appropriée. Cette bibliothèque s'appelle flare_flutter et vous pouvez la vérifier sur le site des paquetages pub. Vous y trouverez également des instructions sur son installation et son utilisation. Fondamentalement, tout ce que vous devez faire est:

a) Ajoutez ceci à votre fichier pubspec.yaml:

dépendances:
  flare_flutter: ^ 1.5.0

b) Exécuter les packages Flutter pour mettre à jour les packages de votre projet.

Vous êtes maintenant prêt à l'utiliser!

Étape 3: Ajouter le code d'animation

Lorsque nous avons une bibliothèque prête, nous pouvons exécuter la partie réelle de cet article: le codage. Nous allons commencer par modifier le fichier main.dart:

importer 'package: flare_flutter / flare_actor.dart';
importer 'package: flutter / material.dart';

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

La classe FlareButtonApp étend StatefulWidget {
  @passer outre
  _FlareButtonAppState createState () => _FlareButtonAppState ();
}

class _FlareButtonAppState étend l'état  {
  @passer outre
  Construction du widget (contexte BuildContext) {
    retourner MaterialApp (
      accueil: échafaudage (
        corps: centre (
          enfant: SizedBox (
            largeur: 500
            hauteur: 75,
            enfant: FlareActor (
              'assets / Button.flr',
              animation: 'Chargement',
              fit: BoxFit.fitWidth,
            ),
          ),
        ),
      ),
    )
  }
}

Le widget le plus intéressant ici est FlareActor. Ce widget est responsable de l'affichage de l'animation. Comme vous pouvez le constater, j'ai intégré ce widget dans le widget SizedBox. Je l'ai fait pour m'assurer que la taille de mon widget sera exactement de 500x75 pixels.

FlareActor a peu de paramètres. Le premier, ‘assets / Button.flr’, est le chemin du fichier de notre animation. Pour que cela fonctionne, nous devons exporter notre fichier Flare et le placer dans des actifs:

Étape 3.1: Ajouter un élément Flare

Pour ajouter une ressource Flare, vous devez ouvrir votre fichier Flare (comme celui-ci), appuyez sur l'icône Exporter à droite, choisissez Exporter et confirmez-le. Le fichier généré aura l'extension * .flr et vous devez le placer dans un dossier du projet Flutter. Dans mon cas, il s’agit d’atouts dans la racine du projet:

Pour rendre ce fichier visible pour Flutter, vous devez déclarer le dossier des actifs dans le fichier pubspec.yaml:

battement:
  les atouts:
    - les atouts/

Et c'est tout! Revenons maintenant au widget FlareActor.

Étape 3: Ajouter le code d'animation (suite)

Le paramètre suivant dans le widget FlareActor est l’animation: ‘Chargement’. C’est le nom de notre animation. Vous pouvez modifier le nom de l'animation dans le projet Flare, à partir du menu de gauche visible après le passage à l'onglet Animer:

Le paramètre suivant est fit: BoxFit.fitWidth, qui décrit la manière dont l’animation est affichée (comme pour les images). Dans ce cas, nous aimerions nous assurer que toute la largeur est visible.

C'est ça! Vous pouvez exécuter votre application et vérifier l'animation! En ce moment, cela devrait ressembler à ceci:

Mais il y a plus…

Bonus: Ajouter des animations inactives et redémarrer

Si vous avez vu l'animation au début de l'article, vous remarquerez peut-être qu'elle était légèrement différente. En effet, nous pouvons ajouter plusieurs animations dans le projet Flare pour avoir plusieurs états de nos objets Flare. Et pour le moment, nous n’avons qu’un seul état (Chargement).

J'ai ajouté les états manquants au fichier ici. Vous remarquerez qu'il y a deux autres animations: Idle et Restart. Le premier n'est pas vraiment une animation, mais un état initial du bouton. La seconde est l'animation qui se produit après avoir cliqué sur le bouton.

Pour les faire fonctionner, vous devez ajouter quelques lignes dans le code que j'ai présenté ci-dessus:

class _FlareButtonAppState étend l'état  {
  String _animationName = 'Inactif';

  @passer outre
  Construction du widget (contexte BuildContext) {
    retourner MaterialApp (
      accueil: échafaudage (
        corps: centre (
          enfant: SizedBox (
            largeur: 500
            hauteur: 75,
            enfant: GestureDetector (
              onTap: _onButtonTap,
              enfant: FlareActor (
                'assets / Button.flr',
                animation: _animationName,
                fit: BoxFit.fitWidth,
              ),
            ),
          ),
        ),
      ),
    )
  }

  void _onButtonTap () {
    setState (() {
      if (_animationName == 'Inactif' || _animationName == 'Redémarrer') {
        _animationName = 'Chargement';
      } autre {
        _animationName = 'Redémarrer';
      }
    });
  }
}

Voilà! Maintenant, notre animation fonctionne comme un charme:

Vous pouvez consulter ce projet Flare ici sur 2dimensions.com.

Vous pouvez également consulter le code du référentiel à partir de l’article d’aujourd’hui ici:

Sommaire

C'est tout! C’est la fin de cette série. Au travers de tous les articles, nous avons complété le processus complet de création d’une animation sophistiquée à l’aide de Flare et d’intégration de cette animation dans le projet Flutter. Si vous souhaitez consulter les publications précédentes, vous pouvez le faire ici:

  • Partie 1: Créez votre première animation!
  • Partie 2: Animations avec TrimPath
  • Partie 3: implémenter l'animation dans le projet Flutter

Merci de votre lecture, vos commentaires et vos commentaires! Si vous avez aimé cet article, n’hésitez pas à le frapper!