Simple animation in Flutter

main.dart

import 'package:flutter/material.dart';
import 'dart:math' as math; 

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Radar Chart Example',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: RadarChartScreen(),
    );
  }
}

class RadarChartScreen extends StatefulWidget {
  @override
  _RadarChartScreenState createState() => _RadarChartScreenState();
}

class _RadarChartScreenState extends State<RadarChartScreen> 
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _animation;
  // Sample data (replace with your data)
  final List<Map<String, dynamic>> data = [
    {'name': 'Bob', 'angle': 0.2, 'radius': 0.6},
    {'name': 'Lara', 'angle': 0.4, 'radius': 0.7},
    {'name': 'Kook', 'angle': 0.6, 'radius': 0.8},
    {'name': 'Charlie', 'angle': 0.8, 'radius': 0.9},
    {'name': 'Tushar', 'angle': 1.0, 'radius': 0.6},
    {'name': 'Alice', 'angle': 1.2, 'radius': 0.7},
    {'name': 'Andi', 'angle': 1.4, 'radius': 0.8},
  ];
  
  
   @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 1500), // Adjust duration
    )..repeat(reverse: true); // Loop animation

    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(
        CurvedAnimation(parent: _animationController, curve: Curves.easeInOut));

    _animationController.forward(); // Start the animation
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Radar Chart Example'),
      ),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return CustomPaint(
              size: Size(300, 300),
              painter: RadarChartPainter(data, _animation.value),
            );
          },
        ),
      ),
    );
  }
}


class RadarChartPainter extends CustomPainter {
    //Sample data (replace with your data)
 final List<Map<String, dynamic>> data;
   RadarChartPainter(this.data, this.animationValue);
  
    final double animationValue;

  @override
  void paint(Canvas canvas, Size size) {
    final centerX = size.width / 2;
    final centerY = size.height / 2;
    final maxRadius = size.width / 2 - 20; // Adjust maximum radius
    final paint = Paint()
      ..color = Colors.teal
      ..style = PaintingStyle.fill
      ..strokeWidth = 1;

    // Draw concentric circles
      for (double i = 0; i <= maxRadius; i += 10) {
      canvas.drawCircle(Offset(centerX, centerY), i,
          Paint()..color = Colors.teal.withOpacity(0.2));
    }


    for (var entry in data) {
     final angle = entry['angle'] * 2 * math.pi * animationValue;
       final radius =
          (entry['radius'] * maxRadius);
      final x = centerX + radius * math.cos(angle);
      final y = centerY + radius * math.sin(angle);

      canvas.drawCircle(Offset(x, y), 15, paint); // Draw person marker

      // Draw labels for names (assuming labels are available)
      if(entry.containsKey('name')){

       final textStyle = TextStyle(
          color: Colors.white,
          fontSize: 8.0,
        );
       final textSpan = TextSpan(
         text: entry['name'], style: textStyle);
      final textPainter = TextPainter(
        text: textSpan,
        textDirection: TextDirection.ltr,
        textAlign: TextAlign.center,
        );
      textPainter.layout();
      textPainter.paint(canvas, Offset(x - textPainter.width / 2,
              y - textPainter.height / 2));

      }


    }
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}