Les Animations avec CustomPainter et Canvas dans Flutter

• CustomPainter est une classe abstraite dans Flutter qui permet de dessiner du contenu personnalisé directement sur le canevas.
• C’est l’équivalent de Custom View sur Android ou de UIView.draw() sur iOS.

• Créer des UI personnalisées impossibles avec les widgets standard.
• Réaliser des animations complexes et fluides.
• Dessiner des formes géométriques personnalisées.
• Créer des visualisations de données complexes.
• Développer des jeux et expériences interactives.

class MonCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    // Méthode principale pour dessiner
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // Détermine si le painter doit se redessiner
    return true;
  }
}
		

class MonPainter extends CustomPainter {
  final double valeurAnimation;

  MonPainter({required this.valeurAnimation});

  @override
  void paint(Canvas canvas, Size size) {
    final centre = Offset(size.width / 2, size.height / 2);
    final paint = Paint()..color = Colors.blue;
    canvas.drawCircle(centre, 50.0 * valeurAnimation, paint);
  }

  @override
  bool shouldRepaint(MonPainter oldDelegate) {
    return oldDelegate.valeurAnimation != valeurAnimation;
  }
}
		

class MonWidgetPersonnalise extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: MonPainter(valeurAnimation: 0.5),
      size: Size(200, 200),
    );
  }
}
		

• Formes géométriques (cercles, rectangles, lignes).
• Chemins (paths) personnalisés.
• Images et bitmaps.
• Texte.

• Couleurs et dégradés.
• Styles de trait (remplissage ou contour).
• Épaisseur du trait.
• Effets (ombres, filtres).

// Remplissage simple
final fillPaint = Paint()
  ..color = Colors.blue
  ..style = PaintingStyle.fill;

// Contour
final strokePaint = Paint()
  ..color = Colors.red
  ..style = PaintingStyle.stroke
  ..strokeWidth = 3.0;

// Dégradé
final gradientPaint = Paint()
  ..shader = LinearGradient(
    colors: [Colors.yellow, Colors.orange],
  ).createShader(Rect.fromLTWH(0, 0, 200, 200));
		

class AnimationExample extends StatefulWidget {
  @override
  _AnimationExampleState createState() => _AnimationExampleState();
}

class _AnimationExampleState extends State<AnimationExample> 
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    )..repeat(reverse: true);
    
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return CustomPaint(
          painter: MonPainterAnimé(valeur: _animation.value),
          size: Size(200, 200),
        );
      },
    );
  }
}
		

• Visualisations de données personnalisées.
• Animations uniques et engageantes.
• Interfaces utilisateur originales et optimisées.