How to start an animation from top to bottom?

Question

I want something like this:

But for now, I have this:

This is my code:

import 'dart:ui' as ui;

import 'package:flutter/material.dart';

class CustomTimePainter extends CustomPainter {
  CustomTimePainter({
    required this.animation,
    required this.backgroundColor,
    required this.color,
  }) : super(repaint: animation);

  final Animation<double> animation;
  final Color backgroundColor, color;

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()..color = backgroundColor;
    canvas.drawPaint(paint);

    final top = ui.lerpDouble(0, size.height, animation.value)!;
    Rect rect = Rect.fromLTRB(0, 0, size.width, top);
    Path path = Path()..addRect(rect);

    canvas.drawPath(path, paint..color = color);
  }

  @override
  bool shouldRepaint(CustomTimePainter old) {
    return animation.value != old.animation.value ||
        color != old.color ||
        backgroundColor != old.backgroundColor;
  }
}

How can I start the animation from top to bottom like the in first video?

Thanks for any help you can provide

Answer 1

Switch your rect

From

 Rect rect = Rect.fromLTRB(0, 0, size.width, top);

To

Rect rect = Rect.fromLTRB(0, top, size.width, size.height);

This way bottom will be always size.height.

More aboutRect.fromLTRB