Flutter数字动画组件

介绍一下： 该组件是显示类似在线人数或累计人数可滚动式的 Animation Widget 可以通过 Controller 控制里面的数字

之前懒 ←，←，现在不懒了，所以有gif了

现在已发布到pub

pub package

源码地址

GitHub | animated_digit

最后更新版本
直接使用最后的版本。

空安全版本：

Null-safety Version animated_digit 2.0.2

非空安全版本：

Not Null-safety Version animated_digit 2.0.1

文档

API 参考

累加一个数字 | addValue

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

重置一个数字 | resetValue

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

Usage

import 'package:animated_digit/animated_digit.dart';

AnimatedDigitController _controller = AnimatedDigitController(520);

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

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

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

gif 示例代码

import 'package:animated_digit/animated_digit.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(AnimatedDigitWidgetExample());
}

class AnimatedDigitWidgetExample extends StatefulWidget {
  AnimatedDigitWidgetExample({Key key}) : super(key: key);

  @override
  _AnimatedDigitWidgetExampleState createState() =>
      _AnimatedDigitWidgetExampleState();
}

class _AnimatedDigitWidgetExampleState
    extends State<AnimatedDigitWidgetExample> {
  AnimatedDigitController _controller = AnimatedDigitController(520);

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _add() {
    _controller.addValue(1314.18);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Animated Digit Widget Example"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              AnimatedDigitWidget(
                controller: _controller,
                textStyle: TextStyle(color: Colors.pink[200], fontSize: 30),
                fractionDigits: 0,
                enableDigitSplit: false,
              ),
              SizedBox(height: 20),
              AnimatedDigitWidget(
                controller: _controller,
                textStyle: TextStyle(color: Colors.orange[200], fontSize: 30),
                fractionDigits: 0,
                enableDigitSplit: true,
              ),
              SizedBox(height: 20),
              AnimatedDigitWidget(
                controller: _controller,
                textStyle: TextStyle(color: Colors.green, fontSize: 30),
                fractionDigits: 2,
                enableDigitSplit: true,
                digitSplitSymbol: "'",
              ),
              SizedBox(height: 20),
              AnimatedDigitWidget(
                controller: _controller,
                textStyle: TextStyle(color: Colors.cyan[200], fontSize: 30),
                fractionDigits: 2,
                enableDigitSplit: true,
              )
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _add,
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

感谢

number_precision

吃瓜~ 祝大家开心每一天( ^▽)

b x h ~ love