Flutter animated number, spinning

Question

How to create animation like from video, that must show specific number. Animation is like in casino. https://github.hubspot.com/odometer/docs/welcome/ Like in second example where is 10, 000 is showed

Solution

You can achieve the design by using Number Slide Animation

Add this to your package's pubspec.yaml file:

number_slide_animation: ^0.1.1

Install it with terminal with the command:

flutter pub get

Import:

import 'package:number_slide_animation/number_slide_animation.dart';

Sample Code:

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Simple Example"),
      ),
      body: Container(
        child: Center(
          child: NumberSlideAnimation(
            number: "12345678987654321",
            duration: const Duration(seconds: 2),
            curve: Curves.bounceIn,
            textStyle: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold
            ),
          ),
        ),
      ),
    );
  }
}

Comments

[Vivek]

How Can I change number with animation by plus, minus with button click?

[sleighty]

Check out the counter app example.

[sleighty]

This solution doesn't actually animate from one number to another, it just displays the first number with the animation. This one does.