Simple Number Increment using Animation in Flutter

This Article is posted by seven.srikanth at 3/10/2019 8:33:54 AM



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












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