Animations et Transitions fluides

Pourquoi les animations

• Feedback utilisateur clair (survol, appui, progression)
• Sens de continuité (transitions de page, Hero)
• Mise en avant de l'action principale

Animations implicites (simples et sûres)

• AnimatedContainer, AnimatedOpacity, AnimatedAlign, AnimatedPadding, AnimatedPositioned
• Bon pour : micro-interactions, toggles, changements d'état légers

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: AnimatedBoxPage());
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      appBar: AppBar(title: Text('AnimatedContainer')),
      body: AnimatedBox(),
    );
  }
}

class AnimatedBox extends StatefulWidget {
  const AnimatedBox({super.key});
  @override
  State<AnimatedBox> createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool toggled = false;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        onTap: () => setState(() => toggled = !toggled),
        child: AnimatedContainer(
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeOut,
          width: toggled ? 180 : 120,
          height: 120,
          decoration: BoxDecoration(
            color: toggled ? Colors.blue : Colors.orange,
            borderRadius: BorderRadius.circular(toggled ? 32 : 12),
          ),
        ),
      ),
    );
  }
}

Animations explicites (contrôle fin)

• AnimationController, Tween, CurvedAnimation, AnimatedBuilder
• Bon pour : orchestrer plusieurs tweens, synchroniser avec des états

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: ScalePulsePage());
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      appBar: AppBar(title: Text('Animation explicite')),
      body: ScalePulse(),
    );
  }
}

class ScalePulse extends StatefulWidget {
  const ScalePulse({super.key});
  @override
  State<ScalePulse> createState() => _ScalePulseState();
}

class _ScalePulseState extends State<ScalePulse> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _scale;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(duration: const Duration(seconds: 1), vsync: this)..repeat();
    _scale = Tween<double>(begin: 1, end: 1.2).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ScaleTransition(
        scale: _scale,
        child: Container(width: 50, height: 50, color: Colors.red),
      ),
    );
  }
}

Transitions entre pages (Hero)

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: HeroPage());
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hero Animation')),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Hero(
            tag: 'box',
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}

Bonnes pratiques animations

• Durées courtes (200-400 ms) pour responsivité
• Utiliser const pour widgets immuables
• Utiliser RepaintBoundary pour animer seulement la zone nécessaire
• Tester avec DevTools : Performance > 60 FPS cible