animated_digit

Description:

animated digit

English | 中文简体

animated_digit #
Scroll animation numbers widget, any number that need animation effects and easy to use.

Usage #
🚴🏻 Easy Show
// only show
AnimatedDigitWidget(
value: 9999
),
copied to clipboard
🚄 Easy Show & State
// simple state control
int value = 9999;
AnimatedDigitWidget(
value: value
textStyle: TextStyle(color: Colors.pink),
),
setState((){
value = 191919;
});
copied to clipboard
🎡 Controller

Built-in accuracy calculation

AnimatedDigitController _controller = AnimatedDigitController(10240.987);

AnimatedDigitWidget(
controller: _controller,
textStyle: TextStyle(color: Colors.pink),
fractionDigits: 2, // number of decimal places reserved, not rounded
enableSeparator: true, // like this 10,240.98
),
// UI Result => 10,240.98

// increment
_controller.addValue(1314);

// minus
_controller.minusValue(1314); // from v3.1.0 added

// times
_controller.timesValue(1314); // from v3.1.0 added

// divide
_controller.divideValue(1314); // from v3.1.0 added

// reset
_controller.resetValue(1314);

// last
_controller.dispose();
copied to clipboard
🖼 UI Effect Image & 💻 Code Example #

AnimatedDigitWidget(
value: 12531.98, // or use controller
),
copied to clipboard

AnimatedDigitWidget(
value: 12531.98, // or use controller
enableSeparator: true,
),
copied to clipboard

AnimatedDigitWidget(
value: 12531.98, // or use controller
fractionDigits: 2,
enableSeparator: true,
),
copied to clipboard

SingleDigitProvider(
data: SingleDigitData(
useTextSize: true,
builder: (size, value, isNumber, child) {
return isNumber ? child : FlutterLogo();
},
),
child: AnimatedDigitWidget(
value: 12531.98, // or use controller
textStyle: TextStyle(color: Colors.pink[200], fontSize: 30),
separateLength: 1,
separateSymbol: "#",
enableSeparator: true,
),
),
copied to clipboard

AnimatedDigitWidget(
value: 12531.98, // or use controller
textStyle: TextStyle(color: Colors.orangeAccent.shade700, fontSize: 30),
fractionDigits: 2,
enableSeparator: true,
separateSymbol: "·",
separateLength: 3,
decimalSeparator: ",",
prefix: "\$",
suffix: "€",
),
copied to clipboard
✌ If you want to change color based on value #
The add a ValueColor object to valueColors, which is an array, you can add more ...，but always take the last eligible
int value = 9999; // or use Controller.value
AnimatedDigitWidget(
value: value,
textStyle: TextStyle(
color: Colors.orange[200],
fontSize: 30,
),
valueColors: [
ValueColor(
//When value <= 0 , the color changes to red
condition: () => value <= 0,
color: Colors.red,
),
// you can add more ...，but always take the last eligible.
],
),
copied to clipboard
🐳 Widget Params & Documentation #
🚀 Required Params

⚠️ value and controller cannot be both null.
⚠️ controller has higher priority.



controller - digit controller, The displayed number can be controlled via addValue and resetValue.



value - the display number.



🍑 TextStyle And BoxStyle Setting

textStyle - the numbers text style.
boxDecoration - Use with decoration of Container.


🍇 Int Type(default) Or Decimal Type Setting

fractionDigits - the fraction digits, int, default 0.

🖌 Example ( 1000520.98765 ):
0 => 1000520;
1 => 1000520.9;
2 => 1000520.98;
3 => 1000520.987;
N => 1000520.[N];




The default 0 means an integer, when it is a decimal, if the value is less than the fractionDigits, it will be filled with 0 to the right, and the truncation method is used, so there is no rounding.


🍓 Numbers Free Style Setting


decimalSeparator - the decimal separator，can be replaced by other symbols in place of decimal separators, default ..



enableSeparator - enable digit separator. default false not enable, only true, separateLength and separateSymbol valid.

🖌 Example (true): 1000520 => 1,000,520 (seealso separateLength or separateSymbol)




separateSymbol - the numbers separator symbol (only enableSeparator is true), make numbers much easier to read, default ,.

🖌 Example ( 1000520 ):
, => 1,000,520
' => 1'000'520
- => 1-000-520




separateLength - the numbers separator length (only enableSeparator is true), separateSymbol by separator length insert, default 3.

🖌 Example ( 1000520 ):
1 => 1,0,0,0,5,2,0
2 => 1,00,05,20
3 => 1,000,520




🥝 Scroll Animation Setting

duration - the animate duration, default Duration(milliseconds: 300).
curve - the animate curve, default Curves.easeInOut. look animate curve.
loop - enable loop scroll animate. default true, always scroll down, not scroll up from 9 -> 0; false, scroll up and down.


🍎 Digital Size Scheme Setting


autoSize - the default true is to automatically expand and contract according to the size of the ( number / symbol ) itself, false, the text size of the number 0 is used as the container size of each number, which can ensure the same width, but it seems that there is a slight interval between 1 and other numbers 😊 .



animateAutoSize - the animation resizing. default true, false will change directly to the size of the number/symbol.



🍒 Number prefix and suffix Setting

prefix - the text to display in front of the counter.
suffix - the text to display after the counter.


Thanks #
number_precision