Animazioni implicite in Flutter con AnimatedContainer

Creiamo un nuovo progetto e impostiamo uno StatefulWidget che conterrà le variabili che faremo animare. Le animazioni implicite reagiscono ai cambiamenti di stato: ogni volta che chiamiamo setState, i widget animati interpoleranno automaticamente tra il vecchio e il nuovo valore.

Partiamo da una struttura minima con una variabile booleana _expanded che useremo per attivare/disattivare l'animazione.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animazioni implicite',
      theme: ThemeData(colorSchemeSeed: Colors.indigo, useMaterial3: true),
      home: const AnimationDemo(),
    );
  }
}

class AnimationDemo extends StatefulWidget {
  const AnimationDemo({super.key});

  @override
  State<AnimationDemo> createState() => _AnimationDemoState();
}

class _AnimationDemoState extends State<AnimationDemo> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Animazioni implicite')),
      body: const Center(child: Text('Iniziamo!')),
    );
  }
}

AnimatedContainer è il widget implicito più versatile: anima automaticamente le modifiche a proprietà come width, height, color, padding, decoration e alignment.

Le due proprietà fondamentali sono:

• duration: quanto dura l'animazione.
• curve: la curva di accelerazione (es. Curves.easeInOut).

Quando cambiamo _expanded con setState, il container interpolerà tra i due set di valori.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('Animazioni implicite')),
    body: Center(
      child: GestureDetector(
        onTap: () => setState(() => _expanded = !_expanded),
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 500),
          curve: Curves.easeInOut,
          width: _expanded ? 250 : 120,
          height: _expanded ? 250 : 120,
          decoration: BoxDecoration(
            color: _expanded ? Colors.indigo : Colors.orange,
            borderRadius: BorderRadius.circular(_expanded ? 32 : 8),
          ),
          alignment: Alignment.center,
          child: const Text(
            'Tocca!',
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
        ),
      ),
    ),
  );
}

AnimatedOpacity anima la trasparenza di un widget, ideale per far apparire o scomparire elementi gradualmente. Il valore opacity va da 0.0 (invisibile) a 1.0 (completamente visibile).

Aggiungiamo un testo che appare in dissolvenza solo quando il container è espanso. Avvolgiamo il tutto in una Column per ospitare più elementi.

body: Center(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      GestureDetector(
        onTap: () => setState(() => _expanded = !_expanded),
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 500),
          curve: Curves.easeInOut,
          width: _expanded ? 250 : 120,
          height: _expanded ? 250 : 120,
          decoration: BoxDecoration(
            color: _expanded ? Colors.indigo : Colors.orange,
            borderRadius: BorderRadius.circular(_expanded ? 32 : 8),
          ),
          alignment: Alignment.center,
          child: const Text(
            'Tocca!',
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
        ),
      ),
      const SizedBox(height: 24),
      AnimatedOpacity(
        opacity: _expanded ? 1.0 : 0.0,
        duration: const Duration(milliseconds: 500),
        child: const Text(
          'Riquadro espanso! 🎉',
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
      ),
    ],
  ),
),

AnimatedAlign anima la proprietà alignment di un figlio all'interno di uno spazio definito. È perfetto per spostare un elemento da un angolo all'altro in modo fluido.

Inseriamo un piccolo cerchio che si sposta tra l'alto e il basso a seconda dello stato _expanded. Lo collochiamo dentro un Container con altezza fissa per dare spazio all'animazione.

Container(
  height: 150,
  width: double.infinity,
  margin: const EdgeInsets.symmetric(horizontal: 24),
  decoration: BoxDecoration(
    color: Colors.grey.shade200,
    borderRadius: BorderRadius.circular(12),
  ),
  child: AnimatedAlign(
    alignment: _expanded ? Alignment.bottomRight : Alignment.topLeft,
    duration: const Duration(milliseconds: 600),
    curve: Curves.elasticOut,
    child: Container(
      margin: const EdgeInsets.all(12),
      width: 40,
      height: 40,
      decoration: const BoxDecoration(
        color: Colors.redAccent,
        shape: BoxShape.circle,
      ),
    ),
  ),
),

Quando nessun widget Animated* predefinito copre il caso d'uso, TweenAnimationBuilder permette di animare qualsiasi valore numerico. Si definisce un Tween (intervallo di valori) e una funzione builder che ricostruisce la UI a ogni frame.

A differenza degli altri widget, TweenAnimationBuilder parte automaticamente l'animazione al primo build. Qui lo usiamo per animare un contatore che sale da 0 al valore finale e una rotazione.

TweenAnimationBuilder<double>(
  tween: Tween(begin: 0, end: _expanded ? 100 : 0),
  duration: const Duration(milliseconds: 800),
  curve: Curves.easeOut,
  builder: (context, value, child) {
    return Column(
      children: [
        Transform.rotate(
          angle: value / 100 * 6.28, // un giro completo
          child: const Icon(Icons.star, size: 48, color: Colors.amber),
        ),
        const SizedBox(height: 8),
        Text(
          'Progresso: ${value.toInt()}%',
          style: const TextStyle(fontSize: 16),
        ),
      ],
    );
  },
),

Alcuni accorgimenti per usare al meglio le animazioni implicite:

• Usa child nel builder: in TweenAnimationBuilder e widget simili, passa i sotto-widget statici tramite il parametro child per evitare di ricostruirli a ogni frame.
• Scegli durate ragionevoli: tra 200 e 600 ms per le interazioni UI; durate troppo lunghe risultano lente.
• Sperimenta con le Curves: easeInOut, elasticOut, bounceOut cambiano molto la percezione.
• Animazioni implicite vs esplicite: se devi controllare manualmente play/pause, ripetizione o sincronizzare più animazioni, passa a AnimationController. Per semplici transizioni di stato, le implicite sono più pulite.
• Evita di animare widget pesanti: ricostruzioni frequenti di liste o immagini grandi possono causare cali di frame.

Di seguito un esempio di child riutilizzato per migliorare le prestazioni.

TweenAnimationBuilder<double>(
  tween: Tween(begin: 0, end: _expanded ? 1 : 0),
  duration: const Duration(milliseconds: 400),
  // Il widget statico viene costruito una sola volta
  child: const Icon(Icons.favorite, size: 48, color: Colors.pink),
  builder: (context, value, child) {
    return Opacity(
      opacity: value,
      child: Transform.scale(
        scale: 0.5 + value * 0.5,
        child: child, // riutilizziamo l'icona senza ricostruirla
      ),
    );
  },
),