How to make this text fill animation in flutter - html

Question

I want to make a flutter timer app which will fill the screen from bottom to top with a color. I think i can do that by incrementing the size of the container with respect to time but i want the text as shown in the image. Please someone help me with this.
It changes the color of the text as the size of the container, which fills the screen, increases.

Answer 1

I can offer a solution for css. The timer counter will be displayed with rule content: '', with a cycle of 10 seconds and a delay of 1 second before this animation starts.
.timer:after {
content: "0";
animation: timer 10s 1s forwards;
}
The complete css code shows how 10 seconds are distributed over a percentage of 100%.
#keyframes timer {
10% {
content: "1";
}
...
100% {
content: "10";
}
}
I used rule mix-blend-mode: difference to invert the background color.
The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
I changed the height of the dynamic background element using rule top, and animated it in a similar way using rule animation and #keyframes.
#keyframes background_top {
from {
top: 100%;
}
to {
top: 0%;
}
}
The #keyframes rule sets keyframes when animating an element. A keyframe is an element's properties (transparency, color, position, etc.) that should be applied to an element at a given moment in time. Thus, animation is a smooth transition of style properties from one keyframe to another. The calculation of intermediate values between such frames is taken over by the browser.
body {
margin: 0;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: lightgrey;
position: relative;
}
.background {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: brown;
mix-blend-mode: difference;
animation: background_top 10s 1s forwards;
}
.timer:after {
content: "0";
animation: timer 10s 1s forwards;
font-size: 10em;
color: lightseagreen;
}
#keyframes timer {
10% {
content: "1";
}
20% {
content: "2";
}
30% {
content: "3";
}
40% {
content: "4";
}
50% {
content: "5";
}
60% {
content: "6";
}
70% {
content: "7";
}
80% {
content: "8";
}
90% {
content: "9";
}
100% {
content: "10";
}
}
#keyframes background_top {
from {
top: 100%;
}
to {
top: 0%;
}
}
<div class="wrapper">
<div class="timer"></div>
<div class="background"></div>
</div>

Answer 2

There is a simple way of doing this in flutter with CustomPaint.
The only thing you have to change is the StatelessWidget to a StatefulWidget so that the animation is possible, however I would recommend using something like hooks this package can make animation pretty simple.
class TextWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: CustomPaint(
size: Size(MediaQuery.of(context).size.width,
MediaQuery.of(context).size.height),
painter: TimerPainter(text: "6", height: 500),
));
}
}
class TimerPainter extends CustomPainter {
TimerPainter({required this.text, required this.height});
final String text;
final double height;
#override
void paint(Canvas canvas, Size size) {
// ========================================== TextPainter
final TextPainter textPainter = TextPainter(
textDirection: TextDirection.ltr,
text: TextSpan(
text: text,
style: TextStyle(
color: Colors.greenAccent,
fontSize: 500,
),
))
..layout();
textPainter.paint(
canvas,
Offset(size.width / 2 - textPainter.width / 2,
size.height / 2 - textPainter.height / 2));
// ============================================== Rect
final rectPaint = Paint()
..color = Colors.greenAccent
..blendMode=BlendMode.difference;
canvas.drawRect(
Offset(0, size.height / 2) & Size(size.width, height), rectPaint);
final rectPaint2 = Paint()
..color = Colors.white
..blendMode=BlendMode.difference;
canvas.drawRect(
Offset(0, size.height / 2) & Size(size.width, height), rectPaint2);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}
this is how it looks