A scrolling digital animation widget

Overview

flutter dart


animated_digit

一个上下滚动的数字动画 widget,凡是需要动画效果的数字,简单易用。

A scrolling digital animation widget that can be used to display the amount of animation, any number that requires animation effects is simple and easy to use.

Usage

AnimatedDigitController _controller = AnimatedDigitController(520);

AnimatedDigitWidget(
  controller: _controller,
  textStyle: TextStyle(color: Color(0xff009668)),
  fractionDigits: 2,
  enableDigitSplit: true,
)

// >= v2.0.6
AnimatedDigitWidget(
  value: 520, 
  textStyle: TextStyle(color: Color(0xff009668)),
  fractionDigits: 2,
  enableDigitSplit: true,
)

// 累加一个数字 | increment 
_controller.addValue(1314);

// 重置一个数字 | reset
_controller.resetValue(1314);

API

累加一个数字 | addValue

AnimatedDigitController _controller = AnimatedDigitController(520);
_controller.addValue(1314); // 1834

重置一个数字 | resetValue

AnimatedDigitController _controller = AnimatedDigitController(520);
_controller.resetValue(1314); // 1314

感谢

number_precision

You might also like...

Circular Reveal Animation as Flutter widget!

Circular Reveal Animation as Flutter widget!

Circular Reveal Animation Circular Reveal Animation as Flutter widget! Inspired by Android's ViewAnimationUtils.createCircularReveal(...). Статья с оп

Aug 15, 2022

Flutter 3D Flip Animation Widget

Flutter 3D Flip Animation Widget

flutter_flip_view This is a flutter Widget base on pure Dart code that provides 3D flip card visuals. Usage add package in your pubspec.yaml dependenc

Dec 30, 2022

Loading widget based on a Flare animation, allow you to create beautiful custom loading widgets or dialogs

flare_loading Loading widget based on a Flare animation, allow you to create custom loading widgets or dialogs If you're using Rive instead of Flare p

Apr 16, 2021

An implicit animation widget for rotation

An implicit animation widget for rotation

AnimatedRotation An implicitly animated version of RotationTransition which automatically transitions the rotation over time when the provided angle c

Jun 4, 2021

A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

Dec 13, 2022

A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

drawing_animation From static SVG assets See more examples in the showcasing app. Dynamically created from Path objects which are animated over time m

Dec 27, 2022

🔥🔥🔥 Easy to build an animation set

🔥🔥🔥 Easy to build an animation set

✨ Flutter Animation Set [Lanuage ~~] English | 中文文档 Simplified Flutter stagger animation.To drive the Flutter stagger animation through a timeline in

Oct 31, 2022

A library for handling animation warmup generically

This solution is not very scalable for applications with many animations to warm up and is meant mostly as an example of an approach applications could take to warmup their animations until a more permanent solution is available.

Nov 19, 2022

3Rein Parallax animation

3Rein Parallax animation

A Parallax behavior for any Flutter Scrollable This plugin enable a parallax effect in any Scrollable, simply wrap your Scrollable in a ParallaxArea a

