Flutter widgets for animatio

main.dart

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';

void main() => runApp(Home());

// Home page with the Material App
class Home extends StatefulWidget {
  Home({Key key}) : super(key: key);

  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Animation'),
        ),
        body: ProcessPage(),
      ),
    );
  }
}

// Process page with the timer
class ProcessPage extends StatefulWidget {
  ProcessPage({Key key}) : super(key: key);
  _ProcessPageState createState() => _ProcessPageState();
}

class _ProcessPageState extends State<ProcessPage>
    with TickerProviderStateMixin {
  // The duration is a variable wich is setup in the main page and have to pase through het child LineAnimation()...
  final animationDuration = Duration(milliseconds: 2000);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            // Other content on the page...
            Container(
              child: Text('First container'),
              color: Colors.cyanAccent,
            ),
            Container(
              child: LineAnimation(),
            ),
            // Other content on the page...
            Container(
              child: Text('Last Container'),
              color: Colors.deepPurpleAccent,
            ),
          ],
        ),
      ),
    );
  }
}

// Line animation
class LineAnimation extends StatefulWidget {
  LineAnimation({Key key}) : super(key: key);
  _LineAnimationState createState() => _LineAnimationState();
}

class _LineAnimationState extends State<LineAnimation>
    with TickerProviderStateMixin {
  AnimationController _controller;
  //  Animation<double> _animation;
  final _colorTween = ColorTween(begin: Colors.red, end: Colors.green);

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
        duration: Duration(milliseconds: 3000), vsync: this);
    _colorTween.animate(_controller);
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 50,
      child: Row(
        children: <Widget>[
          CustomPaint(
            painter: DotFirstPainter(),
            child: Container(
              height: 50,
            ),
          ),
          CustomPaint(
            painter: LineFirstPainter(),
            child: Container(
              height: 50,
            ),
          ),
          CustomPaint(
            painter: DotSecondPainter(),
            child: Container(
              height: 50,
            ),
          ),
          CustomPaint(
            painter: LineSecondPainter(),
            child: Container(
              height: 50,
            ),
          ),
          CustomPaint(
            painter: DotThirdPainter(),
            child: Container(
              height: 50,
            ),
          ),
        ],
      ),
    );
    // HERE if have to do something with the animation, but I don't now how...
    //    child: AnimatedBuilder(
    //      builder: (context, child)
    //      animation: ,
    //      child: ,),
    // );
  }
}

class DotFirstPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    paint.color = Colors.grey;

    var dotFirst = Offset(20, 20);
    canvas.drawCircle(dotFirst, 12.0, paint);
  }

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

class LineFirstPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    paint.color = Colors.grey;
    paint.strokeWidth = 2;
    paint.strokeCap = StrokeCap.round;

    final lineOneStart = Offset(40, 20);
    final lineOneEnd = Offset(140, 20);
    canvas.drawLine(lineOneStart, lineOneEnd, paint);
  }

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

class DotSecondPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    paint.color = Colors.grey;

    var dotFirst = Offset(160, 20);
    canvas.drawCircle(dotFirst, 12.0, paint);
  }

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

class LineSecondPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    paint.color = Colors.grey;
    paint.strokeWidth = 2;
    paint.strokeCap = StrokeCap.round;

    final lineOneStart = Offset(180, 20);
    final lineOneEnd = Offset(290, 20);
    canvas.drawLine(lineOneStart, lineOneEnd, paint);
  }

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


class DotThirdPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    paint.color = Colors.grey;

    var dotFirst = Offset(310, 20);
    canvas.drawCircle(dotFirst, 12.0, paint);
  }

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