Réaliser une animation de typing text dans Flutter

Fonction Complète

Voici une mise en place simple de typing text que vous pouvez intégrer directement dans votre application Flutter.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TypingTextScreen(),
    );
  }
}

class TypingTextScreen extends StatefulWidget {
  @override
  _TypingTextScreenState createState() => _TypingTextScreenState();
}

class _TypingTextScreenState extends State<TypingTextScreen> {
  String _fullText = "Bienvenue dans l'application Flutter!";
  String _currentText = "";
  int _currentIndex = 0;
  bool _isAnimating = false;

  // Fonction pour lancer l'animation
  void _startTypingAnimation() {
    if (_isAnimating) return; // Empêche de relancer l'animation si elle est en cours

    _isAnimating = true;
    _currentText = "";
    _currentIndex = 0;

    Future.doWhile(() async {
      await Future.delayed(const Duration(milliseconds: 100));
      if (_currentIndex < _fullText.length) {
        setState(() {
          _currentText += _fullText[_currentIndex];
          _currentIndex++;
        });
        return true;
      } else {
        _isAnimating = false;
        return false;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Typing Text Animation")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              _currentText,
              style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _startTypingAnimation,
              child: const Text("Commencer l'Animation"),
            ),
          ],
        ),
      ),
    );
  }
}

La fonction se déroule de la manière suivante :

Animation Déclenchée par un Bouton :

• L’animation démarre en appuyant sur le bouton grâce à la méthode _startTypingAnimation.

Animation Simplifiée :

• Pas besoin d’AnimationController.
• Utilisation de Future.doWhile pour afficher chaque caractère progressivement avec un délai (Duration).

Empêche le Double Lancement :

• La variable _isAnimating garantit qu’une nouvelle animation ne commence pas tant que la précédente n’est pas terminée.

Comment Fonctionne l’Animation ?

Ce code repose sur des 4 éléments de Flutter pour créer une animation de texte progressive :

1. Future.delayed

• Rôle : Crée un délai entre chaque caractère affiché pour simuler l’effet de saisie.
• Fonctionnement :
  • La méthode Future.delayed est appelée de manière répétée avec un délai spécifique (par défaut, 100ms).
  • Après chaque délai, un caractère supplémentaire est ajouté au texte affiché.
  • Cela donne l’illusion d’une saisie de texte en temps réel.

2. setState

• Rôle : Mettre à jour l’interface utilisateur à chaque étape de l’animation.
• Fonctionnement :
  • À chaque itération, un nouvel indice est ajouté à _currentText grâce à :dartCopier le code_currentText += _fullText[_currentIndex];
  • Ensuite, setState est appelé pour informer Flutter que l’interface utilisateur doit être redessinée.

3. Future.doWhile

• Rôle : Répéter l’opération jusqu’à ce que le texte complet soit affiché.
• Fonctionnement :
  • Tant que l’animation n’a pas atteint la fin du texte (_currentIndex < _fullText.length), l’opération continue.
  • Lorsque tous les caractères ont été affichés, l’animation s’arrête en renvoyant false.

4. Protection contre les actions répétées

• Variable _isAnimating : Empêche de lancer une nouvelle animation si une autre est déjà en cours. Cela garantit la stabilité du comportement.

Comment Utiliser Cette Fonction ?

Une fois la fonction créée, il vous suffit d’intégrer la variable _currentText dans un widget Text et la fonction _startTypingAnimation dans n’importe quel élément cliquable de votre application.

Vous pouvez personnaliser :

• Le texte, en changeant la propriété _fullText pour adapter le contenu.
• La durée en ajustant Future.delayed.

await Future.delayed(const Duration(milliseconds: 50)); // Plus rapide

• Le style du texte, en modifiant la propriété style, du widget Text.

style: const TextStyle(fontSize: 28, fontWeight: FontWeight.w600, color: Colors.blue),