[{"data":1,"prerenderedAt":22},["ShallowReactive",2],{"articolo-animazioni-performanti-in-flutter-con-rive-oltre-lottie":3,"comments-article-animazioni-performanti-in-flutter-con-rive-oltre-lottie":21},{"id":4,"title":5,"slug":6,"excerpt":7,"body":8,"cover_image":9,"video_url":10,"status":11,"published_at":12,"meta_title":13,"meta_description":14,"category":15,"author":19},18,"Animazioni performanti in Flutter con Rive: oltre Lottie","animazioni-performanti-in-flutter-con-rive-oltre-lottie","Scopri come integrare Rive in Flutter per creare animazioni interattive, leggere e controllabili da codice. Una guida pratica con esempi e confronto con le alternative.","## Perché Rive?\n\nQuando si parla di animazioni vettoriali in Flutter, il pensiero corre subito a Lottie. Tuttavia esiste un'alternativa sempre più matura: **Rive**. Rive non è solo un formato, ma un intero editor che permette di creare animazioni vettoriali, definire una **State Machine** e controllarla direttamente dal codice Flutter.\n\nI vantaggi principali rispetto a Lottie sono:\n\n- **File leggeri**: i `.riv` sono spesso più compatti dei JSON di Lottie.\n- **Interattività reale**: grazie alla State Machine puoi reagire a input dell'utente senza ricaricare l'animazione.\n- **Runtime ottimizzato**: il rendering avviene tramite il motore Rive, pensato per le performance.\n- **Controllo da codice**: puoi modificare variabili (inputs) e far cambiare stato all'animazione in tempo reale.\n\n## Installazione\n\nAggiungi il pacchetto al tuo `pubspec.yaml`:\n\n```yaml\ndependencies:\n  rive: ^0.13.1\n```\n\nPoi inserisci il file `.riv` (esportato dall'editor su rive.app) nella cartella assets e dichiaralo:\n\n```yaml\nflutter:\n  assets:\n    - assets\u002Fanimations\u002Fhero.riv\n```\n\n## Visualizzare una semplice animazione\n\nIl widget più immediato è `RiveAnimation.asset`, che carica e riproduce un'animazione:\n\n```dart\nimport 'package:flutter\u002Fmaterial.dart';\nimport 'package:rive\u002Frive.dart';\n\nclass SimpleRive extends StatelessWidget {\n  const SimpleRive({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return const SizedBox(\n      height: 250,\n      child: RiveAnimation.asset(\n        'assets\u002Fanimations\u002Fhero.riv',\n        fit: BoxFit.contain,\n      ),\n    );\n  }\n}\n```\n\nDi default viene riprodotta la prima animazione presente nel file. Puoi specificarne una particolare con il parametro `animations`.\n\n## Controllare la State Machine\n\nIl vero punto di forza di Rive è la **State Machine**. Per interagire con essa occorre ottenere i suoi `SMIInput`. Vediamo un esempio con un input booleano che cambia stato al tocco:\n\n```dart\nclass InteractiveRive extends StatefulWidget {\n  const InteractiveRive({super.key});\n\n  @override\n  State\u003CInteractiveRive> createState() => _InteractiveRiveState();\n}\n\nclass _InteractiveRiveState extends State\u003CInteractiveRive> {\n  StateMachineController? _controller;\n  SMIBool? _isPressed;\n\n  void _onRiveInit(Artboard artboard) {\n    final controller = StateMachineController.fromArtboard(\n      artboard,\n      'State Machine 1',\n    );\n    if (controller != null) {\n      artboard.addController(controller);\n      _controller = controller;\n      _isPressed = controller.findInput\u003Cbool>('pressed') as SMIBool?;\n    }\n  }\n\n  void _toggle() {\n    _isPressed?.value = !(_isPressed?.value ?? false);\n  }\n\n  @override\n  void dispose() {\n    _controller?.dispose();\n    super.dispose();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return GestureDetector(\n      onTap: _toggle,\n      child: SizedBox(\n        height: 200,\n        child: RiveAnimation.asset(\n          'assets\u002Fanimations\u002Fbutton.riv',\n          stateMachines: const ['State Machine 1'],\n          onInit: _onRiveInit,\n        ),\n      ),\n    );\n  }\n}\n```\n\n### Tipi di input disponibili\n\nRive mette a disposizione tre tipi di input controllabili da codice:\n\n- **SMIBool**: stato on\u002Foff (es. toggle, hover).\n- **SMINumber**: valore numerico (es. percentuale di completamento).\n- **SMITrigger**: impulso istantaneo che scatena una transizione (es. click di conferma).\n\nEsempio con un trigger:\n\n```dart\nfinal trigger = controller.findInput\u003Cbool>('success') as SMITrigger?;\n\u002F\u002F In risposta a un evento:\ntrigger?.fire();\n```\n\n## Rive Events: ascoltare gli eventi\n\nDalle versioni recenti, Rive supporta gli **eventi** emessi dall'animazione stessa, utili per sincronizzare la logica dell'app con momenti precisi dell'animazione:\n\n```dart\ncontroller.addEventListener((event) {\n  if (event.name == 'animationComplete') {\n    \u002F\u002F naviga o aggiorna lo stato\n  }\n});\n```\n\n## Rive vs Lottie: quando scegliere cosa\n\n| Aspetto | Rive | Lottie |\n|---------|------|--------|\n| Interattività | Nativa (State Machine) | Limitata |\n| Peso file | Generalmente minore | Maggiore |\n| Ecosistema designer | Editor proprietario | After Effects + Bodymovin |\n| Controllo runtime | Molto granulare | Principalmente playback |\n\nSe la tua animazione è puramente decorativa e prodotta da un motion designer in After Effects, Lottie resta una scelta valida. Se invece hai bisogno di **interattività** o di **controllo fine da codice** (bottoni animati, onboarding interattivi, mascotte reattive), Rive offre un vantaggio concreto.\n\n## Buone pratiche\n\n- **Rilascia sempre il controller** nel metodo `dispose` per evitare memory leak.\n- **Verifica i nomi** di State Machine e input: devono corrispondere esattamente a quelli definiti nell'editor.\n- **Evita troppe State Machine attive** contemporaneamente su schermo per non gravare sul rendering.\n- **Usa `BoxFit`** appropriato per evitare deformazioni dell'artboard.\n\n## Conclusione\n\nRive porta in Flutter animazioni vettoriali leggere e soprattutto **interattive**, colmando il limite principale di Lottie. Grazie alle State Machine e agli eventi, puoi costruire interfacce vive che reagiscono all'utente con poche righe di codice. Per progetti che puntano su micro-interazioni curate, vale sicuramente la pena di sperimentarlo.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Farticles\u002F8e06eaff-d4cf-45ae-becb-6ec0f4a92e49.jpg",null,"published","2026-06-22T04:00:37+00:00","Animazioni Rive in Flutter: la guida pratica","Integra Rive in Flutter per animazioni interattive e leggere: State Machine, input, eventi ed esempi di codice. Confronto con Lottie incluso.",{"id":16,"name":17,"slug":18},1,"Guide","guide",{"id":16,"name":20},"Flutter Bot",[],1785219605295]