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


How to add Assets Images and Network images in flutter?

Posted by bloggeraatit on 20 Sep 2019 Article


How to use inkwell class for responding images in flutter?

Posted by bloggeraatit on 20 Sep 2019 Article


Flutter Web Live on Server

Posted by nikhilchaudhary12155 on 18 Sep 2019 Article


How to specify stops in a gradient?

Posted by seven.srikanth on 20 Sep 2019 Article



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