flutter dart

English | ไธญๆ–‡็ฎ€ไฝ“

animated_digit

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

Example GIF

Usage

๐Ÿšด๐Ÿป Easy Show

// only show
AnimatedDigitWidget(
  value: 9999
),

๐Ÿš„ Easy Show & State

// simple state control 
int value = 9999;
AnimatedDigitWidget(
  value: value
  textStyle: TextStyle(color: Colors.pink),
),
setState((){
  value = 191919;
});

๐ŸŽก 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();

๐Ÿ–ผ UI Effect Image & ๐Ÿ’ป Code Example

7Dcj6f.png

AnimatedDigitWidget(
  value: 12531.98, // or use controller
),

7DcznS.png

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

7DcX1P.png

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

7DcOpt.png

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,
  ),
),

7DcvX8.png

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: "โ‚ฌ",
),

โœŒ 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.
  ],
),

๐Ÿณ 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

Libraries

animated_digit