Flutter数字动画插件animate_number的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter数字动画插件animate_number的使用

简介

animate_number 是一个用于Flutter的插件，可以轻松创建数字滑动动画效果。它非常适合用于需要动态展示数字变化的应用场景。

Animate Number

示例

以下是一个简单的示例代码，展示了如何使用 animate_number 插件来实现数字动画效果：

主要代码片段

import 'dart:async';
import 'dart:math';

import 'package:animate_number/animate_number.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class AnimateNumberPage extends StatefulWidget {
  const AnimateNumberPage({super.key});

  @override
  State<AnimateNumberPage> createState() => _AnimateNumberPageState();
}

class _AnimateNumberPageState extends State<AnimateNumberPage> {
  late final ValueNotifier<num> _numberNotifier;
  late final Timer _timer;

  @override
  void initState() {
    super.initState();
    _numberNotifier = ValueNotifier(0);
    _randomNumber();
  }

  void _randomNumber() {
    final random = Random();
    _timer = Timer.periodic(
      const Duration(seconds: 3),
      (timer) {
        _numberNotifier.value = (1000 + random.nextInt(8999)).toDouble();
      },
    );
  }

  @override
  void dispose() {
    _timer.cancel();
    _numberNotifier.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Example'),
      ),
      body: SizedBox.expand(
        child: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              AnimateNumber(
                number: _numberNotifier,
                numberFormat: NumberFormat("###,###.###"),
                style: const TextStyle(
                  fontWeight: FontWeight.w600,
                  fontSize: 18,
                ),
              ),
              const SizedBox(width: 4),
              const Text(
                'watching',
                style: TextStyle(
                  fontSize: 18,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

关键点说明

  • ValueNotifier：用于监听数值的变化，并触发UI更新。
  • Timer：每隔3秒生成一个随机数并更新 _numberNotifier 的值。
  • AnimateNumber：核心组件，负责数字动画显示。可以通过 number 属性绑定数值，通过 style 属性设置文本样式，通过 numberFormat 设置数字格式。

运行效果

Animation Gif

如需查看完整的示例代码，请参考 GitHub 示例文件。

维护者和支持

该插件由 Farhan Fadila 维护。您可以通过 PayPal 或其他方式支持维护者。

Maintainer Avatar

如果您有任何问题或建议，可以通过电子邮件联系他：farhan.fadila1717@gmail.com。


以上内容提供了关于 `animate_number` 插件的详细说明和完整的示例代码，帮助开发者快速上手使用该插件实现数字动画效果。

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter中使用animate_number插件来实现数字动画的示例代码。这个插件允许你以动画的形式展示数字的增减变化，非常适合用于计数器、评分、价格变化等场景。

首先，你需要在你的pubspec.yaml文件中添加animate_number依赖：

dependencies:
  flutter:
    sdk: flutter
  animate_number: ^0.4.0  # 请检查最新版本号

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

接下来是一个简单的示例，展示了如何使用AnimateNumber组件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animate Number Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animate Number Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Animated Counter:',
                style: TextStyle(fontSize: 24),
              ),
              SizedBox(height: 20),
              AnimatedNumberWidget(),
            ],
          ),
        ),
      ),
    );
  }
}

class AnimatedNumberWidget extends StatefulWidget {
  @override
  _AnimatedNumberWidgetState createState() => _AnimatedNumberWidgetState();
}

class _AnimatedNumberWidgetState extends State<AnimatedNumberWidget> with SingleTickerProviderStateMixin {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        AnimateNumber(
          number: _counter.toDouble(), // 必须是double类型
          duration: 1000, // 动画持续时间，单位为毫秒
          tween: IntTween(begin: 0, end: _counter), // 使用IntTween确保动画结束时是整数
          style: TextStyle(fontSize: 32, color: Colors.blue),
        ),
        SizedBox(height: 20),
        FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ],
    );
  }
}

在这个示例中，我们创建了一个简单的计数器应用，其中AnimatedNumberWidget是一个状态组件，包含一个AnimateNumber和一个按钮。每次点击按钮时，_counter的值会增加，AnimateNumber组件会以动画的形式显示这个变化。

  • number属性指定了当前要显示的数字，它必须是double类型。
  • duration属性指定了动画的持续时间。
  • tween属性使用了IntTween来确保动画结束时数字是整数。
  • style属性用于设置数字的文本样式。

这个示例提供了一个基本的使用animate_number插件的方法，你可以根据需要进一步自定义和扩展。

回到顶部