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