title: Moving along a curved path in flutter
body: <p>I want to know how can I animate a widget in Flutter along a path like following image:</p>
  
  <p><a href="https://i.stack.imgur.com/yrKTu.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/yrKTu.gif" alt="enter image description here"></a></p>
  
  <p>Let's say I have a simple curved line:</p>
  
  <pre><code>import 'package:flutter/material.dart';
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: SamplePath(),
      );
    }
  }
  
  class SamplePath extends StatefulWidget {
    @override
    State&lt;StatefulWidget&gt; createState() =&gt; _SamplePathState();
  }
  
  class _SamplePathState extends State&lt;SamplePath&gt; {
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Container(
          child: CustomPaint( //
            size: Size(MediaQuery.of(context).size.width, 300),
            painter: MyPainter(),
          ),
        ),
      );
    }
  }
  
  
  class MyPainter extends CustomPainter {
    @override
    void paint(Canvas canvas, Size size) {
      Paint paint = Paint()
        ..color = Colors.red
        ..style = PaintingStyle.stroke
        ..strokeWidth = 8.0;
  
      Path path = Path();
      path.moveTo(0, size.height / 2);
      path.quadraticBezierTo(size.width / 2, size.height, size.width, size.height / 2);
      canvas.drawPath(path, paint);
    }
  
    @override
    bool shouldRepaint(CustomPainter old) {
      return false;
    }
  }
  
  </code></pre>
  
  <p>above code generates following result:</p>
  
  <p><a href="https://i.stack.imgur.com/yRk8R.png" rel="noreferrer"><img src="https://i.stack.imgur.com/yRk8R.png" alt="enter image description here"></a></p>
  
  <p>and I want to animate a <code>Container</code> or a <code>CustomePaint</code> from begin to end of it. How should I do that?</p>
  
  <p>Thanks in advance </p>