Flutter动画数字展示插件animated_number的使用

Flutter动画数字展示插件animated_number的使用

Animated Number flutter package

Animated Number 是一个为Flutter开发的自定义小部件，它拥有一些出色的功能，可以让你的应用在展示数字时更加吸引用户。

Sample

Getting started

Supported platforms

Android iOS Linux macOS Web Windows
Support SDK 16+ 9.0+ Any 10.11+ Any Any

要使用此插件，请将 animated_number 作为 依赖项添加到你的 pubspec.yaml 文件 中。

Usage

Examples

整数动画示例

AnimatedNumber(
    startValue: 0,
    endValue: 2000,
    duration: Duration(seconds: 2),
    isFloatingPoint: false,
    style: TextStyle(
        color: Colors.orange,
        fontSize: 24,
    ),
)

浮点数动画示例

AnimatedNumber(
    startValue: 0,
    endValue: 5500.38273626732,
    duration: Duration(seconds: 5),
    isFloatingPoint: true,
    decimalPoint: 4,
    style: TextStyle(
        color: Colors.lightBlue,
        fontSize: 42,
    ),
)

Features

Properties Type Description
startValue num 欲设置的起始值。
endValue num 欲设置的结束值。
duration Duration 动画持续时间。
isFloatingPoint bool 控制动画迭代是整数还是浮点数的标志。
decimalPoint int 欲设置的小数位数。
style TextStyle? 文本样式。
textAlign TextAlign? 文本应如何水平对齐。
prefixText String? 欲设置的前缀文本。
sufixText String? 欲设置的后缀文本。

示例Demo

下面是一个完整的示例代码，展示了如何在Flutter项目中使用animated_number：

import 'package:animated_number/animated_number.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Center(
            child: Text('Animated Number Sample'),
          ),
        ),
        body: CustomScrollView(
          primary: false,
          slivers: <Widget>[
            SliverToBoxAdapter(
              child: Padding(
                padding: const EdgeInsets.only(left: 20, top: 22, right: 20),
                child: Card(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: const [
                      Text('Floating Pointer Number'),
                      AnimatedNumber(
                        startValue: 0,
                        endValue: 5500.38273626732,
                        duration: Duration(seconds: 5),
                        isFloatingPoint: true,
                        decimalPoint: 4,
                        style: TextStyle(
                          color: Colors.lightBlue,
                          fontSize: 42,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            SliverPadding(
              padding: const EdgeInsets.all(20),
              sliver: SliverGrid.count(
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
                crossAxisCount: 2,
                children: <Widget>[
                  Card(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: const [
                        Text('1 second'),
                        AnimatedNumber(
                          startValue: 0,
                          endValue: 1000,
                          duration: Duration(seconds: 1),
                          isFloatingPoint: false,
                          style: TextStyle(
                            color: Colors.red,
                            fontSize: 18,
                          ),
                        ),
                        Text('miliseconds'),
                      ],
                    ),
                  ),
                  Card(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: const [
                        Text('2 seconds'),
                        AnimatedNumber(
                          startValue: 0,
                          endValue: 2000,
                          duration: Duration(seconds: 2),
                          isFloatingPoint: false,
                          style: TextStyle(
                            color: Colors.orange,
                            fontSize: 24,
                          ),
                        ),
                        Text('miliseconds'),
                      ],
                    ),
                  ),
                  Card(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: const [
                        Text('3 seconds'),
                        AnimatedNumber(
                          startValue: 0,
                          endValue: 3000,
                          duration: Duration(seconds: 3),
                          isFloatingPoint: false,
                          style: TextStyle(
                            color: Colors.yellow,
                            fontSize: 30,
                          ),
                        ),
                        Text('miliseconds'),
                      ],
                    ),
                  ),
                  Card(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: const [
                        Text('4 seconds'),
                        AnimatedNumber(
                          startValue: 0,
                          endValue: 4000,
                          duration: Duration(seconds: 4),
                          isFloatingPoint: false,
                          style: TextStyle(
                            color: Colors.lightGreen,
                            fontSize: 36,
                          ),
                        ),
                        Text('miliseconds'),
                      ],
                    ),
                  ),
                  Card(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: const [
                        AnimatedNumber(
                          startValue: 0,
                          endValue: 99.90,
                          duration: Duration(seconds: 3),
                          isFloatingPoint: true,
                          decimalPoint: 2,
                          prefixText: '\$ ',
                          style: TextStyle(
                            color: Colors.green,
                            fontWeight: FontWeight.bold,
                            fontSize: 22,
                          ),
                        ),
                      ],
                    ),
                  ),
                  Card(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: const [
                        AnimatedNumber(
                          startValue: 0,
                          endValue: 355.90,
                          duration: Duration(seconds: 5),
                          isFloatingPoint: true,
                          decimalPoint: 2,
                          sufixText: ' cm',
                          style: TextStyle(
                            color: Colors.blueAccent,
                            fontWeight: FontWeight.w500,
                            fontSize: 22,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ));
  }
}

Contact

任何问题、反馈或改进建议，请随时联系我。 yagon2395@gmail.com

License

MIT


更多关于Flutter动画数字展示插件animated_number的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画数字展示插件animated_number的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用animated_number插件来展示动画数字的示例代码。这个插件可以帮助你以动画形式展示数字的变化，非常适合用于计数器、分数展示等场景。

首先，确保你已经在pubspec.yaml文件中添加了animated_number依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_number: ^0.1.0  # 请检查最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以按照以下方式使用AnimatedNumber：

import 'package:flutter/material.dart';
import 'package:animated_number/animated_number.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Number Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AnimatedNumberDemo(),
    );
  }
}

class AnimatedNumberDemo extends StatefulWidget {
  @override
  _AnimatedNumberDemoState createState() => _AnimatedNumberDemoState();
}

class _AnimatedNumberDemoState extends State<AnimatedNumberDemo> with SingleTickerProviderStateMixin {
  int _number = 0;

  void _incrementNumber() {
    setState(() {
      _number += 10;  // 每次增加10，可以根据需要调整
      if (_number > 100) {  // 假设最大值为100
        _number = 0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Number Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedNumber(
              number: _number.toDouble(),  // AnimatedNumber需要double类型
              duration: Duration(seconds: 1),  // 动画持续时间
              style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _incrementNumber,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们首先定义了一个_AnimatedNumberDemoState类，它继承了State<AnimatedNumberDemo>并混合了SingleTickerProviderStateMixin（虽然在这个简单的例子中并没有用到TickerProvider，但在某些复杂的动画场景中可能会用到）。

  2. _number变量用来存储当前显示的数字，初始值为0。

  3. _incrementNumber方法每次被调用时，会将_number增加10，如果_number超过100，则重置为0。

  4. 在build方法中，我们使用AnimatedNumber组件来显示动画数字。AnimatedNumber的number属性需要一个double类型的值，所以我们将_number转换为double。duration属性定义了动画的持续时间。style属性用于定义数字的文本样式。

  5. 最后，我们添加了一个ElevatedButton，当按钮被点击时，会调用_incrementNumber方法来更新数字并触发动画。

运行这个示例，你应该能看到一个带有动画效果的数字展示，每次点击按钮时，数字会以动画形式增加。

回到顶部