Usare le animazioni implicite in Flutter

In Flutter abbiamo due tipologie di animazioni:

• quelle esplicite, "costruite" da noi, sulle quali abbiamo un maggior controllo, ma che richiedono più codice
• quelle implicite, che usando dei widget pre-confezionati, sui quali abbiamo un minor controllo, ma richiedono meno tempo

In questo articolo vediamo un esempio delle seconde; abbiamo visto quelle esplicite in quest'altro articolo.

Quello che faremo è animare un IconButton quando viene modificato lo stato.

Passando da una Icon all'altra la faremo ruotare.

Non sono richieste librerie esterne, in quanto Flutter già dispone di molti widget animation:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Test'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late bool _isFavorite = false;

  void _setIcon() {
    setState(() {
      _isFavorite = !_isFavorite;
    });
  }

  getIcon() {
    return AnimatedSwitcher(
      duration: const Duration(milliseconds: 300),
      transitionBuilder: (child, animation) {
        return RotationTransition(
          turns: Tween(
            begin: 0.5,
            end: 1.0,
          ).animate(animation),
          child: child,
        );
      },
      child: Icon(
        _isFavorite ? Icons.star : Icons.star_border,
        key: ValueKey(_isFavorite),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            child: Container(
              color: Colors.black12,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: IconButton(
                  onPressed: () {
                    _setIcon();
                  },
                  icon: getIcon(),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Quello che dovete tenere a mente è:

• AnimatedSwitcher indica che vogliamo eseguire un'animazione
• transitionBuilder indica come vogliamo animare il componente
• ValueKey ci serve per indicare a Flutter cosa vogliamo animare e "quando"

Enjoy!