Usare le animazioni esplicite 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 prime.

Ci limiteremo ad animare una Text, ma basterà cambiare il widget per animare quello che vi serve.

Non sono richieste librerie esterne, il tutto ruota intorno a:

• AnimationController che in sostanza si occupa dell'animazione
• AnimateBuilder che è un widget generico da "associare" all'animazione, e che all'interno contiene gli altri widget visibili

Qui sotto un esempio di codice:

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: '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>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(
        milliseconds: 1000,
      ),
      lowerBound: 0,
      upperBound: 1,
    );

    _animationController.forward();
  }

  @override
  void dispose() {
    super.dispose();
    _animationController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: AnimatedBuilder(
        animation: _animationController,
        child: const Text("CIAO"),
        builder: (context, child) => SlideTransition(
          position: Tween(
            begin: const Offset(0, 0.3),
            end: const Offset(0, 0),
          ).animate(
            CurvedAnimation(
              parent: _animationController,
              curve: Curves.easeInOut,
            ),
          ),
          child: child,
        ),
      ),
    );
  }
}

Provate a giocare sui parametri, su Tween e sul tipo di transition.

Enjoy!