¿Qué es FlareController?

FlareController es una clase abstracta de Flare-Flutter que actúa como puente entre las animaciones Flare y la lógica de la aplicación Flutter. Implementando esta interfaz se puede decidir qué animación se reproduce, cómo se mezclan varias fuentes y cómo responden los gráficos a los eventos del usuario.

Sus métodos principales son:

• initialize(FlutterActorArtboard artboard): se invoca cuando el FlareActor se crea y se usa para preparar nodos o valores iniciales.
• advance(FlutterActorArtboard artboard, double elapsed): se ejecuta en cada fotograma y devuelve true si el render debe seguir actualizándose.
• setViewTransform(Mat2D viewTransform): permite aplicar transformaciones de vista a la escana.

Uso básico con FlareActor

Para asociar un controlador a un FlareActor, se crea una clase que implemente FlareController y se pasa al parámetro controller:

FlareActor(
  "assets/characters/robot.flr",
  controller: MiControladorAnimacion(),
)

Flare-Flutter incluye FlareControls, una implementación concreta que cubre las necesidades más comunes.

FlareControls: control de reproducción

FlareControls permite reproducir, mezclar y observar la finalización de animaciones sin necesidad de implementar una clase propia.

Reprdoucir una animación

final FlareControls animCtrl = FlareControls();

// Inicia la animación llamada "idle"
animCtrl.play("idle");

Mezclar animaciones

El parámetro mix define la influencia relativa de una animación sobre el estado actual. Valores cercanos a 1.0 reemplazan casi por completo la pose previa.

// Transición suave entre "idle" y "saludo"
animCtrl.play("idle", mix: 0.6);
animCtrl.play("saludo", mix: 0.4);

Detectar la finalización

Sobrescribeindo onCompleted se pueden disparar acciones cuando una animación termina:

class ControlConCallbacks extends FlareControls {
  @override
  void onCompleted(String nombreAnimacion) {
    if (nombreAnimacion == "success") {
      // Realiza una acción cuando finaliza "success"
      debugPrint("Animación completada: $nombreAnimacion");
    }
  }
}

Crear un controlador personalizado

Cuando FlareControls no es suficiente, se puede extender FlareController e implementar la lógica exacta que se necesite. El siguiente ejemplo muestra un controlador que responde a un gesto de arrastre para modificar el estado de la animación:

import 'package:flare_fl/flare_controller.dart';
import 'package:flare_fl/flare_actor.dart';
import 'package:flutter/material.dart';

class ControladorGesto extends FlareController {
  double _progreso = 0.0;
  bool _arrastrando = false;

  @override
  void initialize(FlutterActorArtboard artboard) {
    // Configuración inicial del artboard
  }

  @override
  bool advance(FlutterActorArtboard artboard, double elapsed) {
    // Actualiza el frame actual según el progreso del gesto
    return true;
  }

  @override
  void setViewTransform(Mat2D transform) {
    // Aplica transformaciones de cámara si es necesario
  }

  void iniciarArrastre() {
    _arrastrando = true;
  }

  void actualizarPosicion(double dx) {
    if (_arrastrando) {
      _progreso = (dx / 200.0).clamp(0.0, 1.0);
    }
  }

  void finalizarArrastre() {
    _arrastrando = false;
  }
}

Escenarios de uso

FlareController resulta especialmente útil en los siguientes casos:

• Interfaz reactiva: botones que cambian de forma al presionarlos, iconos animados por estados de carga o éxito.
• Personajes: transiciones entre idle, caminar y atacar, mezclando capas para suavizar cambios.
• Visualización de datos: animaciones sincronizadas con valores reales, como barras, medidores o mapas térmicos.
• Tutoriales interactivos: guías que avanzan según la interacción del usuario con la pantalla.

Si se trabaja con proyectos nuevos, conviene tener en cuenta que Flare-Flutter evolucionó hacia Rive, que mantiene una filosofía similar con un editor más completo y soporte activo.