Simple Number Increment using Animation in Flutter

This Article is posted by seven.srikanth at 10-03-2019 08:33:54

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.



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.


import 'package:flutter/material.dart';

main(List<String> args) {
runApp(LogoApp());
}

class LogoApp extends StatefulWidget {
@override
_LogoAppState createState() => _LogoAppState();
}

class _LogoAppState extends State<LogoApp>
with SingleTickerProviderStateMixin {

Animation<double> animation;
AnimationController _controller;
String i;
@override
void initState() {
super.initState();
_controller = AnimationController(duration:const Duration(seconds: 10), vsync: this);
animation =Tween<double>(begin: 0, end: 300).animate(_controller)
..addListener((){
setState((){
// The state that has changed here is the animation objects value
i = animation.value.toStringAsFixed(0);
});
});
_controller.forward();
}

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

@override
Widget build(BuildContext context) {
return Center(
child: Container(
margin: EdgeInsets.symmetric(vertical: 10),
child: Text('$i', textDirection: TextDirection.rtl, style: TextStyle(fontSize: 20),),
),
);
}
}


Hope this example is helpful to you.

Thanks,
Srikanth

Tags: Simple Number Increment using Animation in Flutter



0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.





Recent Articles


Meme Generator with Flutter

Posted by theindianappguy on 25 Feb 2020 Tutorials


Flutter Scaffold Widget

Posted by themaaz32 on 05 Feb 2020 Tutorials


Flutter Tensorflow Tutorial

Posted by theindianappguy on 28 Jan 2020 Tutorials


Explicit Animations - RotationTransition in Flutter

Posted by seven.srikanth on 27 Jan 2020 Article



© 2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com