How can I animate numbers in flutter?

Viewed 51

How can I animate number starting from 0 to the number's value like the following example :

enter image description here

2 Answers

So there is a Flutter package that helps to do this. You can add it to your pubspec.yaml by using the following command in your terminal :

flutter pub add countup 

and now add this line to your dart code :

import 'package:countup/countup.dart';

and finally add the widget by writing this code :

     Countup(
              begin: 0,
              end: 268000, //here you insert the number or its variable
              duration: Duration(seconds: 3),
              separator: ',', //this is the character you want to add to seperate between every 3 digits
              style: TextStyle(
                fontSize: 36,
              ),
            ),
      

You can increase it with delay and update the screen in app

await Future.delayed(const Duration(milliseconds: 500), () {
  setState(() {
    i++;
  });
});
Related