[{"data":1,"prerenderedAt":22},["ShallowReactive",2],{"articolo-animazioni-in-flutter-dalle-implicite-alle-esplicite":3,"comments-article-animazioni-in-flutter-dalle-implicite-alle-esplicite":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":18},1,"Animazioni in Flutter: dalle implicite alle esplicite","animazioni-in-flutter-dalle-implicite-alle-esplicite","Guida pratica alle animazioni in Flutter: scopri come usare gli widget animati impliciti, gli AnimationController e Tween per creare interfacce fluide e coinvolgenti.","## Introduzione\r\n\r\nLe animazioni sono uno degli aspetti che distinguono un'app mediocre da una eccellente. Flutter offre un sistema di animazioni potente e flessibile, capace di garantire 60 (o anche 120) frame al secondo. In questo articolo vedremo le due grandi famiglie di animazioni: **implicite** ed **esplicite**.\r\n\r\n## Animazioni implicite\r\n\r\nLe animazioni implicite sono il modo più semplice per animare un widget. Basta cambiare un valore e Flutter si occupa di interpolare automaticamente la transizione. Tutti questi widget iniziano con il prefisso `Animated`.\r\n\r\n```dart\r\nclass BoxDemo extends StatefulWidget {\r\n  const BoxDemo({super.key});\r\n\r\n  @override\r\n  State\u003CBoxDemo> createState() => _BoxDemoState();\r\n}\r\n\r\nclass _BoxDemoState extends State\u003CBoxDemo> {\r\n  bool _expanded = false;\r\n\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    return GestureDetector(\r\n      onTap: () => setState(() => _expanded = !_expanded),\r\n      child: AnimatedContainer(\r\n        duration: const Duration(milliseconds: 400),\r\n        curve: Curves.easeInOut,\r\n        width: _expanded ? 200 : 100,\r\n        height: _expanded ? 200 : 100,\r\n        color: _expanded ? Colors.deepPurple : Colors.teal,\r\n      ),\r\n    );\r\n  }\r\n}\r\n```\r\n\r\nOgni volta che cambia lo stato, `AnimatedContainer` anima la transizione tra i vecchi e i nuovi valori. Tra gli altri widget impliciti più utili troviamo:\r\n\r\n- `AnimatedOpacity` per dissolvenze\r\n- `AnimatedPadding` e `AnimatedAlign` per spostamenti\r\n- `AnimatedDefaultTextStyle` per il testo\r\n- `TweenAnimationBuilder` per animare qualsiasi valore\r\n\r\n## TweenAnimationBuilder\r\n\r\nQuando serve animare una proprietà non coperta da un widget specifico, `TweenAnimationBuilder` è la scelta ideale:\r\n\r\n```dart\r\nTweenAnimationBuilder\u003Cdouble>(\r\n  tween: Tween(begin: 0, end: 1),\r\n  duration: const Duration(seconds: 1),\r\n  builder: (context, value, child) {\r\n    return Transform.rotate(\r\n      angle: value * 2 * 3.1415,\r\n      child: child,\r\n    );\r\n  },\r\n  child: const Icon(Icons.refresh, size: 64),\r\n)\r\n```\r\n\r\n## Animazioni esplicite\r\n\r\nQuando hai bisogno di un controllo totale (ripetizione, inversione, sincronizzazione tra più animazioni) entrano in gioco le animazioni esplicite, basate su `AnimationController`.\r\n\r\nL'`AnimationController` richiede un `TickerProvider`, che si ottiene tipicamente con il mixin `SingleTickerProviderStateMixin`.\r\n\r\n```dart\r\nclass PulseDemo extends StatefulWidget {\r\n  const PulseDemo({super.key});\r\n\r\n  @override\r\n  State\u003CPulseDemo> createState() => _PulseDemoState();\r\n}\r\n\r\nclass _PulseDemoState extends State\u003CPulseDemo>\r\n    with SingleTickerProviderStateMixin {\r\n  late final AnimationController _controller;\r\n  late final Animation\u003Cdouble> _scale;\r\n\r\n  @override\r\n  void initState() {\r\n    super.initState();\r\n    _controller = AnimationController(\r\n      vsync: this,\r\n      duration: const Duration(milliseconds: 800),\r\n    )..repeat(reverse: true);\r\n\r\n    _scale = Tween\u003Cdouble>(begin: 0.8, end: 1.2).animate(\r\n      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),\r\n    );\r\n  }\r\n\r\n  @override\r\n  void dispose() {\r\n    _controller.dispose();\r\n    super.dispose();\r\n  }\r\n\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    return ScaleTransition(\r\n      scale: _scale,\r\n      child: const FlutterLogo(size: 100),\r\n    );\r\n  }\r\n}\r\n```\r\n\r\n### Punti chiave\r\n\r\n- **Ricorda sempre `dispose()`** del controller per evitare memory leak.\r\n- I `Tween` definiscono l'intervallo di valori, le `Curve` la velocità nel tempo.\r\n- I widget `*Transition` (`FadeTransition`, `SlideTransition`, `RotationTransition`) consumano direttamente un'`Animation`.\r\n\r\n## AnimatedBuilder\r\n\r\nPer logiche personalizzate, `AnimatedBuilder` evita di ricostruire l'intero albero dei widget:\r\n\r\n```dart\r\nAnimatedBuilder(\r\n  animation: _controller,\r\n  builder: (context, child) {\r\n    return Opacity(\r\n      opacity: _controller.value,\r\n      child: child,\r\n    );\r\n  },\r\n  child: const Text('Ciao Flutter'),\r\n)\r\n```\r\n\r\nIl parametro `child` viene costruito una sola volta e passato al builder, ottimizzando le prestazioni.\r\n\r\n## Quando usare cosa\r\n\r\n- **Animazioni implicite**: transizioni semplici di stato, codice minimale.\r\n- **Animazioni esplicite**: cicli, sincronizzazioni, controllo manuale e interazioni complesse.\r\n\r\n## Conclusione\r\n\r\nFlutter rende le animazioni accessibili senza sacrificare la potenza. Inizia con i widget impliciti per i casi comuni e passa agli `AnimationController` quando hai bisogno di un controllo fine. Per esigenze ancora più avanzate, dai un'occhiata a librerie come **Rive**, **Lottie** o al pacchetto **flutter_animate**, che permette di concatenare animazioni con poche righe di codice.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Farticles\u002Fa454aaa9-e2d0-48cd-a2c7-f59d8ec8eddc.jpg",null,"published","2026-06-06T07:11:38+00:00","Animazioni in Flutter: implicite ed esplicite","Guida pratica alle animazioni Flutter: widget impliciti, AnimationController, Tween e AnimatedBuilder con esempi di codice in Dart.",{"id":4,"name":16,"slug":17},"Guide","guide",{"id":19,"name":20},2,"Fabio",[],1781247857003]