Oct 21, 2022
Comments
  • Colour change

    Colour change

    Hi, is there anyway to change a numbers colour based on its value? For example, I have a number and I want it to turn red if its below 0. At the moment it animates but it does not change colour.

    permittedDays(holidays) >= 0
                                ? Column(
                                    children: [
                                      const Text(
                                        'Days permitted to stay',
                                      AnimatedDigitWidget(
                                        value: permittedDays(holidays),
                                        textStyle: const TextStyle(
                                          color: Colors.tealAccent,
                                          fontSize: 100.0,
                                        ),
                                      )
                                    ],
                                  )
                                : Column(
                                    children: [
                                      const Text(
                                        'Days Overstayed',
                                        textAlign: TextAlign.center,
                                      AnimatedDigitWidget(
                                        value: permittedDays(holidays).abs() + 1,
                                        textStyle: const TextStyle(
                                          color: Colors.redAccent,
                                          fontSize: 100.0,
                                        ),
                                      )
    
    opened by leecasey 3
  • flutter 3 There is warning

    flutter 3 There is warning

    SchedullerBinding.instance!.addPostFrameCallback(...)
                              ^
                              |---- Since flutter 3.0.0 instance does not nullable.
    
    opened by purgeyao 2
  • Text format support for example 10.000 => 10k

    Text format support for example 10.000 => 10k

    Hi @mingsnx,

    Thanks for your great package, can you please add support for formatting the text numbers for example like this:

          int value = int.parse(count);
    
          if (value < 1000) {
            // less than a thousand
            return value.toStringAsFixed(0);
          } else if (value >= 1000 && value < 1000000) {
            // less than 1 million
            double result = value / 1000;
            return "${result.toStringAsFixed(2)} K";
          } else if (value >= 1000000 && value < (1000000 * 10 * 100)) {
            // less than 100 million
            double result = value / 1000000;
            return "${result.toStringAsFixed(2)} M";
          } else if (value >= (1000000 * 10 * 100) &&
              value < (1000000 * 10 * 100 * 100)) {
            // less than 100 billion
            double result = value / (1000000 * 10 * 100);
            return "${result.toStringAsFixed(2)} B";
          } else if (value >= (1000000 * 10 * 100 * 100) &&
              value < (1000000 * 10 * 100 * 100 * 100)) {
            // less than 100 trillion
            double result = value / (1000000 * 10 * 100 * 100);
            return "${result.toStringAsFixed(2)} T";
          } else {
            return count;
          }
    

    or guide me please how to achieve this, thanks in advance!

    opened by RoyalCoder88 3
Owner
mingsnx
🧑‍💻 just want to simple encoding 🍀 just want to simple life 💘 just want to love one her 🇨🇳 🇨🇳 🇨🇳
mingsnx
Flutter animation tutorials, such common animation, flare animation.

❤️ Star ❤️ the repo to support the project or ?? Follow Me.Thanks! Facebook Page Facebook Group QQ Group Developer Flutter Open Flutter Open 963828159

Flutter开源社区 123 Sep 3, 2022
Cuberto is a leading digital agency with solid design and development expertise.

Cuberto's development lab: Cuberto is a leading digital agency with solid design and development expertise. We build mobile and web products for start

Cuberto 3k Dec 21, 2022
A Flutter widget that easily adds the flipping animation to any widget

flip_card A component that provides a flip card animation. It could be used for hiding and showing details of a product. How to use import 'package:fl

Bruno Jurković 314 Dec 31, 2022
A Flutter library that makes animation easer. It allows for separation of animation setup from the User Interface.

animator This library is an animation library for Flutter that: makes animation as simple as the simplest widget in Flutter with the help of Animator

MELLATI Fatah 225 Dec 22, 2022
A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration.

A simple animated circular menu for Flutter, Adjustable radius, colors, alignment, animation curve and animation duration. pub package Getting Started

Hasan Mohammed 91 Dec 20, 2022
Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's heart when you like something and animation effects to increase like count.

like_button Language: English | 中文简体 Like Button is a flutter library that allows you to create a button with animation effects similar to Twitter's h

FlutterCandies 357 Dec 27, 2022
BKash-Ballance-Animation - BKash Ballance Animation For Flutter

BKash-Ballance-Animation before clone the GitHub repository please give a star o

Blackshadow Software Ltd 11 Sep 1, 2022
Fisherman-Fishing-Animation - Fisherman Fishing Animation With Flutter

Fisherman Fishing Animation before clone the GitHub repository please give a sta

Blackshadow Software Ltd 9 Oct 27, 2022
Nubank card animation - Nubank card animation built with flutter

Nubank card animation Project | Technologies | How to run | How to contribute ??

Lucas da Silva Barbosa 8 Nov 6, 2022
Fade animation - Add fade animation to your app easily

fade_animation Add fade animation to your app easily using simple_animations pac

Mazouzi Aymene 3 Oct 6, 2022