In this article, I'm going to share you the example of how to create a Flutter program which will simply increment a Number using Animation.
Here is how the final output is going to look.
![](../../Uploads/c6f3b3f7-aed6-444c-b19e-898c645f8f64.gifwidth="50%height="auto](
Below is an example code of how to do Number Increment using Animation in Flutter. This Code from Main.dart file. In order to run this project locally, all you need to do is to create a Project and copy paste the below code to Lib\main.dart file.
color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;](color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart';
color: #dcdcaa;](main(color: #4ec9b0;](List args) { color: #dcdcaa;](runApp(color: #4ec9b0;](LogoApp());}
color: #569cd6;](class color: #4ec9b0;](LogoApp color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #569cd6;](@override color: #4ec9b0;](_LogoAppState color: #dcdcaa;](createState() => color: #4ec9b0;](_LogoAppState();}
color: #569cd6;](class color: #4ec9b0;](_LogoAppState color: #569cd6;](extends color: #4ec9b0;](State color: #569cd6;](with color: #4ec9b0;](SingleTickerProviderStateMixin {
color: #4ec9b0;](Animation animation; color: #4ec9b0;](AnimationController _controller; color: #4ec9b0;](String i; color: #569cd6;](@override color: #569cd6;](void color: #dcdcaa;](initState() { color: #569cd6;](super.color: #dcdcaa;](initState(); _controller = color: #4ec9b0;](AnimationController(duration:color: #569cd6;](const color: #4ec9b0;](Duration(seconds: color: #b5cea8;](10), vsync: color: #569cd6;](this); animation =color: #4ec9b0;](Tween(begin: color: #b5cea8;](0, end: color: #b5cea8;](300).color: #dcdcaa;](animate(_controller) ..color: #dcdcaa;](addListener((){ color: #dcdcaa;](setState((){ color: #6a9955;](// The state that has changed here is the animation objects value i = animation.value.color: #dcdcaa;](toStringAsFixed(color: #b5cea8;](0); }); }); _controller.color: #dcdcaa;](forward(); }
color: #569cd6;](@override color: #569cd6;](void color: #dcdcaa;](dispose() { color: #569cd6;](super.color: #dcdcaa;](dispose(); _controller.color: #dcdcaa;](dispose(); }
color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](Center( child: color: #4ec9b0;](Container( margin: color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](symmetric(vertical: color: #b5cea8;](10), child: color: #4ec9b0;](Text(color: #ce9178;]('$color: #9cdcfe;](icolor: #ce9178;](', textDirection: color: #4ec9b0;](TextDirection.rtl, style: color: #4ec9b0;](TextStyle(fontSize: color: #b5cea8;](20),), ), ); }}
Hope this example is helpful to you.
Thanks,Srikanth