Flip card in Flutter

In questo vediamo come usare Animation e AnimationController per creare un effetto flip su card in Flutter.

Non ci servono librerie esterne.

Inoltre l'ho testato sia su Android che su Linux.

Ecco il 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(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _animation;
  bool _isFront = true;

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

    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    );

    _animation =
        Tween<double>(begin: 0.0, end: 1.0).animate(_animationController)
          ..addListener(() {
            setState(() {});
          });
  }

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

  void _flip() {
    if (_isFront) {
      _animationController.forward();
    } else {
      _animationController.reverse();
    }

    _isFront = !_isFront;
  }

  Widget _frontWidget() {
    return Card(
      color: Colors.amber,
      elevation: 3,
      child: Container(
        width: 500,
        height: 500,
        alignment: Alignment.center,
        child: const Text('FRONT'),
      ),
    );
  }

  Widget _backWidget() {
    return Card(
      color: Colors.purple,
      elevation: 3,
      child: Container(
        width: 500,
        height: 500,
        alignment: Alignment.center,
        child: const Text('BACK'),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Flutter test'),
      ),
      body: GestureDetector(
        onTap: _flip,
        child: Center(
          child: AnimatedBuilder(
            animation: _animationController,
            builder: (ctx, child) {
              final transform = Matrix4.identity()
                ..setEntry(3, 2, 0.002)
                ..rotateY(_animation.value * 3.14);

              return Transform(
                transform: transform,
                alignment: Alignment.center,
                child: _isFront ? _frontWidget() : _backWidget(),
              );
            },
          ),
        ),
      ),
    );
  }
}

Enjoy!